Free Text Search on Column in JQuery Datatable

In my previous article I showed you how to retrieve the data from the SharePoint list using REST api and bind it to the JQuery Datatable. And In another article I showed how you can perform a column filter using the dropdown. Jquery DataTable provides a free text search but it is for the entire table this article will help you implement the free text search on the particular column.

Articles on the Jquery DataTable and SharePoint REST API

• Load the Data in JQuery DataTable from SharePoint List using REST API
• Custom DropDown Column Filter in JQuery Datatable
• Free Text Search on Column in JQuery Datatable
• Get Data in JQuery DataTable from SharePoint List using $skip, $top, $inlinecount, $orderby parameters

In this article we will show how you can perform a free text search on the custom column particularly on the JQuery DataTable which retrieved the data from the SharePoint List using the REST Api.

We will use the same customers list we used in my previous article and perform a free text search on the Address column.

In CustomerJqueryDatatable.txt add a row in fitler panel with the textbox for filter on address where user will input the search keywords.

  <tr>    
     <td style="width:50%;">Address : <input type="text" id="txtAddress"></input></td>    
     <td style="width:50%;"></td>    
    </tr>   

Go to CustomerJqueryDatatable.js file and add the below code to add a filter search on the Address column.

        /*    
        Free Text Search on the Address column(index is 2)    
        */    
        var AddressColumn = this.api().columns(2);    
        $("#txtAddress").on('keyup change', function() {    
         if (AddressColumn.search() !== this.value) {    
          AddressColumn.search(this.value).draw();    
         }    
        });    

This will perform a free text search on the address column as shown below




Happy SharePointing!