Skip to main content

Initialization

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

<!DOCTYPE html><html>    <head>        <title>How to Start with dhtmlxPagination</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 component            const widget = new dhx.List("widget_container", {                css: "dhx_widget--bordered",                keyNavigation: true            });
            widget.data.parse(widget_data);
            // creating dhtmlxPagination            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#

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>

Add a related widget#

note

dhtmlxPagination 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, dhtmlxList.

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

script.js
// creating a related dhtmlxList widgetconst 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:

script.js
// loading data into the created dhtmlxList 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.
script.js
// creating dhtmlxPaginationconst 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.