Convert Regular HTML Tables Into Datatables – js-datatable

Category: Javascript , Table | June 18, 2021
Views Total:4,191 views
Official Page:Go to website
Last Update:June 18, 2021


Convert Regular HTML Tables Into Datatables – js-datatable


js-datatable is a simple-to-use JavaScript library that converts a normal static HTML table into a user-friendly table view with sorting, searching, and pagination features.

How to use it:

1. Insert the stylesheet datatable.css and JavaScript datatable.js into the document.

<!-- Core -->
<link rel="stylesheet" href="css/datatable.css" />
<script src="js/datatable.js"></script>
<!-- Local File -->
<script src="js/locales.js"></script>

2. Add the data-component="datatable" attribute to your HTML table and determine the language you want to use.

<table data-component="datatable" id="example" data-locale="en">
      <th>User code</th>

3. Enable live search functionality on the data table.

<table data-component="datatable" id="example" data-locale="en" data-search="true">

4. Add your translation strings to the locales.js

window.DT_LOCALES["en"] =
  SEARCH: "search",
  PER_PAGE: "{NUM} per page",
  SHOWING_TO: "rows {FROM} to {TO} of {SIZE}",
  GOTO_FIRST: "go to page 1",
  GOTO_PREV: "go to previous page",
  GOTO_PAGE: "go to page {NUM}",
  GOTO_NEXT: "go to next page",
  GOTO_LAST: "go to last page",
  ASC_ACTIVE: "ascending order active",
  DESC_ACTIVE: "descending order active",
  NOT_ACTIVE: "not active"



  • Fixed search and pagination bug


  • Minor improvements

You Might Be Interested In:

Leave a Reply