Data Table Filtering Code using Bootstrap in view Layer only.

In this code we assume that  you have one data table and  many filter options are there . Many of time when we are new in programming we are not aware of the power of Bootstrap Api  and we start applying coding using java script or jquery. But bootstrap provides in built support for filtering . In this post I  just wanted to share same so that who does not use it can use in future.

Using below push function we can do filtering in any data table with ease.

How it works?

Explanation: Whenever data table properties are applied to normal table that time only this  $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ){  });   this function is called internally and each row of the data table is created by satisfying the condition mentioned inside this function.

Steps to implement search functionality using this plugin or API.

1) var table=$('#example').DataTable({

    "filter" : true,

"info" : false,

"bLengthChange" : false,

"scrollX": true,

});

Make sure that  in your  data table attributes "filter": true   should be true .Than only filtering will work.

2) Let say example is the id of our data table and we have apply filters on this table data. The below table is filled with some dummy data.

<table id="example" class="display table-striped table-bordered " cellspacing="0" width="100%">

<thead>

<tr style="background-color: gray; color: white; ">

<th>Roll No.</th>

<th>Student Name</th>

<th>Class</th>

<th>School Name</th>

                                  </tr>

                      </thead>

                 

                        <tbody>

 <tr> 

                                 <td> 2</td>

                                <td>Arun</td>

                                 <td>VI</td>

                                 <td>St. Theresa's Convent School </td>

                                </tr>

                                <tr> 

                                 <td> 3</td>

                                <td>Ram</td>

                                 <td>VI</td>

                                 <td>St. Xaviers School </td>

                                </tr>

                                <tr> 

                                 <td> 4</td>

                                <td>Jaspreet</td>

                                 <td>VII </td>

                                 <td>St. Theresa's Convent School </td>

                                </tr>

             </tbody>

 </table>

3)At the top of this data table view we have filters say

RollNo:________                        Name:________       class:_________    school:___________


Let say all above mentioned  are text boxes and  have ids as  id="rollNofield"     ,id="nameField" , id="classNameField"    school="schoolFiled" .           

4)Now we can put search code inside document  ready block so that whenever data table with id example is drawn this search API will be called internally and data table is drawn by  passing all conditions  mentioned inside it . 

Filter Code is given below::  This code need to be inserted inside document ready so that first time also data table displays data  according to filters default value.

$.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var rollNoFlag="false"; if($("#rollNoField").val()=="" || $("#rollNofield").val()==data[0]){ receipNoFlag="true"; } var nameFlag="false"; if($("#nameField").val()=="" || nameField").val()==data[1]){
nameFlag="true"; } var classFlag="false"; if($("#classField").val()=="" || $("#classField").val()==data[2]){ classFlag="true"; }
var schoolFlag="false"; if($("#schoolField").val()=="" || $("#schoolField").val()==data[3]){ schoolFlag="true"; }

if(rollNoFlag=="true" && nameFlag=="true" && classFlag=="true" && schoolFlag=="true"){
return true; //row will be drawn in this case
}else {
return false;// row will be skipped
} 
}


Logic: In this data is a single dimensional array which refers to the content of each row. All the indexes of data array are checked one by one for each  row . Than for each row, flags are set if values matches according to filter field's  values (above text boxes in this case) .At last if all flags are true than only row will be drawn else it wont draw.



Thanks everyone for reading.
Regards
Anoop Butola