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.

amritleenamritleen Posts: 14Questions: 2Answers: 0
edited April 2018 in Free community support

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.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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.

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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).

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    Can you suggest something?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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.

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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).

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • amritleenamritleen Posts: 14Questions: 2Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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 BowersScott Bowers Posts: 13Questions: 2Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • acroposeacropose Posts: 11Questions: 3Answers: 0
    edited 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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited 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

  • acroposeacropose Posts: 11Questions: 3Answers: 0

    Oh ok, and yes it works !
    Thanks ^^

  • j15orge_mtj15orge_mt Posts: 2Questions: 0Answers: 0

    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_mtj15orge_mt Posts: 2Questions: 0Answers: 0
    edited 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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    @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

Sign In or Register to comment.