Pager

11 Jul 201814 minutes to read

Custom Design for HTML Pager control.

Syntax

  • JAVASCRIPT
    • $(element).ejPager()

    Example

  • HTML
    • <div id="pager"></div> 
 
<script>
// Create ejPager
pagerModel = {pageSize:5,pageCount:5,currentPage:1}
$("#pager").ejPager(pagerModel);     
</script>

    Requires

    • module:jQuery
    • module:ej.core.js
    • module:ej.touch.js
    • module:ej.pager.js

    Members

    customText string

    Gets or sets a value that indicates whether to display the custom text message in Pager.

    Default Value:

    • ””

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({customText ="custom pager text"})
});
</script>

    currentPage number

    Gets or sets a value that indicates whether to define which page to display currently in pager.

    Default Value:

    • 1

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({currentPage: 1 })
});
</script>

    cssClass string

    Sets the root CSS class, which can be used for customization of pager control.

    Default Value

    • ””

    Example

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

<script>
//To set cssClass API during initialization  
        $("#pager").ejPager({ cssClass: "gradient-lime" });
</script>

    enabled boolean

    Enable or disable the Pager control.

    Default Value

    • true

    Example

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

<script>
//To set enabled API during initialization  
$("#pager").ejPager({
    enabled: false 
});

</script>

    enableExternalMessage boolean

    Gets or sets a value that indicates whether to display the external Message in Pager.

    Default Value:

    • false

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({enableExternalMessage: true })
});
</script>

    enableQueryString boolean

    Gets or sets a value that indicates whether to pass the current page information as a query string along with the URL while navigating to other page.

    Default Value:

    • false

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({enableQueryString: true })
});
</script>

    enableRTL boolean

    Align content in the pager control from right to left by setting the property as true.

    Default Value:

    • false

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({enableRTL:true})
});
</script>

    externalMessage string

    Gets or sets a value that indicates whether to display the external Message in Pager.

    Default Value:

    • ””

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({enableExternalMessage: true, externalMessage:"external message in Pager" })
});
</script>

    NOTE

    enableExternalMessage default value as false. so We must enable enableExternalMessage set as true when enable externalMessage.

    isResponsive boolean

    Enables or disables responsive support for the Pager control items on window resize.

    Default Value:

    • false

    Example

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

<script>
//To set isResponsive API during initialization  
$("#pager").ejPager({
    isResponsive: true
});

</script>

    locale string

    Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data i.e. in a language and culture specific to a particular country or region.

    Default Value:

    • “en-US”

    Example

  • HTML
    • <div id="pager"></div> 
<script>
ej.Pager.locale["es-ES"] = {
   pagerInfo: "{0} de {1} p&aacute;ginas ({2} art&iacute;culos)"
};
$("#pager").ejPager({locale: "es-ES"})
});
</script>

    pageCount number

    Gets or sets a value that indicates whether to define the number of pages displayed in the pager for navigation.

    Default Value:

    • 10

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({pageCount: 5 })
});
</script>

    pageSize number

    Gets or sets a value that indicates whether to define the number of records displayed per page.

    Default Value

    • 12

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({pageSize: 2 })
});
</script>

    pageSizeList Array

    It allows to have multiple choices of pageSize values for Pager control. The “pageSize” API value of the pager will be updated depending upon the value being selected from the dropdown.

    Default Value

    • null

    Example

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

<script>
// Set pageSizeList value during initialization.
$("#pager").ejPager({pageSizeList: [1,2,3] })

</script>

    pageSizeMessage String

    Indicates the pageSizeMessage to be displayed in Pager when pageSizeList API is defined.

    Default Value

    • ””

    Example

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

<script>
// Set pageSizeList and pageSizeList message value during initialization.
$("#pager").ejPager({
    pageSizeList: [1,2,3],
    pageSizeListMessage:"page size list message in pager"
});

</script>

    template string

    Template option allows to customize UI appearance of the ejPager by defining their own page layout.

    Default Value:

    • null

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({
    template: "#template" });
});
</script>

    totalPages number

    Get or sets a value of total number of pages in the pager. The totalPages value is calculated based on page size and total records.

    Default Value:

    • null

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({totalPages: 1 })
});
</script>

    totalRecordsCount number

    Get the value of total number of records which is bound to a data item.

    Default Value:

    • null

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({totalRecordsCount: 10 })
});
</script>

    showPageInfo boolean

    Shows or hides the current page information in pager footer.

    Default Value:

    • true

    Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({showPageInfo:false})
});
</script>

    Methods

    gotoPage(pageIndex)

    Send a paging request to specified page through the pager control.

    Name Type Description
    pageIndex number Specifies the index to be navigated

    Example

    <div class="frame">
    <ul id="sliderContent">
    <li><img class="image" src="http://jsplayground.syncfusion.com/28.2.3/themes/web/content/images/rotator/nature.jpg" title="Nature" /></li>
    <li><img class="image" src="http://jsplayground.syncfusion.com/28.2.3/themes/web/content/images/rotator/bird.jpg" title="Beautiful Bird" /></li>
    <li><img class="image" src="http://jsplayground.syncfusion.com/28.2.3/themes/web/content/images/rotator/sculpture.jpg" title="Amazing Sculptures" /></li>
    <li><img class="image" src="http://jsplayground.syncfusion.com/28.2.3/themes/web/content/images/rotator/seaview.jpg"  title="Sea-View"/></li>
    <li><img class="image" src="http://jsplayground.syncfusion.com/28.2.3/themes/web/content/images/rotator/snowfall.jpg"  title="Snow Fall"/></li>
    <li><img class="image" src="http://jsplayground.syncfusion.com/28.2.3/themes/web/content/images/rotator/card.jpg"  title="Credit Card"/></li>
    <li><img class="image" src="http://jsplayground.syncfusion.com/28.2.3/themes/web/content/images/rotator/night.jpg"  title="Colorful Night"/></li>
    </ul>
</div>
<script type="text/javascript">
    $(function () {
    // declaration
    $("#sliderContent").ejRotator({
        slideWidth: "600px",
        frameSpace: "0px",
        showPager: true,
    });
    var obj = $("#sliderContent").ejRotator("instance")
    $('.e-pager-wrap').css('display', 'none')
    $("<div id='pager' style='width:600px'></div>").appendTo($("body"));
    $('#pager').ejPager({
        pageSize:1, totalPages: 7, totalRecordsCount:7, pageCount: 3, click: "page" })
                        
    });
    function page(args) {
    if(!ej.isNullOrUndefined(args.event)){
        this.goToPage(args.model.currentPage); // pager moved to the specified page
        this.refreshPager(); // refresh the pager control
        var obj = $("#sliderContent").ejRotator("instance").gotoIndex(args.currentPage);
    }
    }
</script>
<style type="text/css" class="cssStyles">
    .frame {
    width: 600px;
    }
    #sliderContent > li .image {
    width: 600px;
    height: 350px;
    }
</style>

    goToFirstPage()

    goToFirstPage() helps to navigate to the first page of the pager.

    Example

  • HTML
    • <div id="pager"></div> 
 
<script>
$('#pager').ejPager();
var pgObj = $("#pager").data("ejPager");
pgObj.goToFirstPage(); 
</script>

    goToNextPage()

    goToNextPage() helps to navigate to the next page to the current page of the pager.

    Example

  • HTML
    • <div id="pager"></div> 
 
<script>
$('#pager').ejPager();
var pgObj = $("#pager").data("ejPager");
pgObj.goToNextPage(); 
</script>

    goToLastPage()

    goToLastPage() helps to navigate to the Last page of the pager.

    Example

  • HTML
    • <div id="pager"></div> 
 
<script>
$('#pager').ejPager();
var pgObj = $("#pager").data("ejPager");
pgObj.goToLastPage(); 
</script>

    goToPrevPage()

    goToPrevPage() helps to navigate to the previous page to the current page of the pager.

    Example

  • HTML
    • <div id="pager"></div> 
 
<script>
$('#pager').ejPager();
var pgObj = $("#pager").data("ejPager");
pgObj.goToPrevPage(); 
</script>

    refreshPager()

    refreshPager() helps to refresh the model value of pager control.

    Example

  • HTML
    • <div id="pager"></div> 
 
<script>
$('#pager').ejPager();
var pgObj = $("#pager").data("ejPager");
pgObj.refreshPager(); 
</script>

    Events

    click

    Triggered when pager numeric item is clicked in pager control.

    Name Type Description
    cancel boolean Returns the cancel option value.
    currentPage number Returns the current page index.
    model object Returns the pager model.
    type string Returns the name of event
    event object Returns current action event type and its target.

    ####Example

  • HTML
    • <div id="pager"></div> 
<script>
$("#pager").ejPager({
   click: function (args) {}
});
</script>

    change

    Triggers when the current page value of the Pager control is changed.

    Name Type Description
    currentPage number Returns the current page index.
    model object Returns the pager model.
    type string Returns the name of event
    event object Returns current action event type and its target.

    ####Example

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

<script>

$("#pager").ejPager({
   change: function (args) {}
});

</script>

    create

    Triggered when Pager control is successfully created.

    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the pager model.
    type string Returns the name of event

    ####Example

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

<script>

$("#pager").ejPager({
   create: function (args) {}
});

</script>

    destroy

    Triggered when Pager control is successfully destroyed.

    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the pager model.
    type string Returns the name of event

    ####Example

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

<script>

$("#pager").ejPager({
   destroy: function (args) {}
});

</script>

    pageSizeSelected

    Triggered when a value is selected in the pageSizeList dropdown.

    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the pager model.
    type string Returns the name of event

    ####Example

  • HTML
    • <div id="pager"></div> 
<script>

$("#pager").ejPager({
   pageSizeList:[1,2,3],
   pageSizeSelected: function (args) {}
});

</script>