Minimal Data Table In Pure JavaScript – Datatable.js

Category: Javascript , Table | March 28, 2021
Author: luverolla
Views Total: 118 views
Official Page: Go to website
Last Update: March 28, 2021
License: MIT

Preview:

Minimal Data Table In Pure JavaScript – Datatable.js

Description:

A lightweight JavaScript library that generates an interactive, accessible data table from your exiting HTML table.

Features:

  • Easy to implement.
  • Responsive design.
  • Sort tabular data by clicking table headers.
  • Filter through data with a search field.
  • Allows you to specify how many rows to display per page.
  • Pagination controls.

How to use it:

1. Load the required JavaScript and Stylesheet in the document.

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

2. Add the following data attribute to your HTML table and the library will do the rest.

  • data-replace: Required
  • data-locale: ‘en’ or ‘it’
  • data-search: Enable/disable live search
<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 own 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"
}

Changelog:

03/28/2021

  • Fixed pagination issue.

You Might Be Interested In:


Leave a Reply