Behavior Settings in JQuery Pager widget

##Page Size

The pageSize property of the pager control allows an option to gets or sets a value that indicates whether to define the number of records displayed per page.

  • javascript
  • $(function () {
    
            $("#pager").ejPager({
             pageSize: 2
            
            })
    
        });

    ##Page Count

    The pageCount property of the pager control allows an option to gets or sets a value that indicates whether to define the number of pages displayed in the pager for navigation.

  • javascript
  • $(function () {
    
            $("#pager").ejPager({
             pageCount: 5
            
            })
    
        });

    ##Total Pages

    The totalPages property of the pager control allows an option to gets or sets a value of total number of pages in the pager. The totalPages value is calculated based on page size and total records.

  • javascript
  • $(function () {
    
            $("#pager").ejPager({
             totalPages:1
            
            })
    
        });

    ##Total Records count

    The totalRecordsCount property of the pager control allows an option to get the value of total number of records which is bound to a data item.

  • javascript
  • $(function () {
    
            $("#pager").ejPager({
             totalRecordsCount: 10 
            
            })
    
        });

    ##current page

    The currentPage property of the pager control allows an option to gets or sets a value that indicates whether to define which page to display currently in pager.

  • javascript
  • $(function () {
    
            $("#pager").ejPager({
             currentPage: 1 
            
            })
    
        });

    Page Size List

    The pageSizeList property of the pager control allows an option to have multiple options of page size values. By defining pageSizeList, a dropdown will render in a pager with given values along with the current pageSize as selected value in dropdown.

    Selected value in a dropdown will be set to pageSize API and pager will refresh based on this new pageSize.

  • javascript
  • $(function () {
    
            // creates pager control with pageSizeList
    
                $("#pager").ejPager({
    
                    totalRecordsCount: 20,
    
                    pageSize: 1,
    
                    pageCount:3,
    
                    // set pageSizeList value for pager.
                    pageSizeList: [1,2,3]
    
                });
    
            });

    pageSizeList

    Page Size Message

    The pageSizeMessage property allows to show a message along with the dropdown when pageSizeList API of pager control is defined. In the below sample, the pageSizeMessage of pager displays the current pageSize value of the pager control and will also be updated whenever the pageSize value is changed by selecting a value from the dropdown.

  • javascript
  • $(function () {
    
              // creates pager control with pageSizeMessage
    
                $("#pager").ejPager({
    
                    totalRecordsCount: 20,
    
                    pageCount: 3,
    
                    pageSize: 1,
    
                    pageSizeList: [1,2,3],
    
                    pageSizeSelected: "pageSizeInfo", // sets handler to change in pageSizeList dropdown. 
    
                    pageSizeMessage: "PageSize value: 1" // sets pageSizeMessage for the pager.
    
                });
    
            });
    
    function pageSizeInfo(e) {
    
                       // creating instance for pager. 
                       var a = $("#Pager").ejPager("instance");
    
                       //pageSize value of pager will be updated for each change of value in dropdown
                       a.option("pageSizeMessage", "PageSize value: " + e.pageSize);
                       
                   }

    pageSizeMessage

    Responsive

    The pager control has responsive support such that control also fit with mobile resolutions. By enabling isResponsive API, you can make the pager control responsive. While resizing the browser window, the inner elements in the pager control will adjust automatically to equalize the size. By default, isResponsive API value is false.

  • javascript
  • $(function () {
    
                $("#pager").ejPager({
    
                    totalRecordsCount: 20,
    
                    pageSize: 1,
    
                    currentPage:1,
    
                    pageCount:3,
    
                    isResponsive: true
    
                });
    
            });

    pager_Responsive

    Current Page

    The currentPage value of the pager determines which page to be displayed currently. The default value of the currentPage API is 1

  • javascript
  • $(function () {
    
                // create a pager control defining  the current page value
    
                $("#pager").ejPager({
    
                    totalRecordsCount: 20,
    
                    pageSize: 1,
    
                    pageCount:3,
    
                    currentPage: 2
    
                });
    
            });

    pager_Currentpage

    Enable/Disable

    You can enable or disable pager control by using enabled property. Setting enabled API value as false will disable the user interaction with the pager control.

  • javascript
  • $(function () {
    
                // Creates a pager control initially disabled
    
                $("#pager").ejPager({
    
                    totalRecordsCount: 20,
    
                    pageCount: 3,
    
                    pageSize: 1,
    
                    //disables the pager control
                    enabled: false
    
                });
    
            });