{"id":600,"date":"2019-09-13T20:18:45","date_gmt":"2019-09-13T20:18:45","guid":{"rendered":"https:\/\/www.programmingfields.com\/?p=600"},"modified":"2022-12-03T05:56:39","modified_gmt":"2022-12-03T05:56:39","slug":"datatable-in-php-with-mysql-database","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/","title":{"rendered":"How to Implement jQuery Datatable in PHP with MySQL"},"content":{"rendered":"\n<p>jQuery provides a very powerful feature which is called <strong>datatable<\/strong>. The datatable is an open-source plugin provided by the jQuery. Basically, in a bootstrap table or HTML table, there is no option to sort the data according to the column. No search option and no other options. Simply the table is used to display the data in the form of rows and columns. But, if you want to make your table to more flexible, attractive and the featured then this can be done using the <strong>jQuery datatable<\/strong> plugin. So, today, I&#8217;m here with a tutorial on the datatable implementation in PHP.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Datatable_in_PHP\" >Datatable in PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Create_Database\" >Create Database<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Create_Table\" >Create Table<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Dumping_Data_For_Products_Table\" >Dumping Data For Products Table<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Create_Database_Connection\" >Create Database Connection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Create_a_Class_File\" >Create a Class File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Implement_DataTable_PHP\" >Implement DataTable PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Datatable_in_PHP\"><\/span>Datatable in PHP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Mainly, the datatable provides various features which are not available in any other tables. It is an open-source library by the jQuery. It is mobile friendly and provides <strong>pagination<\/strong>, <strong>data sorting<\/strong>, <strong>searching<\/strong>, <strong>column order,<\/strong> etc. You can apply this jquery plugin on the bootstrap table which must have some records. <\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/ajax-php-form-handling-using-jquery\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Ajax PHP Form Handling Using jQuery \u2013 Submit Form Without Refresh<\/a><\/p>\n\n\n\n<p>So, here, I&#8217;m going to create a project in which I will retrieve data from the database table. I am going to connect my application from the MySQL database. I have some records that I will fetch in a table.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Database\"><\/span>Create Database<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Open the phpMyAdmin and under the SQL section enter the below code for creating the database.<\/p>\n\n\n\n<pre title=\"Create Database\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE DATABASE data_table;<\/code><\/pre>\n\n\n\n<p>Next, you will have to create a table. Here, I have created a table with the name <code>products<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Table\"><\/span>Create Table<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<pre title=\"Create Table\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE TABLE `products` (\n  `product_id` int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT,\n  `product_name` varchar(100) NOT NULL,\n  `sku` varchar(50) NOT NULL,\n  `brand` varchar(50) NOT NULL,\n  `quantity` int(11) NOT NULL,\n  `price_per_unit` varchar(50) NOT NULL,\n  `created_on` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,\n  `updated_on` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP\n) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/dropdown-selection-filter-in-php-using-jquery-ajax\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Dropdown Selection Filter in PHP Using jQuery Ajax<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dumping_Data_For_Products_Table\"><\/span>Dumping Data For Products Table<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<pre title=\"Data in Table\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">--\n-- Dumping data for table `products`\n--\n\nINSERT INTO `products` (`product_id`, `product_name`, `sku`, `brand`, `quantity`, `price_per_unit`, `created_on`, `updated_on`) VALUES\n(1, 'Black Tea', 'BT101', 'Red Label', 43, '430', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(2, 'Green Tea', 'BT102', 'Tata Tea', 54, '200', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(3, 'Fruit Tea', 'BT103', 'Tata Tea', 25, '250', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(4, 'Herbal Tea', 'BT104', 'Red Label', 36, '350', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(5, 'White Tea', 'BT105', 'Tata Tea', 17, '453', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(6, 'Oolong Tea', 'BT106', 'Tata Tea', 28, '640', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(7, 'Rooibos Tea', 'BT107', 'Tata Tea', 18, '450', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(8, 'Mad Angles', 'BT109', 'Bingo', 15, '207', '2019-09-08 20:19:25', '2019-09-08 20:19:25'),\n(9, 'Black Tea', 'BT101', 'Red Label', 43, '430', '2019-09-08 20:33:40', '2019-09-08 20:33:40'),\n(10, 'Green Tea', 'BT102', 'Tata Tea', 54, '200', '2019-09-08 20:33:40', '2019-09-08 20:33:40'),\n(11, 'Fruit Tea', 'BT103', 'Tata Tea', 25, '250', '2019-09-08 20:33:40', '2019-09-08 20:33:40'),\n(12, 'Herbal Tea', 'BT104', 'Red Label', 36, '350', '2019-09-08 20:33:40', '2019-09-08 20:33:40'),\n(13, 'White Tea', 'BT105', 'Tata Tea', 17, '453', '2019-09-08 20:33:40', '2019-09-08 20:33:40'),\n(14, 'Oolong Tea', 'BT106', 'Tata Tea', 28, '640', '2019-09-08 20:33:40', '2019-09-08 20:33:40'),\n(15, 'Rooibos Tea', 'BT107', 'Tata Tea', 18, '450', '2019-09-08 20:33:40', '2019-09-08 20:33:40'),\n(16, 'Mad Angles', 'BT109', 'Bingo', 15, '207', '2019-09-08 20:33:40', '2019-09-08 20:33:40');\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Database_Connection\"><\/span>Create Database Connection<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before moving to the data part, you will have to create a database connection. Create a new file with the name <code>db-config.php<\/code> then paste the below code. Now, as per your database name, username, and password don&#8217;t forget to replace the credentials.<\/p>\n\n\n\n<pre title=\"db-config.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/\/ db-config.php\n\n&lt;?php\n\n    class DBController {\n\n        private $hostname  =   \"localhost\";\n\n        private $username  =   \"root\";\n        \n        private $password  =   \"root\";\n        \n        private $db        =   \"data_table\";\n \n        \/\/create connection \n        public function connect() {\n\n            $conn = new mysqli($this-&gt;hostname, $this-&gt;username, $this-&gt;password, $this-&gt;db)or die(\"Database connection error.\" . $conn-&gt;connect_error);\n                                         \n            return $conn;           \n        }\n \n       \t\/\/ close connection\n        public function close($conn) {\n            \n            $conn-&gt;close();\n        \n        }\n    }\n?&gt;<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/php-import-csv-file-with-preview\/\">PHP Import CSV File Data into MySQL Database with Preview<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Class_File\"><\/span>Create a Class File<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I am going to follow the object-oriented principle for retrieving the data from the database table. Now, create a new file in your project directory in which, we will be writing the database query.<\/p>\n\n\n\n<pre title=\"product-controller.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/\/ product-controller.php\n\n&lt;?php\n    class ProductsController {\n    \t\/\/ constructor\n    \tfunction __construct($conn) {\n    \t\t$this-&gt;conn = $conn;    \t\n    \t}\n\n        \/\/ retrieving products data\n        public function index() {\n            $data  =  array();\n            $sql   =  \"SELECT * FROM products\";            \n            $result =  $this-&gt;conn-&gt;query($sql);            \n            if($result-&gt;num_rows &gt; 0) {            \n                $data =  mysqli_fetch_all($result, MYSQLI_ASSOC);            \n            }           \n           $db-&gt;close($conn);           \n           return $data;\n        }\n    }\n?&gt;<\/code><\/pre>\n\n\n\n<p>Now, create a new file named <code>index.php<\/code> in which we, will create a bootstrap table. In this table, we&#8217;ll display the records which are retrieving through the above class file <strong>(product-controller.php)<\/strong>.<\/p>\n\n\n\n<pre title=\"index.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/\/ index.php\n\n&lt;?php \n\trequire_once '.\/config\/db-config.php'; \n\trequire_once '.\/controller\/product-controller.php';\n\t$db = new DBController();\n\t$conn = $db-&gt;connect();\n\t$dCtrl  =   new ProductsController($conn);\n\t$products = $dCtrl-&gt;index();\n?&gt;\n\n\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Datatable Implementation in PHP&lt;\/title&gt;\n\t&lt;!-- Bootstrap 4 CSS  --&gt;\n\t&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div class=\"container mt-5\"&gt;\n\t\t&lt;div class=\"row\"&gt;\n\t\t\t&lt;div class=\"col-xl-12 col-lg-12 col-md-12 col-12 m-auto\"&gt;\n\t\t\t\t&lt;table class=\"table table-bordered table-hovered table-striped\" id=\"productTable\"&gt;\n\t\t\t\t\t&lt;thead&gt;\n\t\t\t\t\t\t&lt;th&gt; Product ID &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Product Name &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; SKU &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Brand &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Quantity &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Price\/Unit &lt;\/th&gt;\n\t\t\t\t\t&lt;\/thead&gt;\n\t\t\t\t\t&lt;tbody&gt;\n\t\t\t\t\t&lt;?php \n\t\t\t\t\t\tforeach($products as $product) : ?&gt;\n\t\t\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['product_id']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['product_name']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['sku']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['brand']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['quantity']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['price_per_unit']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t\t&lt;?php endforeach; ?&gt;\t\n\t\t\t\t\t&lt;\/tbody&gt;\t\n\t\t\t\t&lt;\/table&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\"&gt;&lt;\/script&gt;\n\t&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.9\/umd\/popper.min.js\"&gt;&lt;\/script&gt;\n\t&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n\n\t&lt;script type=\"text\/javascript\" charset=\"utf8\" src=\"https:\/\/cdn.datatables.net\/1.10.19\/js\/jquery.dataTables.js\"&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>When you will execute the above code, it will show you the result as below. Here, the data are showing in a single page no matter how much data you have in the database table. It will print all the data on a single page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"899\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/PHP-Retrieving-Records.png?resize=1366%2C899&#038;ssl=1\" alt=\"datatable php\" class=\"wp-image-625\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/PHP-Retrieving-Records.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/PHP-Retrieving-Records.png?resize=300%2C197&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/PHP-Retrieving-Records.png?resize=768%2C505&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/PHP-Retrieving-Records.png?resize=1024%2C674&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Records in Table without DataTable<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>This would be a cause for the slow speed of the webpage if you will have a large number of data in your database. That&#8217;s why to overcome this, we use pagination which breaks the data into several pages.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/php-file-upload-using-jquery-and-ajax\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">PHP File Upload Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Implement_DataTable_PHP\"><\/span>Implement DataTable PHP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, on the above table, I&#8217;m going to implement the datatable PHP. So first of all download the minified version of CSS and jQuery file from the official website <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/datatables.net\/\" target=\"_blank\">https:\/\/datatables.net<\/a>. You can use CDN too. I am going to use CDN here.<\/p>\n\n\n\n<pre title=\"Datatable CDN\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!-- CDN CSS Datatable --&gt;\n\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/1.10.19\/css\/jquery.dataTables.css\"&gt;\n\n\n&lt;!-- CDN jQuery Datatable --&gt;\n&lt;script type=\"text\/javascript\" charset=\"utf8\" src=\"https:\/\/cdn.datatables.net\/1.10.19\/js\/jquery.dataTables.js\"&gt;&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the CSS between the opening and closing <strong>head<\/strong> tag of HTML. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Also, add the jQuery CDN at the bottom before the end of the body tag.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the last step, add these two lines of script to apply the datatable in the HTML table.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ apply datatable in the HTML table\n&lt;script&gt;\n\t$(document).ready(function() {\n    \t$('#productTable').DataTable();\n\t});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>In the above code, I have started a script code with jQuery in which I have assigned the datatable in the HTML table with the id attribute. <\/p>\n\n\n\n<p>So, after adding the above script and CDN the <code>index.php<\/code> the file will become as shown below.<\/p>\n\n\n\n<pre title=\"index.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php \n\n\trequire_once '.\/config\/db-config.php'; \n\trequire_once '.\/controller\/product-controller.php';\n\t$db = new DBController();\n\t$conn = $db-&gt;connect();\n\t$dCtrl  =\tnew ProductsController($conn);\n\t$products = $dCtrl-&gt;index();\n?&gt;\n\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Datatable Implementation in PHP&lt;\/title&gt;\n\t&lt;!-- Bootstrap 4 CSS  --&gt;\n\t&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\"&gt;\n\n\t&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/1.10.19\/css\/jquery.dataTables.css\"&gt;\n  \n\n&lt;\/head&gt;\n&lt;body&gt;\n\n\t&lt;div class=\"container mt-5\"&gt;\n\t\t&lt;div class=\"row\"&gt;\n\t\t\t&lt;div class=\"col-xl-12 col-lg-12 col-md-12 col-12 m-auto\"&gt;\n\t\t\t\t&lt;table class=\"table table-bordered table-hovered table-striped\" id=\"productTable\"&gt;\n\t\t\t\t\t&lt;thead&gt;\n\t\t\t\t\t\t&lt;th&gt; Product ID &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Product Name &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; SKU &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Brand &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Quantity &lt;\/th&gt;\n\t\t\t\t\t\t&lt;th&gt; Price\/Unit &lt;\/th&gt;\n\t\t\t\t\t&lt;\/thead&gt;\n\n\t\t\t\t\t&lt;tbody&gt;\n\n\t\t\t\t\t&lt;?php \n\t\t\t\t\t\tforeach($products as $product) : ?&gt;\n\n\t\t\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['product_id']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['product_name']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['sku']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['brand']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['quantity']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t\t&lt;td&gt; &lt;?php echo $product['price_per_unit']; ?&gt; &lt;\/td&gt;\n\t\t\t\t\t\t\t&lt;\/tr&gt;\n\n\n\t\t\t\t\t\t&lt;?php endforeach; ?&gt;\t\n\t\t\t\t\t&lt;\/tbody&gt;\t\n\t\t\t\t&lt;\/table&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\n\t&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\"&gt;&lt;\/script&gt;\n\t&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.9\/umd\/popper.min.js\"&gt;&lt;\/script&gt;\n\t&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n\n\t&lt;!-- CDN jQuery Datatable --&gt;\n\t&lt;script type=\"text\/javascript\" charset=\"utf8\" src=\"https:\/\/cdn.datatables.net\/1.10.19\/js\/jquery.dataTables.js\"&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n&lt;!-- Script ---&gt;\n&lt;script&gt;\n\t$(document).ready(function() {\n    \t$('#productTable').DataTable();\n\t});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Now, after executing the above code, you can see the datatable has been applied to our existing table.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"657\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/Datatable-PHP.png?resize=1366%2C657&#038;ssl=1\" alt=\"jQuery DataTable in PHP\" class=\"wp-image-640\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/Datatable-PHP.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/Datatable-PHP.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/Datatable-PHP.png?resize=768%2C369&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/Datatable-PHP.png?resize=1024%2C493&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">jQuery Datatable<\/figcaption><\/figure>\n<\/div>\n\n\n<p>In the result of datatable, you will have the various features like pagination, the number of records to show, search specific record, the total number of records showing in the table, sorting the data in ascending and descending order.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1187\" height=\"351\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/DataTable-Sorting.png?resize=1187%2C351&#038;ssl=1\" alt=\"Datatable Sorting\" class=\"wp-image-647\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/DataTable-Sorting.png?w=1187&amp;ssl=1 1187w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/DataTable-Sorting.png?resize=300%2C89&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/DataTable-Sorting.png?resize=768%2C227&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/DataTable-Sorting.png?resize=1024%2C303&amp;ssl=1 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Datatable data filter<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link has-vivid-red-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/www.programmingfields.com\/wp-content\/uploads\/2019\/09\/data-table.zip\" style=\"color:#ffffff\">Download Source<\/a><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/check-if-email-available-in-php-using-ajax\/\">Check If Email Available in PHP Using Ajax and <\/a><a rel=\"noreferrer noopener\" aria-label=\"jQuery (opens in a new tab)\" href=\"https:\/\/www.programmingfields.com\/check-if-email-available-in-php-using-ajax\/\" target=\"_blank\">jQuery<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We have successfully implemented the jQuery datatable in PHP. After applying the data table we got the various functions in the normal table. I hope, this will help you to manage the tables having a large number of records. If you need any help regarding this tutorial then please ask by doing comment in the comment section. I will help you there.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery provides a very powerful feature which is called datatable. The datatable is an open-source plugin provided by the jQuery. Basically, in a bootstrap table or HTML table, there is no option to sort the data according to the column. No search option and no other options. Simply the table is used to display the [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[13,4],"tags":[411,410,412],"yst_prominent_words":[400,134,22,100,402,403,18,151,392,417,413,414,116,407,98,409,286,415,26,416],"class_list":{"0":"post-600","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-jquery","8":"category-php","9":"tag-datatable-php","10":"tag-jquery-datatable","11":"tag-jquery-pagination","12":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/09\/Datatable-in-PHP.png?fit=560%2C315&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=600"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/600\/revisions"}],"predecessor-version":[{"id":8941,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/600\/revisions\/8941"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/652"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=600"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}