bootstrap 4 and fn.dataTable.isDataTable

bootstrap 4 and fn.dataTable.isDataTable

davedarndavedarn Posts: 10Questions: 5Answers: 1

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Answers

  • davedarndavedarn Posts: 10Questions: 5Answers: 1

    I have been using dataTables for many years but have now decided to start using bootstrap 4 to handle a wider range of devices.
    While testing I have found that fn.dataTable.isDataTable now comes up with an error
    jQuery.Deferred exception: Cannot read properties of undefined (reading 'isDataTable') TypeError: Cannot read properties of undefined (reading 'isDataTable')
    at HTMLDocument.<anonymous>
    So I cannot convert an HTML table to a dataTable.
    The includes are as follows:
    <link href="https://cdn.datatables.net/v/bs4/jq-3.7.0/dt-2.3.5/datatables.min.css" rel="stylesheet" integrity="sha384-ffc1jzu/JhE8zGsow4uufjL4N97kZUVGMTWDDve7kiwCWcxKNLs1VOQtqdBFKpjX" crossorigin="anonymous">

    and the code snippet is:
    if ($("#member_list").is(":visible")){
    member_list_cols=$("#member_list > thead > tr:first > th").length;
    if (member_list_cols>0 && ! $.fn.dataTable.isDataTable( '#member_list' ) ) {
    setupgrid("member_list",'',690);
    }
    }

  • davedarndavedarn Posts: 10Questions: 5Answers: 1

    I have now found that this was caused by including Jquery and Datatables BEFORE the BOOTSTRAP .
    Moving Jquery and Datatables to AFTER BOOTSRAP solved the problem.

  • kthorngrenkthorngren Posts: 22,371Questions: 26Answers: 5,138
    edited December 23

    Using $.fn.dataTable.isDataTable in this test case with BS 4 seems to work:
    https://live.datatables.net/melaqapa/1/edit

    I would make sure that the page is not loading jquery.js or datatables.js more than once. Looks like you used the download builder to include jquery.js. Possibly you previously loaded it separately. Also make sure that datatables.js is loaded before executing $.fn.dataTable.isDataTable. If you will need help then please provide a link to a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Not that this wil fix the issue but the current way to use this API is DataTable.isDataTable(). What you have will still work as shown in my test case.

    Kevin

Sign In or Register to comment.