Free Text Search on Column in JQuery Datatable

Sep 15, 2015 at 12:47 AM

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

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.
 <td style="width:50%;">Address : <input type="text" id="txtAddress"></input></td>
 <td style="width:50%;"></td>
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 ( !== this.value) {;
This will perform a free text search on the address column as shown below 

Happy SharePointing!

Found this article by Dhaval Shah valuable? Help by Sharing ...

  • Click on the banners at the top of article or in the right panel to visit my blog's sponsors. They are all hand-picked and are selected based on providing great products and services to the SharePoint community.
  • I’d be very grateful if you’d help it spread by Sharing. Below, you should find links to sharing this article on your favorite social media sites.
Related Posts by Dhaval Shah blog comments powered by Disqus