Fully-Interactive and Accessible HTML Tables In Pure JavaScript | Datatable.js

JS DataTable Pure JavaScript (VanillaJS) component that transforms simple HTML tables, into fully interactive and accessible spreadsheets with sort, search, and paging features.

Features:

  • Easy to implement.
  • Responsive design.
  • Sort the attributes by clicking the table headers.
  • Filter through the data with the search field.
  • It allows you to specify the number of rows to display per page.
  • Pagination controls.

Check Here – A JavaScript Library That Creates HTML Tables | data-table.js

How to make use of it:

1. Load the required JavaScript and Stylesheet within the doc.

<link rel="stylesheet" href="./css/datatable.min.css" />
<script src="./datatable.min.js"></script>

2. Add the next information attribute to your HTML table and the library will do the remainder.

<table data-replace="jtable" id="example" aria-label="JS Datatable" data-locale="en" data-search="true">
  <thead>
    <tr>
      <th>Country</th>
      <th>City</th>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
    ... tabular data here
  </tbody>
</table>

3. Add your personal locals as follows:

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",
  NO_RESULT: "no result"
}

Options

attribute namedata typedescription
data-localestringlowercase two-letter ISO language code
data-searchbooleantells if the table should be searchable

Minimal Data Table, JS DataTable Plugin/Github

Read More – 

jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts
A Tool for Publishing Responsive HTML Tables of a Google Spreadsheet as a CMS


See Demo And Download

Official Website(luverolla): Click Here

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

Share