{"id":1694,"date":"2016-07-13T19:33:53","date_gmt":"2016-07-13T19:33:53","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1694"},"modified":"2021-02-25T07:30:50","modified_gmt":"2021-02-25T07:30:50","slug":"server-side-filtering-jquery-ajax-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/","title":{"rendered":"Server Side Filtering using jQuery Ajax PHP and MySQL"},"content":{"rendered":"<p><b>Filtering<\/b> feature helps to sort the recordset in the data list. Using the search and filter feature, the user can easily find the relevant data from the huge number of records. The sorting or filtering functionality is very useful in the data management section of the web application. The server-side search and filter functionality can be integrated easily with PHP and MySQL.<\/p>\n<p>The jQuery and Ajax can be used to implement the search functionality without page refresh. It helps to make the search and filter feature user-friendly. In this tutorial, we&#8217;ll show you how to implement the search and filter feature with the server-side data using jQuery, Ajax, PHP, and MySQL.<\/p>\n<p>This example script provides a search and filter option on the record list. A user can be able to search some particular records in the data list from the MySQL database or filter records by the specific type (like newest records, records by ascending and descending order, records by status). This server-side search and filter in PHP are used jQuery and Ajax to do this filtering functionality without page refresh.<\/p>\n<p>The following functionality will be implemented to build <\/b>server-side filtering<\/b> script with PHP and MySQL.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Fetch all the records from the MySQL database and list with the search and sort option.<\/li>\n<li>When the user searches by keywords, filter and fetch the matched records.<\/li>\n<li>When the user sort records, filter the records by the selected option.<\/li>\n<\/ul>\n<p>Before getting started to <b>integrate server-side filter using PHP<\/b>, take a look at the file structure.<\/p>\n<pre class=\"file-struc\">server_side_filter_jquery_ajax_php_mysql<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 config.php\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 getData.php\r\n\u251c\u2500\u2500 User.class.php\r\n\u251c\u2500\u2500 js<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u2514\u2500\u2500 jquery.min.js\r\n\u2514\u2500\u2500 css<span style=\"color:#794938\">\/<\/span>\r\n    \u2514\u2500\u2500 style.css\r\n<\/pre>\n<h2>Create Database Table<\/h2>\n<p>To store the data, 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);\">`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);\">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);\">`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>Database Configuration (config.php)<\/h2>\n<p>The database configuration variables are defined in this file.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>DB_HOST<\/b> \u2013 Database host<\/li>\n<li><b>DB_USERNAME<\/b> \u2013 Database username<\/li>\n<li><b>DB_PASSWORD<\/b> \u2013 Database password<\/li>\n<li><b>DB_NAME<\/b> \u2013 Database name<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_HOST'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Host'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_USERNAME'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Username'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_PASSWORD'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Password'<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'DB_NAME'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'MySQL_Database_Name'<\/span><span style=\"color: #007700\">);<\/span><\/pre>\n<h2>User Class (User.class.php)<\/h2>\n<p>The User class help to connect with the database and handles the database related operations using PHP and MySQL.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>__construct()<\/b> &#8211; Connect with the MySQL database.<\/li>\n<li><b>getRows()<\/b> &#8211; Fetch the records from the database.\n<ul>\n<li><code>$conditions<\/code> &#8211; If specified, it filters records based on the mentioned conditions.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/* <br \/>&nbsp;*&nbsp;User&nbsp;Class <br \/>&nbsp;*&nbsp;This&nbsp;class&nbsp;is&nbsp;used&nbsp;for&nbsp;database&nbsp;related&nbsp;operations&nbsp;(connect&nbsp;and&nbsp;fetch) <br \/>&nbsp;*&nbsp;@author&nbsp;&nbsp;&nbsp;&nbsp;CodexWorld.com <br \/>&nbsp;*&nbsp;@url&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;http:\/\/www.codexworld.com <br \/>&nbsp;*&nbsp;@license&nbsp;&nbsp;&nbsp;http:\/\/www.codexworld.com\/license <br \/>&nbsp;*\/ <br \/> <br \/><\/span><span style=\"color: #007700\">class&nbsp;<\/span><span style=\"color: #0000BB\">User<\/span><span style=\"color: #007700\">{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;private&nbsp;<\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">DB_HOST<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;private&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">DB_USERNAME<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;private&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">DB_PASSWORD<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;private&nbsp;<\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">DB_NAME<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;private&nbsp;<\/span><span style=\"color: #0000BB\">$tblName&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'members'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;<\/span><span style=\"color: #0000BB\">__construct<\/span><span style=\"color: #007700\">(){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!isset(<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Connect&nbsp;to&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conn&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">dbName<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Failed&nbsp;to&nbsp;connect&nbsp;with&nbsp;MySQL:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$conn<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/* <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Returns&nbsp;rows&nbsp;from&nbsp;the&nbsp;database&nbsp;based&nbsp;on&nbsp;the&nbsp;conditions <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;@param&nbsp;array&nbsp;select,&nbsp;where,&nbsp;search,&nbsp;order_by,&nbsp;limit&nbsp;and&nbsp;return_type&nbsp;conditions <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*\/ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">public&nbsp;function&nbsp;<\/span><span style=\"color: #0000BB\">getRows<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$conditions&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array()){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'SELECT&nbsp;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"select\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'select'<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">'*'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;FROM&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">tblName<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"where\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;WHERE&nbsp;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'where'<\/span><span style=\"color: #007700\">]&nbsp;as&nbsp;<\/span><span style=\"color: #0000BB\">$key&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$value<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$pre&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #DD0000\">'&nbsp;AND&nbsp;'<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #0000BB\">$pre<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$value<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$i<\/span><span style=\"color: #007700\">++; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"search\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;(<\/span><span style=\"color: #0000BB\">strpos<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sql<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'WHERE'<\/span><span style=\"color: #007700\">)&nbsp;!==&nbsp;<\/span><span style=\"color: #0000BB\">false<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #DD0000\">'&nbsp;AND&nbsp;'<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">'&nbsp;WHERE&nbsp;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql_src&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search'<\/span><span style=\"color: #007700\">]&nbsp;as&nbsp;<\/span><span style=\"color: #0000BB\">$key&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$value<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$pre&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #DD0000\">'&nbsp;OR&nbsp;'<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql_src&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #0000BB\">$pre<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"&nbsp;LIKE&nbsp;'%\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$value<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"%'\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$i<\/span><span style=\"color: #007700\">++; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$sql_src<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #DD0000\">'&nbsp;('<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$sql_src<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">')&nbsp;'<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"order_by\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;ORDER&nbsp;BY&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'order_by'<\/span><span style=\"color: #007700\">];&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;ORDER&nbsp;BY&nbsp;id&nbsp;DESC&nbsp;'<\/span><span style=\"color: #007700\">;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"start\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"limit\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;LIMIT&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'start'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">','<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'limit'<\/span><span style=\"color: #007700\">];&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}elseif(!<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"start\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"limit\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sql&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;LIMIT&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'limit'<\/span><span style=\"color: #007700\">];&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$result&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$this<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sql<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">array_key_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"return_type\"<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'return_type'<\/span><span style=\"color: #007700\">]&nbsp;!=&nbsp;<\/span><span style=\"color: #DD0000\">'all'<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'return_type'<\/span><span style=\"color: #007700\">]){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">'count'<\/span><span style=\"color: #007700\">: <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;<\/span><span style=\"color: #DD0000\">'single'<\/span><span style=\"color: #007700\">: <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">fetch_assoc<\/span><span style=\"color: #007700\">(); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(<\/span><span style=\"color: #0000BB\">$row&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$result<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">fetch_assoc<\/span><span style=\"color: #007700\">()){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">[]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$data<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #0000BB\">false<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}<\/span><\/pre>\n<h2>Data List with Search and Filter (index.php)<\/h2>\n<p>Initially, all the member&#8217;s data is fetched from the database and listing in a tabular format with search and filter option.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>Search Option:<\/b> When the user types the keywords and submit search request, an Ajax request is initiated to send input to the server-side script (<code>getData.php<\/code>) for further processing.<\/li>\n<li><b>Filter Option:<\/b> When the user selects an option from the dropdown, an Ajax request is sent to the server-side script (<code>getData.php<\/code>) to sort records by the following actions.\n<ul>\n<li>Newest &#8211; The records are fetched based on the created date of the member.<\/li>\n<li>Ascending &#8211; The records are fetched in ascending order of the member&#8217;s name.<\/li>\n<li>Descending &#8211; The records are fetched in descending order of the member&#8217;s name.<\/li>\n<li>Active &#8211; The records are fetched based on the status of the member.<\/li>\n<li>Inactive &#8211; The records are fetched based on the status of the member.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>Bootstrap Library:<\/b><br \/>\nThe bootstrap library is used to design the data list table structure. If you don\u2019t want to use Bootstrap, omit to include the Bootstrap CSS file.<\/p>\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);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>&gt;<\/span><\/pre>\n<p><b>jQuery Library:<\/b><br \/>\nInclude the jQuery library, it helps to use Ajax to implement the search and filter functionality without page refresh. <\/p>\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> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/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><\/pre>\n<p><b>JavaScript Code:<\/b><br \/>\nThe <code>searchFilter()<\/code> function is used to initiate the Ajax request.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Post the search input and option to the server-side script (getData.php) via jQuery Ajax.<\/li>\n<li>Render response HTML on the web page.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">searchFilter<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    $.ajax({\r\n        type: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'POST'<\/span>,\r\n        url: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'getData.php'<\/span>,\r\n        data: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'keywords='<\/span>+$(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#searchInput'<\/span>).val()+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&amp;filter='<\/span>+$(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#filterSelect'<\/span>).val(),\r\n        beforeSend: <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-string\" style=\"color: rgb(96, 172, 57);\">'.loading-overlay'<\/span>).show();\r\n        },\r\n        success:<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);\">html<\/span>)<\/span>{\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.loading-overlay'<\/span>).hide();\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#userData'<\/span>).html(html);\r\n        }\r\n    });\r\n}<\/pre>\n<p><b>PHP &#038; HTML Code:<\/b><br \/>\nList all the members data in an HTML table with search input and filter dropdown.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Fetch all the members data from the database using User class<\/li>\n<li>The JavaScript <code>searchFilter()<\/code> function is called by two events:\n<ul>\n<li>Search button click.<\/li>\n<li>Sort dropdown change.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\">\r\n<span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;configuration&nbsp;file <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'config.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;User&nbsp;class <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'User.class.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Initialize&nbsp;User&nbsp;class <br \/><\/span><span style=\"color: #0000BB\">$user&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">User<\/span><span style=\"color: #007700\">(); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;members&nbsp;data&nbsp;from&nbsp;database <br \/><\/span><span style=\"color: #0000BB\">$members&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$user<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">getRows<\/span><span style=\"color: #007700\">(); <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span>\r\n\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> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"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);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"input-group\"<\/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\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"search form-control\"<\/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);\">\"By Name or Email\"<\/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> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"input-group-append\"<\/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);\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-outline-secondary\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"button\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"searchFilter();\"<\/span>&gt;<\/span>Search<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/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);\">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);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/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\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"filterSelect\"<\/span> <span class=\"hljs-attr\">onchange<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"searchFilter();\"<\/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);\">\"new\"<\/span>&gt;<\/span>Newest<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);\">\"asc\"<\/span>&gt;<\/span>Ascending<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);\">\"desc\"<\/span>&gt;<\/span>Descending<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);\">\"active\"<\/span>&gt;<\/span>Active<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);\">\"inactive\"<\/span>&gt;<\/span>Inactive<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);\">div<\/span>&gt;<\/span>\r\n\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> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"main-content\"<\/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> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"loading-overlay\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"display: none;\"<\/span>&gt;<\/span><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);\">\"overlay-content\"<\/span>&gt;<\/span>Loading.....<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><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\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"table table-striped\"<\/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>#<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>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);\">tbody<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userData\"<\/span>&gt;<\/span>\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: #0000BB\">&lt;?php <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$members<\/span><span style=\"color: #007700\">)){&nbsp;<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$members&nbsp;<\/span><span style=\"color: #007700\">as&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">){&nbsp;<\/span><span style=\"color: #0000BB\">$i<\/span><span style=\"color: #007700\">++; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">?&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);\">td<\/span>&gt;<\/span><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$i<\/span><span style=\"color: #007700\">;&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/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);\">td<\/span>&gt;<\/span><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/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);\">td<\/span>&gt;<\/span><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/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);\">td<\/span>&gt;<\/span><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'gender'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/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);\">td<\/span>&gt;<\/span><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'country'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/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);\">td<\/span>&gt;<\/span><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'created'<\/span><span style=\"color: #007700\">];&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/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);\">td<\/span>&gt;<\/span><span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;(<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">]&nbsp;==&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\">;&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/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 style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;}else{&nbsp;<\/span><span style=\"color: #0000BB\">?&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><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/span> <span class=\"hljs-attr\">colspan<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"7\"<\/span>&gt;<\/span>No member(s) found...<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">td<\/span>&gt;<\/span><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 style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;<\/span><span style=\"color: #0000BB\">?&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);\">tbody<\/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>\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><\/pre>\n<h2>Search and Filter Data (getData.php)<\/h2>\n<p>The getData.php file is loaded by the Ajax request and used to handles the search and filter operations.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the keywords and sort option from the Ajax request using the <b>PHP $_POST<\/b> method.<\/li>\n<li>Get the filtered member data using the <b>getRows()<\/b> function of the User class.<\/li>\n<li>Generate HTML of the member&#8217;s data rows.<\/li>\n<li>Render table row HTML with filtered records.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;configuration&nbsp;file <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'config.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;User&nbsp;class <br \/><\/span><span style=\"color: #007700\">require_once&nbsp;<\/span><span style=\"color: #DD0000\">'User.class.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Initialize&nbsp;User&nbsp;class <br \/><\/span><span style=\"color: #0000BB\">$user&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">User<\/span><span style=\"color: #007700\">(); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Define&nbsp;filters <br \/><\/span><span style=\"color: #0000BB\">$conditions&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;search&nbsp;request&nbsp;is&nbsp;submitted <br \/><\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'keywords'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'search'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;array(<\/span><span style=\"color: #DD0000\">'name'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'keywords'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #DD0000\">'email'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'keywords'<\/span><span style=\"color: #007700\">]); <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;filter&nbsp;request&nbsp;is&nbsp;submitted <br \/><\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'filter'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sortVal&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'filter'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sortArr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'new'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'order_by'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'created&nbsp;DESC' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'asc'<\/span><span style=\"color: #007700\">=&gt;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'order_by'<\/span><span style=\"color: #007700\">=&gt;<\/span><span style=\"color: #DD0000\">'name&nbsp;ASC' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'desc'<\/span><span style=\"color: #007700\">=&gt;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'order_by'<\/span><span style=\"color: #007700\">=&gt;<\/span><span style=\"color: #DD0000\">'name&nbsp;DESC' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'active'<\/span><span style=\"color: #007700\">=&gt;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'where'<\/span><span style=\"color: #007700\">=&gt;array(<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">) <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;), <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'inactive'<\/span><span style=\"color: #007700\">=&gt;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'where'<\/span><span style=\"color: #007700\">=&gt;array(<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">) <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) <br \/>&nbsp;&nbsp;&nbsp;&nbsp;); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sortKey&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">key<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sortArr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">$sortVal<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">$sortKey<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$sortArr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">$sortVal<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$sortKey<\/span><span style=\"color: #007700\">]; <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;members&nbsp;data&nbsp;based&nbsp;on&nbsp;search&nbsp;and&nbsp;filter <br \/><\/span><span style=\"color: #0000BB\">$members&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$user<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">getRows<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$conditions<\/span><span style=\"color: #007700\">); <br \/> <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$members<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$members&nbsp;<\/span><span style=\"color: #007700\">as&nbsp;<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">){&nbsp;<\/span><span style=\"color: #0000BB\">$i<\/span><span style=\"color: #007700\">++; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;tr&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$i<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'gender'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'country'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'created'<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$status&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;(<\/span><span style=\"color: #0000BB\">$row<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">]&nbsp;==&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;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;td&gt;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$status<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&lt;\/td&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;\/tr&gt;'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;tr&gt;&lt;td&nbsp;colspan=\"7\"&gt;No&nbsp;members(s)&nbsp;found...&lt;\/td&gt;&lt;\/tr&gt;'<\/span><span style=\"color: #007700\">; <br \/>} <br \/>exit;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/ajax-pagination-with-search-filter-php\/\">Ajax Pagination with Search and Filter in PHP<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>This example code snippet will help you to add search and filter functionality to the data list in your web application. The user can easily sort the recordset without page refresh. You can enhance the functionality of this server-side filtering script as per your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Filtering feature helps to sort the recordset in the data list. Using the search and filter feature, the user can easily find the relevant data from the huge number of records. The sorting or filtering <\/p>\n","protected":false},"author":1,"featured_media":4517,"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":[28,209,16,19,14,211,210],"class_list":["post-1694","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-ajax","tag-filter","tag-jquery","tag-mysql","tag-php","tag-search","tag-sort","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>Server Side Filtering using jQuery Ajax PHP and MySQL - CodexWorld<\/title>\n<meta name=\"description\" content=\"Data filtering with PHP - Search and filter records set without page refresh using jQuery, Ajax, PHP, and MySQL. Example script to add server-side search and filter to data list with PHP and MySQL.\" \/>\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\/server-side-filtering-jquery-ajax-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Server Side Filtering using jQuery Ajax PHP and MySQL - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Data filtering with PHP - Search and filter records set without page refresh using jQuery, Ajax, PHP, and MySQL. Example script to add server-side search and filter to data list with PHP and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-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=\"2016-07-13T19:33:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-25T07:30:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/07\/server-side-search-filter-jquery-ajax-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=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Server Side Filtering using jQuery Ajax PHP and MySQL\",\"datePublished\":\"2016-07-13T19:33:53+00:00\",\"dateModified\":\"2021-02-25T07:30:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/\"},\"wordCount\":769,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png\",\"keywords\":[\"Ajax\",\"Filter\",\"jQuery\",\"MySQL\",\"PHP\",\"Search\",\"Sort\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/\",\"name\":\"Server Side Filtering using jQuery Ajax PHP and MySQL - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png\",\"datePublished\":\"2016-07-13T19:33:53+00:00\",\"dateModified\":\"2021-02-25T07:30:50+00:00\",\"description\":\"Data filtering with PHP - Search and filter records set without page refresh using jQuery, Ajax, PHP, and MySQL. Example script to add server-side search and filter to data list with PHP and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"server-side-search-filter-jquery-ajax-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/server-side-filtering-jquery-ajax-php-mysql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Server Side Filtering using jQuery Ajax PHP and MySQL\"}]},{\"@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":"Server Side Filtering using jQuery Ajax PHP and MySQL - CodexWorld","description":"Data filtering with PHP - Search and filter records set without page refresh using jQuery, Ajax, PHP, and MySQL. Example script to add server-side search and filter to data list with PHP and MySQL.","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\/server-side-filtering-jquery-ajax-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Server Side Filtering using jQuery Ajax PHP and MySQL - CodexWorld","og_description":"Data filtering with PHP - Search and filter records set without page refresh using jQuery, Ajax, PHP, and MySQL. Example script to add server-side search and filter to data list with PHP and MySQL.","og_url":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-07-13T19:33:53+00:00","article_modified_time":"2021-02-25T07:30:50+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/07\/server-side-search-filter-jquery-ajax-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":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Server Side Filtering using jQuery Ajax PHP and MySQL","datePublished":"2016-07-13T19:33:53+00:00","dateModified":"2021-02-25T07:30:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/"},"wordCount":769,"commentCount":16,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/07\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png","keywords":["Ajax","Filter","jQuery","MySQL","PHP","Search","Sort"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/","url":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/","name":"Server Side Filtering using jQuery Ajax PHP and MySQL - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/07\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png","datePublished":"2016-07-13T19:33:53+00:00","dateModified":"2021-02-25T07:30:50+00:00","description":"Data filtering with PHP - Search and filter records set without page refresh using jQuery, Ajax, PHP, and MySQL. Example script to add server-side search and filter to data list with PHP and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/07\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/07\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png","width":1366,"height":768,"caption":"server-side-search-filter-jquery-ajax-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/server-side-filtering-jquery-ajax-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Server Side Filtering using jQuery Ajax PHP and MySQL"}]},{"@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\/2016\/07\/server-side-search-filter-jquery-ajax-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-rk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1694","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=1694"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1694\/revisions"}],"predecessor-version":[{"id":4603,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1694\/revisions\/4603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4517"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}