jQuery EasyUI Basic Plugin -Pagination

jQuery EasyUI 插件jQuery EasyUI Plugin

Override the default defaults via $.fn.pagination.defaults.

Pagination allows users to navigate data by paging. It supports configurable options for page navigation and page length selection. Users can add custom buttons to the right side of the pagination to enhance functionality.

Dependencies

  • linkbutton

Usage

Create pagination via markup.

<div id="pp" class="easyui-pagination" style="background:#EFEFEF;border:1px solid #ccc;"
    data-options="total:2000,pageSize:10">
</div>

Create pagination using JavaScript.

<div id="pp" style="background:#EFEFEF;border:1px solid #ccc;"></div>

$('#pp').pagination({
    total:2000,
    pageSize:10
});

Let's create an AJAX pagination using the panel and pagination plugins. When the user selects a new page, the panel will display the corresponding content of the specified page.

<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'show_content.php?page=1'">
</div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
    data-options="
    total: 2000,
    pageSize: 10,
    onSelectPage: function(pageNumber, pageSize){
    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);
    }">
</div>

The panel at the top displays the content of the first page by default. When the user navigates pages, the 'onSelectPage' event will be triggered, which calls the 'refresh' method on the content panel to load new page content with a new URL parameter.

Properties

Name Type Description Default Value
total number The total number of records, should be set when creating the pagination. 1
pageSize number Page size. (Note: the maximum number of records displayed per page) 10
pageNumber number The page number to display when creating the pagination. 1
pageList array Users can change the page size. The pageList property defines what sizes can be changed to.
Code example:
$('#pp').pagination({
    pageList: [10,20,50,100]
});
[10,20,30,50]
loading boolean Defines whether data is loading. false
buttons array,selector Defines custom buttons, possible values:
1. Array, each button contains two properties:
iconCls: CSS class, it will display a background image
handler: the handler function when the button is clicked
2. Selector, indicating the button.

Buttons can be declared via markup:
<div class="easyui-pagination" style="border:1px solid #ccc" data-options="
        total: 114,
        buttons: [{
            iconCls:'icon-add',
            handler:function(){alert('add')}
        },'-',{
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }]">
</div>
Buttons can also be created using JavaScript:
$('#pp').pagination({
    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },'-',{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});
null
layout array Pagination layout definition. This property is available since version 1.3.5.
Layout items include one or more of the following values:
1. list: page size list.
2. sep: page button separator.
3. first: first button.
4. prev: previous button.
5. next: next button.
6. last: last button.
7. refresh: refresh button.
8. manual: manual page number input field that allows entering page numbers.
9. links: page number links.

Code example:
$('#pp').pagination({
    layout:['first','links','last']
});
links number The number of links, only valid when the 'links' item is included in 'layout'. This property is available since version 1.3.5. 10
showPageList boolean Defines whether to display the page list. true
showRefresh boolean Defines whether to display the refresh button. true
beforePageText string Display label before the input component. Page
afterPageText string Display label after the input component. of {pages}
displayMsg string Display a page information. Display page information of {from} to {to} of {total}.

Events

Name Parameters Description
onSelectPage pageNumber, pageSize Triggered when the user selects a new page. The callback function contains two parameters:
pageNumber: the new page number
pageSize: the new page size

Code example:
$('#pp').pagination({
    onSelectPage:function(pageNumber, pageSize){
        $(this).pagination('loading');
        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
        $(this).pagination('loaded');
    }
});
onBeforeRefresh pageNumber, pageSize Triggered before the refresh button is clicked; return false to cancel the refresh action.
onRefresh pageNumber, pageSize Triggered after refreshing.
onChangePageSize pageSize Triggered when the user changes the page size.

Methods

Name Parameters Description
options none Returns the options object.
loading none Put the pagination into loading state.
loaded none Put the pagination into loaded state.
refresh options Refresh and display pagination information. This method is available since version 1.3.
Code example:
$('#pp').pagination('refresh');    // 刷新分页栏信息
$('#pp').pagination('refresh',{    // 改变选项，并刷新分页栏信息
    total: 114,
    pageNumber: 6
});
select page Select a new page. The page index starts from 1. This method is available since version 1.3.
Code example:
$('#pp').pagination('select');    // 刷新当前页面
$('#pp').pagination('select', 2);    // 选择第二页
jQuery EasyUI 插件jQuery EasyUI Plugin Other Extensions