Minor issue/bug in dataTables 2.2.0/2.2.1?

skallaje · January 23

Debugger code (debug.datatables.net):

function dtRowNumber(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $("td:eq(0)", nRow).html(iDisplayIndexFull + 1);
}

var dqThreshold = 50;

function dtCreatedCellPercentComplete(td, cellData, rowData, row, col) {
    if (cellData !== '---') {
        //alert(Math.abs(numericValue(cellData)) + " > " + (100 - dqThreshold));
        if (Math.abs(numericValue(cellData)) == 100) {
            $(td).addClass('complete');
        }
        else if (Math.abs(numericValue(cellData)) < (100 - dqThreshold)) {
            $(td).addClass('highlight');
        }
    }
}

completionTable = $('#tbl-completion').dataTable({
    rowCallback : dtRowNumber,
    searching : false,
    data : [
            ['1','Yes','ABC','ABC','100.00 %','100.00 %'],
            ['2','Yes','DEF','DEF','100.00 %','100.00 %']
        ],
    lengthChange : false,
    paging : false,
    info : false,
    order : [ [ 1, "desc" ], [ 2, "asc" ], [ 4, "asc" ] ],
    columnDefs : [
        { targets : [ 0 ], className : "no-export" },
        { targets : [ 1 ], className : "centered" },
        { targets : [ 2, 3, 4 ] },
        { targets : [ 5, 6 ], className : "percent", createdCell : dtCreatedCellPercentComplete, type : "num-fmt" },
        { targets : [ 0 ], sortable : false }
    ]
});

Error messages shown:
Uncaught ResizeObserver loop completed with undelivered notifications.

Description of problem:
While the error above is not a show-stopping error, I do see the datatable resize happening slow in action. I am not sure why though. We don't have any code related to resizing in our application. The stable version where everything related to this datatable looked fine was dataTables 2.1.8. Something must have changed in dataTables 2.2.0 and 2.2.1?

kthorngren · January 23

See this thread discussing the error. The ResizeObserver was added to help with setting the column sizes. See if the nightly version resolves the issue. If not then Allan might ask for a test case to debug further.

Kevin

allan · January 23

Forget the "might" - I will as for a test case . The nightly should hopefully resolve the issue and I'd welcome feedback on that. If you are able to confirm the fix, I'll get it packaged up and released.

Allan

skallaje · January 23

Thank you both for the quick response.

Just to be clear, the error doesn't occur on page load, or page reload/refresh etc., The only time I have seen it occur is when I right-click and open the browser debug console. It throws the error and at the same time I see a slow-resizing of the datatable. This behavior is only on Chrome (v132 on my computer). It doesn't occur on Firefox or Edge.

I tried the nightly version and it didn't fix the issue. I still see the error and slow-resizing of my datatable.

test case 1: right-click on the page and select "Inspect". the debug console throws that error as the datatable resizes itself slowly.

test case 2: widen/narrow the browser window and the datatable resizes itself slowly (error shows up in the debug console)

allan · January 23

Can you link to the page where this is happening please? Or is it every page which uses DataTables, including the examples on this site?

Allan

skallaje · January 23

I work on a government website. not sure I can share the link publicly. I will have to check with my team on that. the website still uses datatables 2.1.8. we will have to deploy 2.2.1 and once that is done, I could share the link if that is okay?

allan · January 24

Yeah no problem. Or if you are able to use JSFiddle, https://live.datatables.net or similar to create a test case showing the issue, that would be fine as well. I just need some way to recreate the issue, and as at the moment I can't see the error. I have seen it in the past, but the work done on it should have resolved it (it does appear to for the test cases I have).

Allan

skallaje · January 30

I hope this helps?
https://live.datatables.net/clone/8045/edit

skallaje · January 30

For some reason, the link isn't working above.

Please copy this html code:

<html lang="en" class="h-100" data-bs-theme="light">
<head>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.2.1/js/dataTables.min.js"></script>
<link href="https://cdn.datatables.net/2.2.1/css/dataTables.dataTables.min.css" rel="stylesheet" type="text/css" />

<title>News Archive</title>
</head>
<body class="d-flex flex-column h-100">
<main role="main" class="flex-shrink-0">
    <div class="container">
        <h1 class="mt-3">Complete News Archive</h1>
    
    <table class="table table-hover table-sm" id="news-archive">
            <thead class="thead-light">
                <tr>
                    <th scope="col">Title</th>
                    <th scope="col">Published</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        AAA AAA AAAAAAAAA AAAAAAAAA AAAAAAA AAAAA
                    </td>
                    <td class="text-center">2024-10-22</td>
                </tr>
                <tr>
                    <td>
                        BBBB BBBBBBB-BBBBB BBBB BBBBBBBBB BBBBBBBBB BBBBBBBB
                    </td>
                    <td class="text-center">2024-09-16</td>
                </tr>
            </tbody>
        </table>
    </div>
</main>

</body>
</html>

and this js code:

$(document).ready(function() {
  $('#news-archive').DataTable(
    {
      language : {
        entries : { _ : "articles", 1 : "article" },
        info : "Showing _START_ to _END_ of _TOTAL_ _ENTRIES-TOTAL_",
        lengthMenu : "Show _MENU_ articles per page"
      },
      order : [ [ 1, "desc" ] ]
    }
  );
} );

Open the console. resize the output screen. you should see the error.

allan · January 31

Here is a running copy: https://live.datatables.net/curozazu/1/edit . I'm not seeing the issue in Chrome or Firefox, but that might be a version / platform thing. Is it happening for you there?

Allan

skallaje · January 31

It is happening. I wish I could show you a screenshot of it, but the upload of jpg and png files fail here for an unknown reason. I have tried numerous times and just can't get it to upload.

I wish we could get on a Teams call or something? what time zone do you live in? I am in US Mountain Time Zone.

allan · January 31

Does it happen if you try this updated example: https://live.datatables.net/curozazu/3/edit ?

If it is happening there, can you let me know the browser and OS you are using and the version of both.

I'm in the UK. Video call support is available via the support packages, but to be honest in this case I think it would be of limited utility. I need to be able to reproduce the error so I can debug it.

Thanks,
Allan

skallaje · January 31

Yes, it does.

Chrome: Version 132.0.6834.160 (Official Build) (64-bit)
Windows 10 Enterprise

And this is new. When I tried your link on Firefox (134.0.2 (64-bit)), I saw the same error come up in the console. But, my dev version of the website never throws it like it does on Chrome.

skallaje · February 10

Alan, not sure what magic you did, but the issue seems to have been resolved in v2.2.2. Thank you!

allan · February 10

Awesome - thanks for letting me know!

Allan

Minor issue/bug in dataTables 2.2.0/2.2.1?

Minor issue/bug in dataTables 2.2.0/2.2.1?

Answers

Howdy, Stranger!

Categories

DataTables

Minor issue/bug in dataTables 2.2.0/2.2.1?

Minor issue/bug in dataTables 2.2.0/2.2.1?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables