{"id":6304,"date":"2021-06-16T04:27:17","date_gmt":"2021-06-16T04:27:17","guid":{"rendered":"https:\/\/programmingfields.com\/?p=6304"},"modified":"2026-05-02T06:29:33","modified_gmt":"2026-05-02T06:29:33","slug":"how-to-implement-jquery-datatable-in-codeigniter-4","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/","title":{"rendered":"How to Implement jQuery Datatable in CodeIgniter 4"},"content":{"rendered":"\n<p>jQuery provides the datatable library to use in an HTML table. The jQuery datatable provides you the flexibility of pagination, searching, and ordering the data in the table. Even you can apply custom filters to the data. It also allows us to use column filters inside the table. You can implement it on any server-side or client-side language that contains an HTML element. Today, you will learn the implementation of <strong>jQuery datatable in CodeIgniter 4<\/strong>. It is very easy to implement it. Lastly, I have shown you the use of <a rel=\"noreferrer noopener\" href=\"https:\/\/programmingfields.com\/generate-fake-data-in-codeigniter-4-using-seeder-and-faker\/\" target=\"_blank\">seeder and faker factory in CodeIgniter 4<\/a>. By using of seeder and faker factory. I had inserted the sample data in a table. Hence, for implementing the jQuery datatable in CodeIgniter 4, I will be using the same approach. I am not gonna insert records manually in the table. So, let&#8217;s do that quickly.<\/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\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Prerequisites\" >Prerequisites<\/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\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_New_Project_in_CodeIgniter_4\" >Create New Project in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_and_Configure_Database\" >Create and Configure Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_a_Migration_File_in_CodeIgniter_4\" >Create a Migration File in CodeIgniter 4<\/a><\/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\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Migrate_Tables_in_CodeIgniter_4\" >Migrate Tables in CodeIgniter 4<\/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\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_a_Model_in_CodeIgniter_4\" >Create a Model in CodeIgniter 4<\/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\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_a_Seeder_For_Seeding_Sample_Data\" >Create a Seeder For Seeding Sample Data<\/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\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Run_Seeder_File_in_CodeIgniter_4\" >Run Seeder File in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_a_Controller_in_CodeIgniter_4\" >Create a Controller in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_a_View_For_Datatable_in_CodeIgniter_4\" >Create a View For Datatable in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Create_Route\" >Create Route<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Check_Result_of_Datatable_in_CodeIgniter_4\" >Check Result of Datatable in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before applying the datatable, you need to have a CodeIgniter 4 project. Here, I am assuming you are ready for creating a new project. So, it will require the below configuration.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>PHP &gt;= 7.3<\/strong><\/li><li><strong>MySQL (version &gt; 5)<\/strong><\/li><li><strong>Apache\/Nginx Server<\/strong><\/li><li><strong>VS Code Editor<\/strong><\/li><li><strong>Composer<\/strong><\/li><\/ul>\n\n\n\n<p>Once, you are done let&#8217;s create the project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_New_Project_in_CodeIgniter_4\"><\/span><strong>Create New Project in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can download CodeIgniter 4 from the <a rel=\"noreferrer noopener\" href=\"https:\/\/codeigniter.com\/download\" target=\"_blank\">official website.<\/a> But, I am gonna install it through composer. You need to open the terminal and hit the below command.<\/p>\n\n\n\n<pre title=\"create project\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">composer create-project codeigniter4\/appstarter ci4-datatable<\/code><\/pre>\n\n\n\n<p>It will create the project folder and install CodeIgniter 4. It will take a couple of minutes to finish the installation.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-05-10-08-35-14-edited.png?w=643&amp;ssl=1\" alt=\"Install CodeIgniter 4 Using Composer\"\/><figcaption><strong>Install CodeIgniter 4 Using Composer<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>In the next step, you will need to create a database. Here, I will be using the MySQL command line for database management.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-remove-index-php-from-url-in-codeigniter-4\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Remove index.php From URL in CodeIgniter 4<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_and_Configure_Database\"><\/span><strong>Create and Configure Database<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Firstly, I will create a database, then it will need to configure it with newly created CodeIgniter 4 project.<\/p>\n\n\n\n<pre title=\"create database\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE DATABASE ci4_datatable;<\/code><\/pre>\n\n\n\n<p>After creating the database, let&#8217;s connect it with our project. In order to configure the database, you will have to go through the below steps-<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Rename the&nbsp;<strong>env<\/strong>&nbsp;file to&nbsp;the&nbsp;<strong>.env<\/strong>&nbsp;file. You can make a copy of this file even then rename it.<\/li><li>Next, open the&nbsp;<strong>.env<\/strong>&nbsp;file and change the&nbsp;<strong>environment<\/strong>&nbsp;to&nbsp;<strong>development<\/strong>. By default, it is&nbsp;<strong>production<\/strong>.<\/li><li>Lastly, go to the database section inside this file and replace the credentials as showing below.<\/li><\/ul>\n\n\n\n<pre title=\"configure database\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">#--------------------------------------------------------------------\n# DATABASE\n#--------------------------------------------------------------------\n\ndatabase.default.hostname = localhost\ndatabase.default.database = ci4_form\ndatabase.default.username = root\ndatabase.default.password = root\ndatabase.default.DBDriver = MySQLi<\/code><\/pre>\n\n\n\n<p>Now, all set for the database configuration. Therefore, let&#8217;s create a migration file to implement the datatable in CodeIgniter 4.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upload Multiple Image with Validation in Codeigniter 4<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Migration_File_in_CodeIgniter_4\"><\/span><strong>Create a Migration File in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here, you need to create a migration file for the users table. Actually, you need the data in the form of a table. On that data, we can apply the datatable in CodeIgniter 4.<\/p>\n\n\n\n<pre title=\"create  migration\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:migration users --table<\/code><\/pre>\n\n\n\n<p>After hitting the above command, you will have a migration file. The migration file will be inside the <strong>app\/Database\/Migrations<\/strong> folder. Here, you will be having a file with the name something <strong>timestamp_Users.php<\/strong>. Navigate to this file and paste the below schema.<\/p>\n\n\n\n<pre title=\"timestamp_Users.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Database\\Migrations;\n\nuse CodeIgniter\\Database\\Migration;\n\nclass Users extends Migration\n{\n    public function up()\n    {\n        $this-&gt;forge-&gt;addField([\n            'id' =&gt; [\n                'type' =&gt; 'INT',\n                'auto_increment' =&gt; true\n            ],\n            'name' =&gt; [\n                'type' =&gt; 'VARCHAR',\n                'constraint' =&gt; '30'\n            ],\n            'email' =&gt; [\n                'type' =&gt; 'VARCHAR',\n                'constraint' =&gt; '50'\n            ],\n            'password' =&gt; [\n                'type' =&gt; 'VARCHAR',\n                'constraint' =&gt; '20'\n            ],\n            'phone' =&gt; [\n                'type' =&gt; 'VARCHAR',\n                'constraint' =&gt; '15'\n            ],\n            'address' =&gt; [\n                'type' =&gt; 'TEXT'\n            ],\n            'created_at datetime default current_timestamp',\n            'updated_at datetime default current_timestamp on update current_timestamp'\n        ]);\n        $this-&gt;forge-&gt;addKey('id', true);\n        $this-&gt;forge-&gt;createTable('users');\n    }\n\n    public function down()\n    {\n        $this-&gt;forge-&gt;dropTable('users');\n    }\n}<\/code><\/pre>\n\n\n\n<p>Here, we defined the schema for the users table. Hence, it will generate the fields inside the user table. So, let&#8217;s migrate the above schema to the database.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-upload-image-and-file-in-codeigniter-4-with-validation\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Upload Image and File in Codeigniter 4 with Validation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Migrate_Tables_in_CodeIgniter_4\"><\/span><strong>Migrate Tables in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For migrating the tables, you need the migration file and the schema for the tables. The below command will migrate the table with its schema inside the database.<\/p>\n\n\n\n<pre title=\"migrate tables\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark migrate<\/code><\/pre>\n\n\n\n<p>After the successful migration, you may checkout the database. Here, the users table schema has been dumped out.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-05-12-21-53-16-edited.png?w=676&amp;ssl=1\" alt=\"Users Table Schema Generated By Migration\"\/><figcaption><strong>Users Table Schema Generated By Migration<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, you can create a model to configure with the table.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/form-validation-example-in-codeigniter-4\/\" target=\"_blank\" rel=\"noreferrer noopener\">Form Validation Example in Codeigniter 4 For Beginners<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Model_in_CodeIgniter_4\"><\/span><strong>Create a Model in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>While implementing the datatable in CodeIgniter 4, I want to connect with a dynamic data. Hence, it will require a model to connect with the table. Therefore, let&#8217;s create it quickly.<\/p>\n\n\n\n<pre title=\"create user model\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:model User<\/code><\/pre>\n\n\n\n<p>The above command will create a model file inside the <strong>app\/Models<\/strong> folder. Now, you need to define some properties inside it. So, just update it as showing below. Here, I have defined the table name, primary key, allowed fields attributes in the form of an array.<\/p>\n\n\n\n<pre title=\"User.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Models;\n\nuse CodeIgniter\\Model;\n\nclass User extends Model\n{\n    protected $DBGroup              = 'default';\n    protected $table                = 'users';\n    protected $primaryKey           = 'id';\n    protected $useAutoIncrement     = true;\n    protected $protectFields        = true;\n    protected $allowedFields        = ['name', 'email', 'password', 'phone', 'address'];\n\n    \/\/ Dates\n    protected $useTimestamps        = false;\n    protected $dateFormat           = 'datetime';\n    protected $createdField         = 'created_at';\n    protected $updatedField         = 'updated_at';\n}\n<\/code><\/pre>\n\n\n\n<p>Here, the model configuration is completed. Now, let&#8217;s create a seeder file to seed the fake data to the users table.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/create-a-crud-application-in-codeigniter-4-for-beginners\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a CRUD Application in CodeIgniter 4 For Beginners<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Seeder_For_Seeding_Sample_Data\"><\/span><strong>Create a Seeder For Seeding Sample Data<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The CodeIgniter 4 provides a seeder class. It is used to dump the rows inside the table of a database. Here, we can use to seed some fake data inside the users table. After that we&#8217;ll apply the datatable on it.<\/p>\n\n\n\n<pre title=\"create seeder file\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:seeder UserSeeder<\/code><\/pre>\n\n\n\n<p>After creating the UserSeeder file, the default code will look like this.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-14-08-41-12.png?resize=1024%2C348&amp;ssl=1\" alt=\"UserSeeder in CodeIgniter 4 for datatable\"\/><figcaption><strong>UserSeeder in CodeIgniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>There is a function inside the UserSeeder class that is run(). Here, you will need to use the faker factory class to generate fake data. So, just add the below snippet there.<\/p>\n\n\n\n<pre title=\"UserSeeder.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Database\\Seeds;\n\nuse CodeIgniter\\Database\\Seeder;\nuse CodeIgniter\\I18n\\Time;\nuse App\\Models\\User;\n\nclass UserSeeder extends Seeder\n{\n    public function run()\n    {\n\n        $user = new User;\n        $faker = \\Faker\\Factory::create();\n\n        for ($i = 0; $i &lt; 220; $i++) {\n          $user-&gt;save(\n                [\n                    'name'        =&gt;    $faker-&gt;name,\n                    'email'       =&gt;    $faker-&gt;email,\n                    'password'    =&gt;    password_hash($faker-&gt;password, PASSWORD_DEFAULT),\n                    'phone'       =&gt;    $faker-&gt;phoneNumber,\n                    'address'     =&gt;    $faker-&gt;address,\n                    'created_at'  =&gt;    Time::createFromTimestamp($faker-&gt;unixTime()),\n                    'updated_at'  =&gt;    Time::now()\n                ]\n            );\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/crud-application-in-php-8-using-prepared-statement\/\" target=\"_blank\" rel=\"noreferrer noopener\">CRUD Application in PHP 8 Using Prepared Statement<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Run_Seeder_File_in_CodeIgniter_4\"><\/span><strong>Run Seeder File in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here, you have defined the faker factory attributes in the seeder file. Now, it&#8217;s time to run it so that it can generate the specified number of rows inside the users table. Hence, hit the below command.<\/p>\n\n\n\n<pre title=\"run database seeder\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark db:seed UserSeeder<\/code><\/pre>\n\n\n\n<p>It seeded the fake data in the users table. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"101\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-17-27.png?resize=1024%2C101&#038;ssl=1\" alt=\"Seeded Data in Users Table\" class=\"wp-image-6382\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-17-27.png?resize=1024%2C101&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-17-27.png?resize=300%2C30&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-17-27.png?resize=768%2C76&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-17-27.png?w=1137&amp;ssl=1 1137w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Seeded Data in Users Table<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Here, I have generated 200+ rows using seeder. Let&#8217;s checkout the table for the records.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"751\" height=\"221\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-24-19.png?resize=751%2C221&#038;ssl=1\" alt=\"Seeded Rows Count in Users table\" class=\"wp-image-6383\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-24-19.png?w=751&amp;ssl=1 751w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-24-19.png?resize=300%2C88&amp;ssl=1 300w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><figcaption><strong>Seeded Rows Count in Users table<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, we have the data to apply the datatable in CodeIgniter 4. Hence, let&#8217;s create a controller to write the functionality.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/what-is-sql-injection-and-how-to-prevent-it-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is SQL Injection and How to Prevent it in PHP<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Controller_in_CodeIgniter_4\"><\/span><strong>Create a Controller in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating a controller, I will use the same approach that we have used earlier. Yes, you have assumed right. I will use spark command. So, let&#8217;s create the controller.<\/p>\n\n\n\n<pre title=\"create controller\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:controller UserController<\/code><\/pre>\n\n\n\n<p>The above command will create a controller named <strong>UserController.php<\/strong>. Here, you need to write the function to fetch data from the users table using User model. So, just paste the below code and move to the next step.<\/p>\n\n\n\n<pre title=\"UserController.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Controllers;\n\nuse App\\Controllers\\BaseController;\nuse App\\Models\\User;\n\nclass UserController extends BaseController\n{\n    private $user;\n    \/**\n     * constructor\n     *\/\n    public function __construct()\n    {\n        $this-&gt;user = new User();\n    }\n\n\n    \/**\n     * create function to fetch users data\n     * @return array on view\n     *\/\n    public function users() {\n        $users = $this-&gt;user-&gt;findAll();\n        return view('users', compact('users'));\n    }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Firstly, I have instantiated the User model inside the constructor. <\/li><li>Then inside the <strong>users() <\/strong>function, I have fetched all the rows from the users table. This is database modeling. Hence, no need to write the raw SQL query here.<\/li><li>It will fetch all the rows and return them to the users view.<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/check-if-email-available-in-php-using-ajax\/\" target=\"_blank\" rel=\"noreferrer noopener\">Check Email Available in PHP MySQL Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_View_For_Datatable_in_CodeIgniter_4\"><\/span><strong>Create a View For Datatable in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To display the data, you will need the view. Hence, we will create a view with the name users.php inside the <strong>app\/Views <\/strong>folder.<\/p>\n\n\n\n<p>After creating the view, let&#8217;s put the HTML code to make a table using <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap 5<\/a>.<\/p>\n\n\n\n<pre title=\"view - users.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;title&gt;Datatable in CodeIgniter 4&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\n     &lt;!-- bootstrap 5 CSS --&gt;\n     &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-eOJMYsd53ii+scO\/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6\" crossorigin=\"anonymous\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.4.1\/font\/bootstrap-icons.css\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.datatables.net\/1.10.25\/css\/jquery.dataTables.min.css\"\/&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n  &lt;div class=\"container-fluid py-4\"&gt;\n    &lt;h4 class=\"text-center\"&gt; Datatable in CodeIgniter 4 &lt;\/h3&gt;\n    &lt;div class=\"row mt-4\"&gt;\n        &lt;div class=\"col-xl-12\"&gt;\n            &lt;div class=\"card\"&gt;\n                &lt;div class=\"card-header bg-primary text-white\"&gt;\n                    &lt;h5 class=\"card-title\"&gt;Users &lt;\/h4&gt;\n                &lt;\/div&gt;\n\n                &lt;div class=\"card-body\"&gt;\n                    &lt;table class=\"table table-striped table-bordered\" id=\"userTable\"&gt;\n                        &lt;thead&gt;\n                            &lt;tr&gt;\n                                &lt;th&gt;Id &lt;\/th&gt;\n                                &lt;th&gt;Name &lt;\/th&gt;\n                                &lt;th&gt;Email&lt;\/th&gt;\n                                &lt;th&gt;Phone no. &lt;\/th&gt;\n                                &lt;th&gt;Address &lt;\/th&gt;\n                            &lt;\/tr&gt;\n                        &lt;\/thead&gt;\n\n                        &lt;tbody&gt;\n                        &lt;?php \n                            if (count($users) &gt; 0):\n                                foreach ($users as $user): ?&gt;\n                                    &lt;tr&gt;\n                                        &lt;td&gt;&lt;?= $user['id'] ?&gt;&lt;\/td&gt;\n                                        &lt;td&gt;&lt;?= $user['name'] ?&gt;&lt;\/td&gt;\n                                        &lt;td&gt;&lt;?= $user['email'] ?&gt;&lt;\/td&gt;\n                                        &lt;td&gt;&lt;?= $user['phone'] ?&gt;&lt;\/td&gt;\n                                        &lt;td&gt;&lt;?= $user['address'] ?&gt;&lt;\/td&gt;\n                                    &lt;\/tr&gt;\n                                &lt;?php endforeach;\n                            else: ?&gt;\n                                &lt;tr rowspan=\"1\"&gt;\n                                    &lt;td colspan=\"4\"&gt;\n                                        &lt;h6 class=\"text-danger text-center\"&gt;No usres found&lt;\/h6&gt;\n                                    &lt;\/td&gt;\n                                &lt;\/tr&gt;\n                            &lt;?php endif ?&gt;\n                        &lt;\/tbody&gt;\n                    &lt;\/table&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n   \n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\" integrity=\"sha256-\/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej\/m4=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdn.datatables.net\/1.10.25\/js\/jquery.dataTables.min.js\"&gt;&lt;\/script&gt;\n    &lt;script&gt;\n        $(document).ready(function() {\n            $(\"#userTable\").dataTable();\n        });\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>In the above snippet, I have iterated the data coming from the controller. Also, at the bottom side, I have applied the datatable on the id attribute of the HTML table.<\/p>\n\n\n\n<p>Now, you need a route to check the result.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Implement jQuery Datatable in PHP with MySQL<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Route\"><\/span><strong>Create Route<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating a route, let&#8217;s open the <strong>Routes.php<\/strong> file and the below route.<\/p>\n\n\n\n<pre title=\"Routes.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$routes-&gt;get('users', 'UserController::users');<\/code><\/pre>\n\n\n\n<p>Now, you are good to check the result. Let&#8217;s run the application using the below command-<\/p>\n\n\n\n<pre title=\"run codeigniter 4 project\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark serve<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Check_Result_of_Datatable_in_CodeIgniter_4\"><\/span><strong>Check Result of Datatable in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To check the result, you need to open the browser. Now, hit the route and see the below result. Here, the datatable has been applied to the view. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-59.png?resize=1024%2C558&#038;ssl=1\" alt=\"Datatable in CodeIgniter 4\" class=\"wp-image-6388\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-59.png?resize=1024%2C558&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-59.png?resize=300%2C164&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-59.png?resize=768%2C419&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-59.png?w=1302&amp;ssl=1 1302w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Datatable in CodeIgniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>You will have the pagination, soring, searching, and count of the data in this table.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-02.png?resize=798%2C375&#038;ssl=1\" alt=\"Datatable in CodeIgniter 4\" class=\"wp-image-6387\" width=\"798\" height=\"375\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-02.png?resize=1024%2C482&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-02.png?resize=300%2C141&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-02.png?resize=768%2C361&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-54-02.png?w=1290&amp;ssl=1 1290w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><figcaption><strong>Datatable in CodeIgniter 4 &#8211; Result<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Let&#8217;s try to order the row or search any record from the search box. You can see the result of filtered data.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-55-21.png?resize=1024%2C457&#038;ssl=1\" alt=\"Filter Data in Datatable\" class=\"wp-image-6389\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-55-21.png?resize=1024%2C457&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-55-21.png?resize=300%2C134&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-55-21.png?resize=768%2C343&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-16-08-55-21.png?w=1302&amp;ssl=1 1302w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Filter Data in CodeIgniter 4 Datatable<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We applied jQuery datatable in CodeIgniter 4 on the sample data. For generating sample data, we used seeder and faker factory class. After fetching all the rows from the databse, we returned it to the view. In the view, we applied the datatable on the HTML table. On the result, we have the pagination, searching, sorting and many more feature to use. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery provides the datatable library to use in an HTML table. The jQuery datatable provides you the flexibility of pagination, searching, and ordering the data in the table. Even you can apply custom filters to the data. It also allows us to use column filters inside the table. You can implement it on any server-side [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6394,"comment_status":"open","ping_status":"closed","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":[1977],"tags":[2107,2105],"yst_prominent_words":[134,100,392,116,539,133,956],"class_list":{"0":"post-6304","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-codeigniter-4","8":"tag-datatable-in-codeigniter-4","9":"tag-jquery-datatable-in-codeigniter-4","10":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/jQuery-datatable-in-codeigniter-4.png?fit=2240%2C1260&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6304","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=6304"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6304\/revisions"}],"predecessor-version":[{"id":8641,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6304\/revisions\/8641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/6394"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=6304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=6304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=6304"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=6304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}