Create Pagination And Filter For HTML Table – Ligne PaginateJs

Category: Javascript , Table | January 15, 2019
Author: itsalb3rt
Views Total: 659
Official Page: Go to website
Last Update: January 15, 2019
License: MIT

Preview:

Create Pagination And Filter For HTML Table – Ligne PaginateJs

Description:

Ligne PaginateJs is a vanilla JavaScript plugin to create pagination and filter controls for large HTML tables. Without any frameworks and dependencies.

How to use it:

Load the Ligne PaginateJs’ JavaScript and CSS files.

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

Create a search field to filter through the tabular data.

<input type="search" id="searchBox" placeholder="Filter...">

Set the pagination & filter options as follows:

let options = {
    numberPerPage:10,
    constNumberPerPage:10,
    numberOfPages:0,
    goBar:false,
    pageCounter:true,
    hasPagination:true,
};

let filterOptions = {
    el:'#searchBox'
};

Initialize the Ligne PaginateJs on the HTML table. Done.

paginate.init('table',options,filterOptions);

You Might Be Interested In:


Leave a Reply