How to Integrate Pager Component with ListView in JavaScript (ES5) ListView control

JavaScript (ES5)

Search results

23 Mar 2023 / 2 minutes to read

The first and foremost step is to obtain the Pager component from Grid. Install the ej2-grid package using the following command.

npm install @syncfusion/ej2-grids --save

Import the Pager to the ListView sample which has been created.

import { Pager } from "@syncfusion/ej2-grids";

The totalRecordsCount property of Pager must be specified whenever using this particular component. By using pageSize property, the number of list items to be displayed is made available. The pageCount property allows the user to specify the visibility of the page numbers accordingly. Since the paging sample in the upcoming code snippet uses these three properties, the explanation provided here were minimal and to the point. For further API concerns in Pager component, click here.

With the help of the query property of ListView, the user can specify the number of records to be displayed in the current page.

The query property helps in splitting the entire datasource based on our convenience. In the sample provided below, when clicking the next button in pager, it fetches the datasource based on page size and current page of Pager component.

 click: function () {
        listObj.query= new Query().range((pager.currentPage - 1) * pager.pageSize, (pager.currentPage * pager.pageSize));
    }

Note: When pageSize isn’t mentioned, it defaults to 12 records per page.

Source

Preview

index.js

index.html

index.css

var pager = new ej.grids.Pager({
        totalRecordsCount: data.length,
        pageSize: 10,
        pageCount: 2,
        click: function () {
            listObj.query = new ej.data.Query().range((pager.currentPage - 1) * pager.pageSize, (pager.currentPage * pager.pageSize));
        }
    });
    pager.appendTo('#Pager');
    var header = '<table class="w-100"> <tr><td class="w-25">Order ID</td><td class="w-45">Ship Name</td><td class="w-25">ShipCity</td></tr></table>';
    var template = '<table class="w-100"> <colgroup><col span="2"><col></colgroup><tr><td class="w-25">${OrderID}</td><td class="w-45">${ShipName}</td><td class="w-25">${ShipCity}</td></tr></table>';
    var listObj = new ej.lists.ListView({
        dataSource: new ej.data.DataManager({
            json: data, 
            adaptor: new ej.data.JsonAdaptor
        }),
        query: new ej.data.Query().range(0, pager.pageSize),
        headerTemplate: header,
        template: template,
        showHeader: true
    });
    listObj.appendTo('#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-grids/styles/material.css" rel="stylesheet">
    
    
    <script src="./es5-datasource.js"></script>
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="element"></div>
        <div id="Pager"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    max-width: 100%;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}
.w-25{
    width:25% !important;
  }
    .w-45{
    width:45% !important;
  }

   .w-100{
    width:100% !important;
  }

  .e-headertemplate-text {
   width: 100%;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.52);
}