jQuery分页插件sPage(原创)


7212 | 3932  | 1232 | 添加收藏 上一个 下一个
资源描述 : 轻巧简洁的jQuery分页插件
jQuery分页插件sPage(原创)
资源详情

1.优化分页连续点击会出现文本被选中的现象


2.修复回车跳页多次触发的问题


3.增加省略号快进快退功能


sPage分页插件使用说明


参数默认值备注
page必填当前页码
total必填数据总条数
pageSize10每页显示多少条数据
totalTxt共{total}条数据总条数文字描述,{total}为占位符,默认"共{total}条"
noDatafalse没有数据时是否显示分页,默认false不显示,true显示第一页
showTotalfalse显示总条数
showSkipfalse显示跳页
showPNtrue显示上下翻页按钮
prevPage上一页上翻页文字描述
nextPage下一页下翻页文字描述
fastForward0快进快退页数,0表示不开启省略号快进快退功能
backFun点击分页按钮回调函数,返回当前页码

ajax调用示例
 function ajaxPage(page) {
     var p = page || 1;
     $.ajax({
         type: "POST",
         url: "https://www.test.com/test",
         data: {
             page: p,
             pageSize: 10
         },
         dataType: "json",
         success: function(data) {
             //数据处理           
             // ...          
             // 调用分页插件          
             $("#myPage").sPage({
                 page: p, //当前页码              
                 pageSize: 10, //每页显示多少条数据,默认10条               
                 total: data.total, //数据总条数,后台返回              
                 backFun: function(page) { //点击分页按钮回调函数,返回当前页码                    
                     ajaxPage(page);
                 }
             });
         },
         error: function(e) {
             console.log(e);
         }
     });
 }

sPage分页插件使用方法


1,引入样式文件,可以根据实际需要修改插件样式


<link rel="stylesheet" type="text/css" href="./jquery.sPage.css">

2,引入jQuery.js文件


<script src="./jquery.min.js"></script>

3,引入sPage插件


<script src="./jquery.sPage.js"></script>

4,调用


<div id="myPage"></div>
$("#myPage").sPage({
    page:1,//当前页码,必填
    total:150,//数据总条数,必填
    pageSize:10,//每页显示多少条数据,默认10条
    totalTxt:"共{total}条",//数据总条数文字描述,{total}为占位符,默认"共{total}条"
    showTotal:true,//是否显示总条数,默认关闭:false
    showSkip:true,//是否显示跳页,默认关闭:false
    showPN:true,//是否显示上下翻页,默认开启:true
   prevPage:"上一页",//上翻页文字描述,默认“上一页”
    nextPage:"下一页",//下翻页文字描述,默认“下一页”
   backFun:function(page){
        //点击分页按钮回调函数,返回当前页码
        console.log(page);
    }
});


指尖代码 资源每日更新 www.zjdaima.com