Getting Started

14 Aug 20173 minutes to read

This section briefly explains about how to create a Pager control in your application with Javascript. The following sample explains how to render a Pager control in your application.

The Essential Javascript Pager control render’s based on total records count, page size, page count values.

Create an HTML file and add the following code template to the HTML file.

HTML

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
      <!-- Style sheet for default theme (flat azure) -->
      <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
      <!--Scripts-->
      <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
      <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
      <!--Add custom scripts here -->
   </head>
   <body>
      <!--- Add pager element Here  --->
   </body>
</html>

Add <Div> element to create a Pager control.

HTML

<div id="pager"> </div>

Initialize Pager control in the script section with properties.

NOTE

The totalRecordsCount, pageSize and pageCount API values play a key role in rendering a pager control. Since pageSize and pageCount API’s are dependent on each other and pager will be updated each time the value changes as explained below.

Total records Count: totalRecordsCount defines the total number of records which is bounded as a single data.

JAVASCRIPT

$(function () {

            $("#pager").ejPager({

                totalRecordsCount: 20,

            });

        });

Run the above sample to get the below output.

Page Size: pageSize value defines the number records to be displayed per page. The default value for the pageSize API is 12.

NOTE

The page count value changes with change in the pageSize value.

JAVASCRIPT

$(function () {

            $("#pager").ejPager({

                totalRecordsCount: 20,

                pageSize: 1,

            });

        });

Run the above sample to get the below output.

Page Count: pageCount value defines the number of pages to be displayed in the pager control for navigation. The default value for pageCount is 10 and value will be updated based on totalaRecordsCount and pageSize values.

JAVASCRIPT

$(function () {

            $("#pager").ejPager({

                totalRecordsCount: 20,

                pageSize: 1,

                pageCount: 3,


            });

        });

Run the above sample to get the below output.

Getting Started

Creating your first Pager in Javascript