Press "Enter" to skip to content

A Pure JavaScript Component That Transforms Simple HTML Tables | js-datatable

js-datatable is an easy-to-use Pure JavaScript (VanillaJS) component that turns simple HTML tables into fully interactive and accessible spreadsheets with sort, search, and paging features.

How to make use of it:

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

<!-- 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 wish to use.

<table data-component="datatable" id="example" data-locale="en">
  <thead>
    <tr>
      <th>User code</th>
      <th>Name</th>
      <th>Surname</th>
      <th>Country</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

3. Enable reside search performance on the information table.

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

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"
}
Convert Regular HTML Tables Into Datatables, js-datatable Plugin/Github
js-datatable-demo


See Demo And Download

 

Official Website(luverolla): Click Here

This superior jQuery/javascript plugin is developed by luverolla. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.