分页插件示例

基本示例

分页插件默认显示第一页，每页显示 5 项条目，指定 totalCount 即可显示分页情况。

<div id="paging-ex1"></div>

<script type="text/javascript">
$('#paging-ex1').paging({
    totalCount: 50
}); 
</script>

定义每页显示条目数，以及页码链接

通过配置项 numberOfPages 指定每页显示的条目数，配置项方法 pageUrl 定义页码链接。

<div id="paging-ex2"></div>

<script type="text/javascript">
var _currentPage = (window.location.href + '').match(/p=(\d+)/);
if (_currentPage) {
    _currentPage = Number(_currentPage[1]);
}
_currentPage = _currentPage || 1;
$('#paging-ex2').paging({
    currentPage: _currentPage,
    numberOfPages: 10,
    totalCount: 50,
    pageUrl: function(type, page, current) {
        if (page == current) {
            return null;
        } else {
            return '?p='+page;
        }
    }
}); 
</script>

自定义页码处理（Ajax刷新内容）

如果你的每页内容是通过 Ajax 异步获取（不跳转页面）的，则可以使用配置项方法 onPageClicked 自行处理。

<div id="paging-ex3-content">
  <p>page content.</p>
</div>
<div id="paging-ex3"></div>

<script type="text/javascript">
$('#paging-ex3').paging({
    numberOfPages: 10,
    totalCount: 50,
    onPageClicked: function(evt, e, type, current) {
        var pages = $(this).paging('getPages');
        if (pages.current == pages.next && type == 'next') {
            return;
        }
        if (pages.current == 1 && type == 'prev') {
            return;
        }
        if (current > 0 && current <= pages.total) {
            renderContent(current, pages.numberOfPages);
        }
    }
});
function renderContent(page, pageSize) {
    // 模拟异步处理
    var $content = $('#paging-ex3-content');
    $content.html('<p>getting content from page ' + page + '.</p>');
    setTimeout(function() {
        $content.html('<p>page content in page ' + page + '.</p>');
    }, 1000);
}
</script>

更多分页控件

可以通过配置项 info, currentPageInfo, numbers 和 dom 的配合显示更多的分页控件。

<div id="paging-ex4"></div>

<script type="text/javascript">
$('#paging-ex4').paging({
    // dom 用以指定分页插件显示的 DOM 结构内容，
    // p 代表分页内容
    // i 代表总数信息 info
    // c 代表页码信息 currentPageInfo
    // n 代表每页显示条目数选择框 numbers
    dom: 'pnci',
    info: true,
    currentPageInfo: true,
    numbers: true,
    totalCount: 50
});
</script>

改变每页显示条目数

配置项方法 onPageNumberChanged 在切换每页显示条目数触发执行。

<div id="paging-ex5-content">
  <p>page content with 5 items.</p>
</div>
<div id="paging-ex5"></div>

<script type="text/javascript">
$('#paging-ex5').paging({
    dom: 'pnci',
    info: true,
    currentPageInfo: true,
    numbers: true,
    onPageNumberChanged: function(evt, e, oldNum) {
        var newNum = $(e.target).val() || oldNum;
        $('#paging-ex5-content').html(
            '<p>page content with ' + newNum + ' items.</p>'
        );
    },
    totalCount: 50
});  
</script>

水平对齐方式

通过配置项 alignment 可以定义分页显示的水平对齐方式。

<div id="paging-ex6"></div>

<script type="text/javascript">
$('#paging-ex6').paging({
    alignment: "center", // 或居右对齐 "right"
    totalCount: 50
});
</script>

其他尺寸

通过配置项 size 可以定义分页以其他尺寸显示。

<div id="paging-ex7"></div>

<script type="text/javascript">
$('#paging-ex7').paging({
    size: "large", // 或更小尺寸 "small"
    totalCount: 50
});
</script>

工具提示

通过配置项 tooltip 可以定义是否以工具提示的方式显示页码按钮的标题提示。

<div id="paging-ex8"></div>

<script type="text/javascript">
$('#paging-ex8').paging({
    tooltip: true,
    totalCount: 50
});
</script>