Create Pagination And Filter For HTML Table – Ligne PaginateJs

Category: Javascript , Table | January 15, 2019
Author:itsalb3rt
Views Total:11,500 views
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:


6 thoughts on “Create Pagination And Filter For HTML Table – Ligne PaginateJs

  1. JK

    Its not getting the table element. Console error shows : “Element myTableName no exits”
    I tried id=”myTableName” ..and also class = “myTableName”
    But settings.table is always NULL
    What could be the issue?

    Reply
    1. Justme

      if you want to identify TABLE element by id, add “#” in front of the id value when calling init function. For example paginate.init(‘#tableid’,options,filterOptions);

      Reply
    2. justme

      add “#” into js calling init function to identify element by its id.

      paginate.init(‘#table_id’,pagination_options,pagination_filterOptions);

      Reply
  2. Martin Piecyk

    Amazingly fast, lightweight, feature rich, customizable, and easy-to-use thanks!

    Reply
  3. elias hayar

    how can i alter the code in a way, when i try searching for a keyword, the table header always be visible, I dont want the Table head to disapear based on my search.

    Reply
    1. Justme

      I’ve achived table header permanently visible by:
      Adding tag with ID around elements/rows, which were not header and then using that body_id in init function.
      Example:

      Col1
      Col2

      12
      34
      56

      in JS:
      paginate.init(‘#mytable_body_id’,pagination_options,pagination_filterOptions);

      Reply

Leave a Reply