RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/pagination/init/ below:

JavaScript Pagination - Initialization | DHTMLX Suite 9 Docs

Widgets
Pagination
Initialization

Initialization

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

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

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":

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

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:

// 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:

// 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.

// 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4