DataTable API | Pagination | Search | Sorting | MySQL | PHP | Bootstrap
If you have searched the web “How to implement Pagination” or “How to implement Search” for countless hours and still weren’t able to make it work or get a beautiful User Interface. Then don’t worry I’m here to help you.
The image shown above is what we are going to achieve at the end of this guide.
Just follow along with the guide and you will be able to implement Pagination, Sorting, and Search altogether in a matter of time. So let's start without wasting any further time.
First, go to PHPMyAdmin and create a database “datatable_demo” if you don't already have one. Then go to this link and paste the SQL code into the database. This will create and insert all the dummy data for this guide, feel free to use your own data for this purpose.
Now create a file named “index.php” and code some basic HTML template and add the required links to APIs.
If you open the file in a browser a blank page will open as we haven't added any actual code in it yet.
Let’s start by adding a table and heading in the HTML section after the comment.
Here we created an h1 tag and a table with some dummy data.
Open the file in the browser. Now we can see the table and the heading but it's not aligned and also not looking pretty.
So let’s fix it by adding some styling. Create a “style.css” and add the following code in it.
Now the GUI is finally complete let’s make the data in the table dynamic.
Add the following PHP code in the PHP section at the top of the “index.php”.
In the above code, we first create 4 variables that store our server credentials. Then we make a connection to the database using the mysqli() constructor and pass the variables to the constructor as arguments.
Then on line 11, we check if there was an error while connecting to the database. If an error occurred then we echo it out and kill further loading of the page. Else execute the code without interruption.
On line 16, we store the query to fetch all the data from the country table into a variable. Then on line 17, execute the query and store the result into a variable.
Now replace the content of <tbody> tag by the following code.
In the above code, we are just iterating through the data fetched by the query and adding it to the table as a row.
Now let’s open the file in a browser, We can see the whole list of countries and it is really a huge data.
So its time for the Data Table API to come in and do its work. Just add the following code in the last <script> tag.
Voila!! All the features that we needed have automatically appeared.
Thank You for reading. Comment down if you need any help.
Full Code available here
