Hi All! I am new to datatables. I am using this to display results from ajax call.

amritleen · April 2018

On a single page, I have user form and the result section. User fills the details and submit. On this, datatable is displayed. This works perfectly fine. But when user updates anything on the form and submits it, I am trying to destroy datatable and recreate it. Doing this, i am getting the error - clientWidth of undefined. Below is the code -

function CBResults(response){
    var dataArray = response.data;
    
    
    
    if ($.fn.DataTable.isDataTable("#thetable")) {
        $('#thetable').dataTable();
        $('#thetable').DataTable().clear().destroy();
        
        
    }
    var html = '<tbody>';
    for(var i = 0; i < dataArray.length; i++)
        html += '<tr><td></td></tr>';  // code to populate columns of the table
    
    html += '</tbody>';
    
    
        $('#thetable thead').first().after(html);

        $('#thetable').DataTable( {
            retrieve: true,          
            dom: 'Blfrtip',
            scrollY: "300px",
            responsive: true,
            scrollX:        true,
            scrollCollapse: true,
            columnDefs: [ {
                targets: [4,5,6,7,8,9,10,11],
                render: $.fn.dataTable.render.ellipsis(10)
            } ], 
            buttons: [
                'colvis','copy', 'csv', 'excel', 'pdf'  
            ],
            fixedColumns:   {
                leftColumns: 2
            },
            
             "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
        } );
}

Let me know what I am doing wrong and how can I correct it? Appreciate quick reply on this.

colin · April 2018

Hi @amritleen ,

I suspect it's due to the retrieve, since you're calling that after resizing the table. I would try it without that, and see if that makes a difference.

Cheers,

Colin

amritleen · April 2018

I was trying different combinations. Lastly found that if I comment out scrollX and scrollY, then everything starts working. But table comes out of the container.

allan · April 2018

We're happy to take a look at a test case showing the issue so we can help to debug it.

Allan

amritleen · May 2018

Actual implementation includes Joomla 3.x. It is failing there. But if I try to use the same code on local html file and open in browser, it works fine. Below is the actual error -

Uncaught TypeError: Cannot read property 'clientWidth' of null
at _fnCalculateColumnWidths (jquery.dataTables.js:5652)
at _fnAdjustColumnSizing (jquery.dataTables.js:2128)
at jquery.dataTables.js:5705
at jquery.dataTables.js:1628
at dispatch (jquery.min.js:2)
at y.handle (jquery.min.js:2)
_fnCalculateColumnWidths @ jquery.dataTables.js:5652
_fnAdjustColumnSizing @ jquery.dataTables.js:2128
(anonymous) @ jquery.dataTables.js:5705
(anonymous) @ jquery.dataTables.js:1628
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

Please suggest. Even if I try on jsfiddle or http://live.datatables.net/, this works fine. It is failing only on Joomla.

amritleen · May 2018

Basically destroy() is throwing the error. What I am trying is to refresh/reinitiate datatable on click on button so that it can show data from new array. Is there a workaround for this?

colin · May 2018

Without seeing a running example, it's hard to diagnose - as you said it works in a fiddle, so that means the code itself is fine, it's something environmental. Have a look at these links here and here, they also saw the error and found a fix, so that may be useful.

Cheers,

Colin

amritleen · May 2018

I created the fiddle but unfortunately its working there. Below is the website URL -

http://npatlas-dev.chem.sfu.ca/joomla/index.php/search/advanced-search

When you open the page, there will be 1 datatable by default which has the data. By clicking on the "submit" button, I try to repopulate datatable with another set of data. But error comes when destroy() is called. Hope this should help to look at the issue.

kthorngren · May 2018

Looks like you are calling the function clickButton() when clicking "Submit". This functions looks like its manipulating the table via jQuery then you are trying the Datatables clear() and destroy() APIs. I would first change the order and use jQuery('#example').DataTable().clear().destroy(); before using jQuery to change the table.

I see a few of these errors in the console:
[DOM] Found 2 elements with non-unique id #login-form:

You may want to correct this with unique IDs.

Kevin

amritleen · May 2018

Hi Kevin,

Thanks for the reply. I have moved jQuery('#example').DataTable().clear().destroy(); before the jQuery manipulation.
Please ignore these -** [DOM] Found 2 elements with non-unique id #login-form:** . This is from some other module.

I use the same code in jsfiddle. But its working fine there. On debugging, I found out that on line no 9284 in jQuery.datatables.js, data vanishes on the website making the table container empty, but in jsfiddle, it overwrites the data (and table container (which is div.dataTables_scrollBody) still exists, so it doesnt throw the error).

amritleen · May 2018

Can you suggest something?

kthorngren · May 2018

I copied your relevant code here:
http://live.datatables.net/dapodupo/1/edit

Seems like when I enable the scrolling features (scrollX or scrollY) there are errors when I click the submit button. Not sure why these are causing a problem. @allan or @colin may have ideas.

However in your website when I click the Submit button and inspect the table I don't see the tbody. So your problem is something different it seems. It appears as though the table is not totally cleared when using clear().destroy(). It still shows 57 rows.

I would start with a process of elimination. I would comment out this line:
jQuery('#example thead').first().after(html);

Remove the 'destroy()method and comment out the function calldrawDataTable();`.

Does the table clear with just jQuery('#example').DataTable().clear();?

If that clears the table then I would add the destroy() back and the call to drawDataTable();. Does that work?

If not then comment out the three scroll options.

If you get destroy working then add back the jQuery('#example thead').first().after(html); line.

Kevin

amritleen · May 2018

Hi Kevin,

Thanks for your help. I tried keeping just jQuery('#example').DataTable().clear();. It is not clearing the table. I am not sure where you didnt find tbody tag. But what I found out was after execution of jQuery('#example thead').first().after(html); table has got 2 tbody tag. I modified the code now and put jQuery('#example tbody').remove() before appending anything to the table. But this also doesnt seem to solve the problem. Only thing that makes the code working is commenting out scrollX and scrollY parameters in datatable options. But it defeats the purpose of using datatable.

amritleen · May 2018

I dont think even destroy() clears the table. I have debugged the code and saw that after destroy() call, table contents are still intact. (I have commented scrollX and scrollY options).

allan · May 2018

destroy() will eave the plain HTML table in place: http://live.datatables.net/voyavuqe/1/edit .

Allan

kthorngren · May 2018

table has got 2 tbody tag

Good find, I didn't notice that.

Try removing the tbody tag from the HTML string you are building and use this:
jQuery('#example tbody').append(html);

Also use:
jQuery('#example').DataTable().clear().destroy();

Updated example with scrolling, etc:
http://live.datatables.net/dapodupo/3/edit

Having two tbody tags is going to cause problems for Datatables.

Also note that your 2nd columnDefs option might overwrite the first. Try combining them if it seems to not give the expected results.

Kevin

amritleen · May 2018

Hi Kevin,

Thanks for the quick reply. But I am having hard time to fix this. I tried but its still not working. If I try on jsfiddle or normal browser, same code work seamlessly, but on my website its throwing error "clientWidth of null". destroy() method is throwing this error constantly. If I remove destroy() and just use clear(), it doesnt remove the original data. I guess using destroy() method is a must to reinitiate datatable.

kthorngren · May 2018

I don't see the changes I suggested in your site. Did you try those?

Kevin

amritleen · May 2018

My sincere apologies. I started trying out different combinations. Could you please check now.

kthorngren · May 2018

Interesting. Its beyond my capabilities to troubleshoot. Its hard to say why the table doesn't seem to clear since it still shows the 57 rows.

Kevin

amritleen · May 2018

@colin and @allan - Please look into this and help.

colin · May 2018

I took a look, and there's a few console errors, things like non-unique IDs, so that would be worth cleaning up.

When the table is cleared, there's a console error around that point too:

jquery.dataTables.js:5652 Uncaught TypeError: Cannot read property 'clientWidth' of null
    at _fnCalculateColumnWidths (jquery.dataTables.js:5652)
    at _fnAdjustColumnSizing (jquery.dataTables.js:2128)
    at _Api.<anonymous> (jquery.dataTables.js:8636)
    at _Api.iterator (jquery.dataTables.js:7012)
    at _Api.<anonymous> (jquery.dataTables.js:8635)
    at Function.adjust (jquery.dataTables.js:7180)
    at _Api.<anonymous> (jquery.dataTables.js:8619)
    at _Api.visible (jquery.dataTables.js:7180)
    at _Api.<anonymous> (jquery.dataTables.js:9288)
    at _Api.iterator (jquery.dataTables.js:7012)

But it's hard to know what point that's being created. Could you add more logging around your clickButton function so we can get a better idea of what's happening? As you said earlier, it works in a fiddle in isolation, so it's something else happening on your page.

Scott Bowers · January 2020

Has anyone found the fix for this? I am having the same issue and found a few items that might help. This only happens when scroll is turned on, the error happens here:

else if ( scrollY ) {
                tmpTable.width( tableContainer.clientWidth );
            }

TableContainer is "div.dataTables_scrollBody", after destroying the table and trying to recreate it, tableConainer is null and it throws the error above.

I am using the datatable in a Dojo widjet and so I am wondering if the way it gets destroyed is the issue.

Hope this info helps.

colin · January 2020

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

acropose · March 2021

Someone has found how to fix this error : "Cannot read property 'clientWidth' of null" ?

I have the same error on this test case: https://codepen.io/MrSolarius/project/editor/DNwoxQ

In my case, I want to reload data with new date range parameters. So on my form change, I try to clear and destroy datatable to recreate it after.

The datatable will correctly create the first time but when I try to reload the table load forever.

kthorngren · March 2021

@acropose You have this:

   ajax: {
        url: "/data.json",
        type: "GET",
        data: function(d) {
            /*
                 *In my real test case the values are get parametter used to get data bettewen two date
             */
            d.startDate = $("#startDate").val();
            d.endDate = $("#endDate").val();
        },
    },

Looks like it is properly fetching the date range values and sending to the server. IS that correct?

You have these event handlers:

$("#startDate").on("change", async function() {
    jQuery("#commArray").DataTable().clear().destroy();
    $("#commArray").DataTable(datatableOBJ);
});

$("#endDate").on("change", async function() {
    datable.ajax.reload()
    datable.destroy();
    $("#commArray").DataTable(datatableOBJ);
});

If all you want to do is refresh the Datatable with a new set of data and not making any config changes just use datable.ajax.reload() in the event handler. You don't need to clear the data or destroy the Datatable.

Kevin

acropose · March 2021

Oh ok, and yes it works !
Thanks ^^

j15orge_mt · July 2021

help me with this error
Uncaught TypeError: Cannot read property 'clientWidth' of null
at Ja (jquery.dataTables.min.js:77)
at aa (jquery.dataTables.min.js:26)
at v.<anonymous> (jquery.dataTables.min.js:140)
at v.iterator (jquery.dataTables.min.js:113)
at v.<anonymous> (jquery.dataTables.min.js:140)
at Function.adjust (jquery.dataTables.min.js:116)
at v.<anonymous> (jquery.dataTables.min.js:140)
at v.iterator (jquery.dataTables.min.js:113)
at v.<anonymous> (jquery.dataTables.min.js:140)
at v.visible (jquery.dataTables.min.js:116)

j15orge_mt · July 2021

help me with this error!!!!!
Uncaught TypeError: Cannot read property 'clientWidth' of null
at Ja (jquery.dataTables.min.js:77)
at aa (jquery.dataTables.min.js:26)
at v.<anonymous> (jquery.dataTables.min.js:140)
at v.iterator (jquery.dataTables.min.js:113)
at v.<anonymous> (jquery.dataTables.min.js:140)
at Function.adjust (jquery.dataTables.min.js:116)
at v.<anonymous> (jquery.dataTables.min.js:140)
at v.iterator (jquery.dataTables.min.js:113)
at v.<anonymous> (jquery.dataTables.min.js:140)
at v.visible (jquery.dataTables.min.js:116)

send mail if there is any solution to my dilemma j15orge_mt@hotmail.com

colin · July 2021

@j15orge_mt We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Hi All! I am new to datatables. I am using this to display results from ajax call.

Hi All! I am new to datatables. I am using this to display results from ajax call.

Answers

Howdy, Stranger!

Categories

DataTables

Hi All! I am new to datatables. I am using this to display results from ajax call.

Hi All! I am new to datatables. I am using this to display results from ajax call.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables