I have inherited some php code that was making limited use of DataTables. The table has 9 columns in it. Currently, the app has select fields at the top of the page. The first select chooses the column name, the second select chooses (like, not like, contains), the 3rd is a text value.

The current code does a form submit and reloads the page with the new data and reloads the DataTable fine. I have been asked to dynamically allow for multiple entries of these filters:

column1 like cat
column2 not like Finland
column3 contains grey

The old design did not work, so I rewrote the page to use ajax to rebuild the where clause to rebuild the table. The issue, since switching to ajax to populate the table, DataTables always shows 0 rows in the table.

Here is my DataTable definition

        table = $("#home").DataTable({
            dom: 'B<"top"lfrt>lip',
            fixedHeader: true,
            colReorder: {
                fixedColumnsLeft: 1
            },
            columnDefs: [ {
            type: "html-input", "targets": [0,8],
                    type: "date", "targets": [7],
                    type: "num", "targets": [4],
                    className: "noVis", "targets": [0,9]
            } ],
            buttons: [
            { extend: 'colvis', columns: ':not(.noVis)' }
            ],
            "lengthMenu": [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
        });

My HTML table looks like:

<form id="scanform" method="POST" action="launchscan.php" target="scan_window">
        <span style="float:right;">
                Select Scan on Selected Hosts:
                <select name="scan_type">
                        <option value="recon">Recon(Code/Title/Spider/Screenshot)</option>
                        <option value="console">Console Scan</option>
                        <option value="auth">HTTP Authentication</option>
                </select>
                <input type="button" onclick="launchscan()" value="Scan">
        </span>
        <br>
        <br>
        <div class="download"> <a href="#" onclick="download_table_as_csv('home', ',', [0]);">Download as CSV</a></div><br />
        <table id="home" class="display">
                <thead>
                <tr>
                        <th><input type="checkbox" onClick="toggle(this)"/></th>
                        <th>Owner</th>
                        <th>IP</th>
                        <th>DNS</th>
                        <th>Port</th>
                        <th>Service</th>
                        <th>Banner</th>
                        <th>First Seen</th>
                        <th>Notes</th>
                        <th style="display:none;">SSL</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
        </table>
</form>

My onload function is as follows:

$(document).ready(function() {

        load_data();
        createDataTable();

} );

The load_data() makes the javascript call to load the HTML table data. Then createDataTable() is called to create the table. The wors always show as 0. I had even tried calling destroy and recreating the DataTable when the ajax call completes, but the rows still show up as 0. Prior to switching to ajax, this was working. So, I am guessing I need to tie something in. I just have not been able to fins what I am looking for. Anything I see loads the table from the database directly using ajax, but I need to add the multiple column filters to this.

Any direction would be helpful. Does DataTables support this?