CODEWITHSUNDEEP
jquerydatatableshtml-tablefiltering
leora
leora

Reputation: 196751

How can I integrate my custom jquery table row filtering with datatables.net?

I have a html table and I have a checkbox that says "Show Completed Orders", when I uncheck this box, I go and loop through the table rows using jquery and hide the rows that are in COMPLETED state. (Based on string in cell = "COMPLETE")

I now am starting to use datatables.net which is very useful for sorting and generic user search but I am strugling to figure out how I can get my existing code that hides and shows rows to work nicely alongside the datatables.net default capability.

Is this possible to have external custom logic to hide and show rows and still have datatables working successful (striping, filtering, sorting, etc).

Upvotes: 1

Views: 419

Answers (1)

CMedina
CMedina

Reputation: 4232

If you want, search by column in your DataTable, you should an structure with the column "state" for example:

<table id="example" class="display DataTable" cellspacing="0" width="100%">
    <thead>
        <tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>State</th></tr>
    </thead>

    <tbody>
        <tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>2009/02/27</td><td>COMPLETE</td></tr>
        <tr><td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>INCOMPLETE</td></tr>
        <tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>2008/11/13</td><td>INCOMPLETE</td></tr>
        <tr><td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>29</td><td>2011/06/27</td><td>COMPLETE</td></tr>

    </tbody>
</table>

and one CheckBox for populate the table for state:

<input type="checkbox" id="myCheckbox" /> Show Complete Orders

DataTables have a columns().search() function to search value for columns (search( input , regex, smart , caseInsen )):

$(document).ready(function() {
var oTable = $('#example').DataTable();

$("#myCheckbox").on("change",function(){

    if($(this).is(":checked")){
       oTable
         .columns(5)
         .search("^" + "COMPLETE" + "$", true, false, true)
         .draw();        
    }else{
       oTable
         .columns(5)
         .search("")
         .draw();
    }

});

});

Result: https://jsfiddle.net/cmedina/7kfmyw6x/67/

Upvotes: 1

Related Questions