Client-side Search with several HTML Textboxes

Grande

Hello,

I am trying to get Textbox index and applying it to the search but only 1 text box works and it searches for column 0. other textboxes cant do column search with different index.

Here is search :

        function addSearchControl(json) {

            $("#searchTable thead");
            $("#searchTable").each(function (index) {

                    var searchControl = $('input[name="textbox[]"]');
                    searchControl.on('keyup', function () {
                        var indexDataTable = searchControl.index( this );

                        empTable.column(indexDataTable).search(searchControl.val()).draw();

                    });

            });
        }

Here is text box :

        <div class="col-lg-3 mb-lg-0 mb-6">
        <label>Id:</label>
        <input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 1"  data-col-index="0" />
       </div>

Second Text box :

        <div class="col-lg-3 mb-lg-0 mb-6">
        <label>Amount:</label>
        <input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 1"  data-col-index="1" />
       </div>

I can get the index in ajax but only 1 column is becoming searchable

colin

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