Individual column filters not working using Bootstrap 4

Individual column filters not working using Bootstrap 4

bbrindzabbrindza Posts: 192Questions: 42Answers: 1

Hello Gurus,
I can not get the individual column filters to show in my DataTable Editor script. I have done this many times in other DataTables scripts , however the only difference is this one is using Bootstrap 4 integration .

Here is the test case http://live.datatables.net/tunocuzu/4/edit

Answers

  • tangerinetangerine Posts: 3,092Questions: 24Answers: 363

    Did you check for console errors?

  • bbrindzabbrindza Posts: 192Questions: 42Answers: 1

    Yes , No errors

  • kthorngrenkthorngren Posts: 13,577Questions: 25Answers: 3,193
    edited July 26

    Actually your test case does have an error:

    jquery-3.5.1.js:4055 Uncaught ReferenceError: tableID is not defined

    Adding var tableID = 'WorkOrderTable'; fixes the error:
    http://live.datatables.net/tunocuzu/5/edit

    But the filters are still not applied. You have this code to build the filters:

        // Setup - add a text input to each header cell
        $('#' + tableID + ' thead tr#filterrow th:gt(0)').each( function () {
          $(this).html( '<input type="text" size="1" onclick="stopPropagation(event);" placeholder="Search" />' );
        });
    

    Your selector thead tr#filterrow th:gt(0) isn't finding anything so the loop is not executed. I suspect in the working version has two headers defined in the HTML and the second tr has the id of filterrow.

    Kevin

Sign In or Register to comment.