{"id":4407,"date":"2020-05-27T05:42:58","date_gmt":"2020-05-27T05:42:58","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4407"},"modified":"2022-08-29T12:40:00","modified_gmt":"2022-08-29T12:40:00","slug":"datatables-server-side-processing-custom-search-filter-with-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/","title":{"rendered":"Add Custom Search and Filter to DataTables Server-side Processing with PHP"},"content":{"rendered":"<p><b>DataTables jQuery plugin<\/b> provides a quick and easy way to display data list in tabular format on the web page. The search, filter, and pagination functionality can be easily added to the HTML table with DataTables. Using the <a href=\"https:\/\/www.codexworld.com\/datatables-server-side-processing-with-php-mysql\/\">DataTables server-side processing<\/a>, you can fetch the data dynamically from the database and list them in an HTML table with search, sorting, and pagination functionality.<\/p>\n<p>Generally, the default search and filter options are used that come with DataTables. But, you can use custom search and filter input with the DataTables API. In this tutorial, we will show you how to add a <b>custom search and filter with DataTables<\/b> Server-side Processing using PHP and MySQL.<\/p>\n<p>In the example code, we will fetch the member&#8217;s data from the database and list them with custom search and filter inputs in DataTables. <\/p>\n<ul class=\"bullet_disk_list\">\n<li>Fetch and list data from the MySQL database using Datatables Server-side Processing.<\/li>\n<li>Add sorting and pagination features to the HTML table with Datatables.<\/li>\n<li>Add custom search and filter inputs to Datatables.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>To store the member\u2019s information a table is required in the database. The following SQL creates a <code>members<\/code> table with some basic fields in the MySQL database.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`members`<\/span> (\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`first_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`last_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`email`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`gender`<\/span> enum(<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'Male'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'Female'<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`country`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">20<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`created`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`status`<\/span> tinyint(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">1<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">1<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COMMENT<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'1=Active | 0=Inactive'<\/span>,\r\n PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<h2>Attach DataTables to HTML Table with Custom Search and Filter (index.html)<\/h2>\n<p>In this web page, the dynamic data will be listed in an HTML table with custom search and filter options using the DataTables jQuery plugin.<\/p>\n<p><b>DataTables JS and CSS Library:<\/b><br \/>\nInclude the jQuery and DataTables library files.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- jQuery library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"js\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- DataTables CSS and JS library --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\/css\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"DataTables\/datatables.min.css\"<\/span>\/&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\/javascript\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"DataTables\/datatables.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>HTML Table with Search and Filter Input:<\/b><br \/>\nCreate an HTML table and add a selector (<code>#memListTable<\/code>) to attach DataTables to this element.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Add search input field and filter dropdown to sort records by gender.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"post-search-panel\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"searchInput\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Type keywords...\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">select<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"sortBy\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"\"<\/span>&gt;<\/span>Sort by<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">option<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Male\"<\/span>&gt;<\/span>Male<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">option<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Female\"<\/span>&gt;<\/span>Female<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">option<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">select<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">table<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"memListTable\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"display\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"width:100%\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">thead<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>First name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Last name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Email<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Gender<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Country<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Created<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Status<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">thead<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tfoot<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>First name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Last name<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Email<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Gender<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Country<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Created<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>Status<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">th<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tr<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">tfoot<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">table<\/span>&gt;<\/span><\/pre>\n<p><b>Attach DataTables to HTML Table:<\/b><br \/>\nInitialize DataTables API class using <code>DataTable()<\/code> method and configure the table object.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>To disable the default search, set the <code>searching<\/code> option to <code>false<\/code>.<\/li>\n<li>To enable server-side processing,\n<ul>\n<li>Set the <code>processing<\/code> option to <code>true<\/code>.<\/li>\n<li>Set the <code>serverSide<\/code> option to <code>true<\/code>.<\/li>\n<li>Specify the server-side script (<code>fetchData.php<\/code>) URL in <code>url<\/code> option of the <code>ajax<\/code> object.<\/li>\n<\/ul>\n<\/li>\n<li>To enable custom search and filter use <code>extend()<\/code> method.\n<ul>\n<li>Specify the custom field name and select the input value.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Initialize DataTables API object and configure table<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> table = $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#memListTable'<\/span>).DataTable({\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"searching\"<\/span>: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"processing\"<\/span>: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"serverSide\"<\/span>: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"ajax\"<\/span>: {\r\n       <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"url\"<\/span>: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fetchData.php\"<\/span>,\r\n       <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"data\"<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"> d <\/span>) <\/span>{\r\n         <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> $.extend( {}, d, {\r\n           <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"search_keywords\"<\/span>: $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#searchInput\"<\/span>).val().toLowerCase(),\r\n           <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"filter_option\"<\/span>: $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#sortBy\"<\/span>).val().toLowerCase()\r\n         } );\r\n       }\r\n     }\r\n});\r\n\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Redraw the table<\/span>\r\n    table.draw();\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Redraw the table based on the custom input<\/span>\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#searchInput,#sortBy'<\/span>).bind(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"keyup change\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n        table.draw();\r\n    });\r\n});<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Server-side Script (fetchData.php)<\/h2>\n<p>The <code>fetchData.php<\/code> file is used to perform the server-side processing with search and filter. To make the SQL query building process easier, we will use the SSP class (<code>ssp.class.php<\/code>).<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The <b>simple()<\/b> function of the SSP class helps to fetch the members data from the database based on the search and filter query using PHP and MySQL.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;connection&nbsp;info <br \/><\/span><span style=\"color: #0000BB\">$dbDetails&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'host'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'localhost'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'user'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'root'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'pass'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'root'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'codexworld' <br \/><\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;DB&nbsp;table&nbsp;to&nbsp;use <br \/><\/span><span style=\"color: #0000BB\">$table&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'members'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Table's&nbsp;primary&nbsp;key <br \/><\/span><span style=\"color: #0000BB\">$primaryKey&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'id'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Array&nbsp;of&nbsp;database&nbsp;columns&nbsp;which&nbsp;should&nbsp;be&nbsp;read&nbsp;and&nbsp;sent&nbsp;back&nbsp;to&nbsp;DataTables. <br \/>\/\/&nbsp;The&nbsp;`db`&nbsp;parameter&nbsp;represents&nbsp;the&nbsp;column&nbsp;name&nbsp;in&nbsp;the&nbsp;database.&nbsp; <br \/>\/\/&nbsp;The&nbsp;`dt`&nbsp;parameter&nbsp;represents&nbsp;the&nbsp;DataTables&nbsp;column&nbsp;identifier. <br \/><\/span><span style=\"color: #0000BB\">$columns&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'first_name'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'last_name'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">2&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'gender'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">3&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array(&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'country'<\/span><span style=\"color: #007700\">,&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">4&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'created'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">5<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'formatter'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;function(&nbsp;<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<\/span><span style=\"color: #0000BB\">date<\/span><span style=\"color: #007700\">(&nbsp;<\/span><span style=\"color: #DD0000\">'jS&nbsp;M&nbsp;Y'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">strtotime<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">)); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'db'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'dt'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">6<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'formatter'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;function(&nbsp;<\/span><span style=\"color: #0000BB\">$d<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<\/span><span style=\"color: #0000BB\">$d&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #DD0000\">'Active'<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">'Inactive'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;) <br \/>); <br \/> <br \/><\/span><span style=\"color: #0000BB\">$searchFilter&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(); <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search_keywords'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$searchFilter<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'first_name'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search_keywords'<\/span><span style=\"color: #007700\">], <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'last_name'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search_keywords'<\/span><span style=\"color: #007700\">], <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'email'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search_keywords'<\/span><span style=\"color: #007700\">], <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'country'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search_keywords'<\/span><span style=\"color: #007700\">] <br \/>&nbsp;&nbsp;&nbsp;&nbsp;); <br \/>} <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'filter_option'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$searchFilter<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'filter'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'gender'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'filter_option'<\/span><span style=\"color: #007700\">] <br \/>&nbsp;&nbsp;&nbsp;&nbsp;); <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;SQL&nbsp;query&nbsp;processing&nbsp;class <br \/><\/span><span style=\"color: #007700\">require&nbsp;<\/span><span style=\"color: #DD0000\">'ssp.class.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Output&nbsp;data&nbsp;as&nbsp;json&nbsp;format <br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">SSP<\/span><span style=\"color: #007700\">::<\/span><span style=\"color: #0000BB\">simple<\/span><span style=\"color: #007700\">(&nbsp;<\/span><span style=\"color: #0000BB\">$_GET<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbDetails<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$table<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$primaryKey<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$columns<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$searchFilter&nbsp;<\/span><span style=\"color: #007700\">) <br \/>);<\/span><\/pre>\n<h2>SSP Library<\/h2>\n<p>The SSP class handles the database related operations. It contains some helper functions to build SQL queries for DataTables server-side processing with search and filter. You can see the code of the SSP library from <a href=\"https:\/\/github.com\/codexworld\/Datatables-Server-side-Processing-Custom-Search-Filter\/blob\/master\/ssp.class.php\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<p><span class=\"note\">Note that:<\/span> This library and all the required files are included in the source code, you don&#8217;t need to download it separately.<\/p>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/\">Server Side Filtering using jQuery Ajax PHP and MySQL<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>This example script helps you to add the custom search and filter options to the DataTables plugin easily. You can enable the Server-side processing DataTables and add custom input to the search, filter, sort records. Also, the HTML table and data list can be customized easily as per your needs. DataTables API provides various configuration options to enhance the table with server-side data from the database.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>DataTables jQuery plugin provides a quick and easy way to display data list in tabular format on the web page. The search, filter, and pagination functionality can be easily added to the HTML table with <\/p>\n","protected":false},"author":1,"featured_media":5044,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[320,16,166,14,299],"class_list":["post-4407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-datatables","tag-jquery","tag-library","tag-php","tag-plugin","cat-4-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Add Custom Search and Filter to DataTables Server-side Processing with PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Datatables server-side processing with custom search and filter - Add custom search and filter option to DataTables jQuery plugin. The example code to fetch data from the server using PHP and MySQL, and list with DataTables library.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Custom Search and Filter to DataTables Server-side Processing with PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Datatables server-side processing with custom search and filter - Add custom search and filter option to DataTables jQuery plugin. The example code to fetch data from the server using PHP and MySQL, and list with DataTables library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-27T05:42:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-29T12:40:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/05\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Add Custom Search and Filter to DataTables Server-side Processing with PHP\",\"datePublished\":\"2020-05-27T05:42:58+00:00\",\"dateModified\":\"2022-08-29T12:40:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/\"},\"wordCount\":551,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png\",\"keywords\":[\"DataTables\",\"jQuery\",\"Library\",\"PHP\",\"Plugin\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/\",\"name\":\"Add Custom Search and Filter to DataTables Server-side Processing with PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png\",\"datePublished\":\"2020-05-27T05:42:58+00:00\",\"dateModified\":\"2022-08-29T12:40:00+00:00\",\"description\":\"Datatables server-side processing with custom search and filter - Add custom search and filter option to DataTables jQuery plugin. The example code to fetch data from the server using PHP and MySQL, and list with DataTables library.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/datatables-server-side-processing-custom-search-filter-with-php-mysql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Custom Search and Filter to DataTables Server-side Processing with PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Custom Search and Filter to DataTables Server-side Processing with PHP - CodexWorld","description":"Datatables server-side processing with custom search and filter - Add custom search and filter option to DataTables jQuery plugin. The example code to fetch data from the server using PHP and MySQL, and list with DataTables library.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Add Custom Search and Filter to DataTables Server-side Processing with PHP - CodexWorld","og_description":"Datatables server-side processing with custom search and filter - Add custom search and filter option to DataTables jQuery plugin. The example code to fetch data from the server using PHP and MySQL, and list with DataTables library.","og_url":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2020-05-27T05:42:58+00:00","article_modified_time":"2022-08-29T12:40:00+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/05\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Add Custom Search and Filter to DataTables Server-side Processing with PHP","datePublished":"2020-05-27T05:42:58+00:00","dateModified":"2022-08-29T12:40:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/"},"wordCount":551,"commentCount":2,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/05\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png","keywords":["DataTables","jQuery","Library","PHP","Plugin"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/","url":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/","name":"Add Custom Search and Filter to DataTables Server-side Processing with PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/05\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png","datePublished":"2020-05-27T05:42:58+00:00","dateModified":"2022-08-29T12:40:00+00:00","description":"Datatables server-side processing with custom search and filter - Add custom search and filter option to DataTables jQuery plugin. The example code to fetch data from the server using PHP and MySQL, and list with DataTables library.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/05\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/05\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png","width":1366,"height":768,"caption":"datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/datatables-server-side-processing-custom-search-filter-with-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Add Custom Search and Filter to DataTables Server-side Processing with PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/05\/datatables-server-side-processing-with-custom-search-filter-using-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-195","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=4407"}],"version-history":[{"count":4,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4407\/revisions"}],"predecessor-version":[{"id":5043,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4407\/revisions\/5043"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5044"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}