Skip to main content

Initialization

info

Download the DHTMLX Pagination package as a part of the DHTMLX Suite library

To add DHTMLX Pagination into an application, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Pagination</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="widget_container"></div>
        <div id="pagination_container"></div>
        <script>
            // creating a related widget
            const widget = new dhx.List("widget_container", {
                css: "dhx_widget--bordered",
                keyNavigation: true
            });

            widget.data.parse(widget_data);

            // creating DHTMLX Pagination
            const pagination = new dhx.Pagination("pagination_container", {
                css: "dhx_widget--bordered",
                data: widget.data
            });
        </script>
    </body>
</html>

Related sample: Pagination. Pagination with List

Related sample: Pagination. Pagination with Dataview

Related sample: Pagination. Pagination with Tree

Related sample: Pagination. Pagination with Grid

Related sample: Pagination. Pagination with TreeGrid

Include source files​

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create containers​

Add two containers:

  • for a related component and give it an id, e.g. "widget_container"
  • for Pagination and give it an id, e.g. "pagination_container":
index.html
<div id="widget_container"></div>
<div id="pagination_container"></div>
note

DHTMLX Pagination can be used in conjunction with data components like List, DataView, Tree, Grid, or TreeGrid.

Choose the widget you want to link to the Pagination component, for example, DHTMLX List.

1. Initialize the widget with the object constructor, like this:

index.js
// creating a related DHTMLX List widget
const widget = new dhx.List("widget_container", {
    css: "dhx_widget--bordered",
    keyNavigation: true
});

The constructor has two parameters:

  • the HTML container for List,
  • an object with the List configuration properties (see the full list here).

2. Load data into the widget:

index.js
// loading data into the created DHTMLX List 
widget.data.parse(widget_data);

Initialize Pagination​

Initialize pagination with the dhx.Pagination object constructor. The constructor takes two parameters:

  • the HTML container for Pagination,
  • optional, an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
index.js
// creating DHTMLX Pagination
const pagination = new dhx.Pagination("pagination_container", {
    css: "dhx_widget--bordered",
    data: widget.data
});

Configuration properties​

There is a set of properties you can specify in the Pagination configuration object (the second parameter of the constructor function).

See the detailed information on configuration properties of Pagination in the Pagination API overview article.