Home / Learn / Blog / Web Development / Getting Started with Datatables

Getting Started with Datatables

By Shane L on 1 month ago

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.

You can find the Datatable plugin at: datatables.net
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.

data tables

We will be going through these steps in this tutorial to get a datatable running on your project.

  1. Create a new HTML page to contain the datatable
  2. Create a new JS file to initialize the datatable
  3. 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 

admin theme install

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:

datatable folder

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

datatables code remove

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

datatables HTML zero configuration

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:

datatable apps

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:

data table assets path

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

datatable CSS bundle

Then, paste the JS in line 5055:

datatable bundle

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:

data tables main js

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!

Shane L
Shane L | Keenthemes Team

Comments (0)

Text format options
Here's a how to add some HTML formatting to your comment:
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li> or <ol><li> to make lists
  • <h3> or <h4> to make headings
  • <pre></pre> for code blocks
  • <code></code> for a few words of code
  • <a></a> for links
  • <img> to paste in an image (it'll need to be hosted somewhere else though)
  • <blockquote></blockquote> to quote somebody
  • happy :)
  • shocked :|
  • sad :(
Text format options
Here's a how to add some HTML formatting to your comment:
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li> or <ol><li> to make lists
  • <h3> or <h4> to make headings
  • <pre></pre> for code blocks
  • <code></code> for a few words of code
  • <a></a> for links
  • <img> to paste in an image (it'll need to be hosted somewhere else though)
  • <blockquote></blockquote> to quote somebody
  • happy :)
  • shocked :|
  • sad :(

Popular Blog Posts

5 reasons to use Bootstrap admin template

It’s no doubt that when a development takes longer to complete, additional costs to integra...

Metronic 8 is Live!

Keenthemes team elevates the most advanced and multifunctional admin dashboard theme to a new lev...

Top 5 Web Frameworks for Web Development 2021

All that the users ever see of a website is the front-end. What goes on behind the screen? Each w...

Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop
Stockholm-icons / Navigation / Up-2 Created with Sketch.