Individual column filters not working using Bootstrap 4

bbrindza

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

tangerine

Did you check for console errors?

bbrindza

Yes , No errors

kthorngren

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