jQuery datatables individual column search

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss how to implement search functionality on every jQuery datatable column. This is continuation to Part 106. Please watch Part 106 from jQuery tutorial before proceeding.

The following are the changes required for the example we discussed in Part 106.

1. Store the reference of the jQuery datatable in a variable for later use.
var datatableInstance = $('#datatable').DataTable()

var datatableInstance = $('#datatable').DataTable()

What is the difference between dataTable() and DataTable()
dataTable() is the old dataTables constructur where as DataTable() is the newer version. If you use the old dataTable() constructor, please use api() function to access the new API.

var datatableInstance = $('#datatable').dataTable();

3. To include the Web Site column in search, set searchable option of this column to true
'searchable': true,

4. Please remove scrollY option from the dataTable, so we can see the search textboxes without having to scroll down.

5. Increase the width of the div element to 1700px so the border surrounds the datatable correctly

6. Include the following 2 blocks of code in the success callback function

$('#datatable tfoot th').each(function () {
var title = $('#datatable thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

var dataTableColumn = this;

});
});

7. To include the search textboxes in the header instead, instead of footer

$('#datatable thead th').each(function () {
var title = $('#datatable tfoot th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

var dataTableColumn = this;

});

});
});