jQuery 分页插件Jquery Pagination Plugin

所属分类：导航-分页

48518 343 查看评论 (9)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：JqueryPagination是一个轻量级的jquery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据，自定义请求参数，提供多种方法，事件和回调函数，功能全面的分页插件。

jQuery 分页插件Jquery Pagination Plugin Version : 1.2.7

V1.2.7更新日志 :

修复.page( 'remote' )时，total返回0之后的请求无法显示问题

<link href="jquery.pagination.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery.pagination.js"></script>
<!-- HTML -->
<div id="page" class="m-pagination"></div>
<!-- JavaScript -->
<script type="text/javascript">
    $("#page").page({
        showInfo: true,
        showJump: true,
        showPageSizes: true,
        remote: {
            url: '/GetPageData',
            beforeSend: function(XMLHttpRequest){
                //...
            },
            success: function (data, pageIndex) {
                $("#eventLog").append('pageIndex : ' + pageIndex + ' ,  remote callback : ' 
                    + JSON.stringify(data) + '<br />');
            },
            complete: function(XMLHttpRequest, textStatu){
                //...
            }
        }
     }).on("pageClicked", function (event, pageIndex) {
         $("#eventLog").append('EventName = pageClicked , pageIndex = ' + pageIndex + '<br />');
     }).on('jumpClicked', function (event, pageIndex) {
         $("#eventLog").append('EventName = jumpClicked , pageIndex = ' + pageIndex + '<br />');
     }).on('pageSizeChanged', function (event, pageSize) {
         $("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + pageSize + '<br />');
     });
</script>

Option

参数	数据类型	默认值	dataAPI	描述
total	number	0	data-total	总数据数
pageSize	number	10	data-page-size	每页显示数据条数
pageBtnCount	number	11	data-page-btn-count	显示分页按钮数量（推荐设置奇数）
showFirstLastBtn	boolean	true	data-show-first-last-btn	是否显示首页和尾页
firstBtnText	string	null	data-first-btn-text	自定义首页按钮显示内容
lastBtnText	string	null	data-first-btn-text	自定义首页按钮显示内容
prevBtnText	string	?	data-first-btn-text	自定义上一页按钮显示内容
nextBtnText	string	?	data-first-btn-text	自定义下一页按钮显示内容
loadFirstPage	boolean	true	data-load-first-page	是否加载第一页数据（如果设置为false，需传入total）
showInfo	boolean	false	data-show-info	是否显示分页信息
infoFormat	string	{start} ~ {end} of {total} entires	data-info-format	自定义分页信息（{start}，{end}，{total}会替换成对应数值）
showJump	boolean	false	data-show-jump	是否显示跳转按钮
jumpBtnText	string	Go	data-jump-btn-text	跳转按钮显示内容
showPageSizes	boolean	false	data-show-page-sizes	是否显示每页数据数按钮
pageSizeItems	array	[5, 10, 15, 20]	data-page-size-items	自定义每页数据数
remote	object		null	ajax获取数据配置

Method

.page( 'remote' , [ pageIndex ] , [ params ] )

加载分页，可选参数pageIndex（默认：当前页），可选参数params（请求参数，将与原请求参数合并，所以只需传入修改的请求参数即可）

.page( 'destroy' )

销毁分页

Event

<script type="text/javascript">
$("#page").page().on("pageClicked", function (event, pageNumber) {
    //...
}).on("jumpClicked", function (event, pageNumber) {
    //...
}).on("pageSizeChanged", function (event, pageSize) {
    //...
}
</script>

全局配置

如果多页页面需要配置相同的参数，可以把全局设置配在公共javascript中。

<script type="text/javascript">
$.fn.page.defaults = {
    pageSize: 10,
    pageBtnCount: 9,
    showFirstLastBtn: true,
    firstBtnText: null,
    lastBtnText: null,
    prevBtnText: "&laquo;",
    nextBtnText: "&raquo;",
    loadFirstPage: true,
    showInfo: true,
    infoFormat: '{start} ~ {end} of {total} entires',
    showJump: false,
    jumpBtnText: 'Go',
    showPageSizes: false,
    pageSizeItems: null
};
</script>

jquery实现添加自定义标签代码

24款超实用的Web 2.0风格翻页代码