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

Question

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).

CMedina · Accepted Answer · 2016-06-22 16:03:34Z

1

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/

edited Jun 22, 2016 at 16:03

answered Jun 22, 2016 at 14:48

CMedina

4,2824 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

leora Over a year ago

to clarify i don't want to hide the INCOMPLETE orders. so the 2 modes i want are: 1. Show All (including Completed), 2. just show Open Orders

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related