Initialization

info

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

Follow these steps to add DHTMLX Pagination to an application:

• Include source files
• Create two containers
• Add a related widget (for example, DataView, List, Grid, Tree)
• Initialize Pagination with the object constructor

<!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 Grid in the TreeGrid mode

Include source files

Unpack the downloaded package into your project folder.

Create an HTML file and add the paths to the JS and CSS files of the DHTMLX Suite library in its header. 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 and give each of them an id:

• A container for the related widget, for example widget_container
• A container for Pagination, for example pagination_container

index.html

<div id="widget_container"></div>
<div id="pagination_container"></div>

Initialize a related widget

note

DHTMLX Pagination works with data components such as List, DataView, Tree, Grid, or Grid in the TreeGrid mode.

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 takes two parameters:

• The HTML container for List.
• An object with List configuration properties (see the full list of properties).

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.
• An object with configuration properties (optional). If you omit this argument, Pagination uses the default settings.

index.js

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

Configuration properties

The Pagination API overview article describes the properties you can specify in the Pagination configuration object (the second parameter of the constructor).