Is there a way to perform multiple filter types on multiple columns

Is there a way to perform multiple filter types on multiple columns

mcodermcoder Posts: 17Questions: 8Answers: 0

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>
                <input type="button" onclick="launchscan()" value="Scan">
        <div class="download"> <a href="#" onclick="download_table_as_csv('home', ',', [0]);">Download as CSV</a></div><br />
        <table id="home" class="display">
                        <th><input type="checkbox" onClick="toggle(this)"/></th>
                        <th>First Seen</th>
                        <th style="display:none;">SSL</th>


My onload function is as follows:

$(document).ready(function() {


} );

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?

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 14,086Questions: 25Answers: 3,322
    Answer ✓

    Maybe the SearchBuilder extension will do what you want.

    It sounds like you are creating an empty table and initializing Datatables with the empty table. Then you are populating the HTML table with the rows. If this is the case then Datatables doesn't know about the updated data since you haven't used any Datatables API's. See this FAQ for more details.

    Maybe in your ajax success function you can use clear() followed by -pi rows.add() to populate the Datatable instead of the DOM.


  • mcodermcoder Posts: 17Questions: 8Answers: 0

    OMG! I wrote a huge response when I saw the SearchBuilder Extension (Q)! I think this may solve some of the issues I had on many of my pages. I will look into this.

    Thank you!

Sign In or Register to comment.