Today we will be going through on how to get started with datatables. We also have this tutorial in video here.
Datatables are basically HTML tables that consists of large quantities of data within each row and column. We will be using Datatables.net plugin to manage all our data, since it is the best JS datatable plugins available worldwide. It is also amazingly easy to configure and customize.
Datatables used by many of KeenThemes products such as Metronic Dashboard
All our admin theme products within Keenthemes already have datatables.net plugin included and integrated, therefore, you do not need to re-integrate it again.
We will be going through these steps in this tutorial to get a datatable running on your project.
- Create a new HTML page to contain the datatable
- Create a new JS file to initialize the datatable
- Update the assets to include our integrated datatable plugin and our new JS file
To demonstrate this, we will be using our Rider admin theme available within our store located here: https://keenthemes.com/products/rider-html-free
However, this tutorial is applicable for all our admin theme products.
Once you have purchased and downloaded Rider, go ahead, and unzip the package file and open up the documentation. The documentation is located in:
<root>/theme/dist/documentation/getting-started.html
Open the getting-started.html file with your browser and you will see the “Quick Installation” link.
<root>/theme/dist/documentation/getting-started.html
Click on the “Install now” link and follow the steps to install Rider’s build tools on your local machine.
Creating a new HTML page
Once done, open the root folder of Rider in your IDE of your choice and navigate to <root>/theme/dist/
You can create new HTML files anywhere within this folder and it will work accordingly, however, for this tutorial, we’ll be creating our new datatable page within the main “dist” folder. Therefore, go ahead and create a new folder called “datatable” within the "dist" folder, then create a new HTML file within the datatable folder called “datatable.html”. It should look something like this:
Next, to quickly generate our HTML layout, we will be copying code from another page and pasting it into our new datatable.html file. For this example, we will be copying from <root>/theme/dist/general/about.html
You can preview your new page in your browser by opening the datatable.html file within your browser, or if you have localhost running, you can access it by navigating to: http://localhost:8080/datatable/datatable.html
Now, we will need to replace all the “About page” content with our datatable. We can start removing lines of HTML code from line 2579 to line 3095
Once removed, return to our documentation and navigate to our Datatable > Basic page to get a sample HTML template for a datatable. Alternatively, you could open this file in your browser: <root>/theme/dist/documentation/general/datatables/basic.html
Copy the HTML provided within the “Zero Configuration” sample:
<table id="kt_datatable_example_1" class='table table-row-bordered gy-5'>
<thead>
<tr class='fw-bold fs-6 text-muted'>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
Into the blank area we just deleted from our datatable.html. It should at around line 2579
Now that we have our HTML table added into the page, we can move on to create our JS initialization file.
Creating a new JS initialization file
Create a new folder called “datatable” within the apps folder here: <root>/theme/src/js/custom/apps and then create a new blank JS file called datatable.js within it. It should look like this:
Once the new datatable JS file is created, add the following code structure into it, so that your JS file will look something like this:
"use strict";
// Class definition
var KTDatatableDemo = function () {
// Public methods
return {
init: function () {
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTDatatableDemo.init();
});
Next, return to the Zero Configuration datatable example within our documentation and click on the “Javascript” tab on the code example.
$("#kt_datatable_example_1").Datatable();
Create a new “initDatatable” function and copy the sample code provided into your new datatable.js file. Then call the function in the class init function. Here is how the final JS code will look like:
"use strict";
// Class definition
var KTDatatableDemo = function () {
// Private functions
const initDatatable = () => {
$("#kt_datatable_example_1").Datatable();
}
// Public methods
return {
init: function () {
initDatatable();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTDatatableDemo.init();
});Update assets and paths
Finally, we will need to update our assets and paths within our new datatable.html file, but before that, we will need to rebuild our assets. To rebuild the assets folder, run gulp within your terminal. You can refer to Step 8 of our Quick Installation documentation page for more info.
To ensure that the assets path is loading the correctly, open up the datatable.html file that was just created and look at line 15:
The “href” attribute within this “base” element will determine how many levels up this HTML file needs to go before hitting the dist folder. If you created the datatables.html file according to this tutorial, then the base href should be “../../”
Next, to include the integrated datatable plugin assets (both CSS and JS), navigate to our Datatable > Overview documentation page here: <root> /theme/dist/documentation/general/datatables/overview.html
We will need to copy both CSS and JS bundle files into our datatable.html file.
<link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
Paste the CSS in line 33:
Then, paste the JS in line 5055:
Lastly, we will need to include the new datatable.js file we just created. Paste this code anywhere after the datatables.bundle.js file:
<script src="assets/js/custom/apps/datatable/datatable.js"></script>
Your final JS include lines should look something like this:
Now go ahead and refresh the datatable.html page on your browser and try clicking on the column headers to sort the rows.
That’s it! You have successfully added datatables into your project.
Next Steps
Try adding more rows into your datatable.html file and check out datatables.net’s official website and try including more configuration options. Alternatively, check out our Youtube channel for more how-to tutorial videos.
Happy coding!
