spage's Introduction

sPage

jquery分页插件

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.min.js"></script>

4，参数说明和使用示例

参数	默认值	备注
page	必填	当前页码
total	必填	数据总条数
pageSize	10	每页显示多少条数据
totalTxt	共{total}条	数据总条数文字描述，{total}为占位符，默认"共{total}条"
noData	false	没有数据时是否显示分页，默认false不显示，true显示第一页
showTotal	false	显示总条数
showSkip	false	显示跳页
showPN	true	显示上下翻页按钮
prevPage	上一页	上翻页文字描述
nextPage	下一页	下翻页文字描述
fastForward	0	快进快退页数，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);
        }
    });
}

Recommend Projects