Individual column filters not working using Bootstrap 4

Individual column filters not working using Bootstrap 4

bbrindzabbrindza Posts: 299Questions: 68Answers: 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,342Questions: 35Answers: 394

    Did you check for console errors?

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    Yes , No errors

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

    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.