jQuery分页插件twbsPagination

来源:转载

说明:这里主要介绍jQuery的分页插件twbsPagination。当然了还有其他的分页插件,感觉上这个插件还是比较简单易用的。

步骤一:建立page.jsp页面,引用jquery.twbsPagination.js,page.js



注意:这里只绘制了一个分页的Div(首页,上一页,下一页,末页)其他的内容自行添加即可。

步骤三:建立page.js文件

var page=1;pagesize=2;//默认加载显示列表
var condition = '';//查询条件
var state=0;//0:所用用户,1:当前用户

$(function(){
//默认加载
IninPage();
});

//查询列表分页初始化
function IninPage(){
$('#visible-pages-example-on').remove();
$("#pagination-on").append('

    ');
    state = 0;
    $.ajax({
    type : "POST",
    async: false,
    url : "../../xxxxxxxxx/xxxxxxxxx.do",
    dataType : "JSON",
    data : {condition:condition,user_state:state},
    success : function(msg) {
    var total = msg.total;
    var pagecount=Math.floor(total/pagesize)+(total%pagesize!=0?1:0);
    pagecount=pagecount==0?1:pagecount;
    $('#visible-pages-example-on').twbsPagination({
    totalPages: pagecount,
    visiblePages: pagecount<2?pagecount:2,
    version: '1.1',
    first:"首页",
    prev:"上一页",
    next:"下一页",
    last:"末页",
    loop:false,
    href:"javascript:void(0)",
    onPageClick:function(event,index){
    page=index;
    getInfoList();//数据查询列表
    }
    });

    },error:function(){
    alertLayer("操作失败","error");
    }
    });
    }


    //获取数据查询列表
    function getInfoList(){
    state = 0;
    $.ajax({
    type : "POST",
    url : "../../xxxxxxxxx/xxxxxxxxx.do",
    dataType : "json",
    async:false,
    yabo亚博真人娱乐 data : {condition:condition,page:page,pagesize:pagesize,user_state:state},
    success : function(msg) {
    //该处省略数据显示部分代码
    }
    });
    }

    注意:page.js加载时我们要初始化上面几个必要的参数。

    步骤四:ajax查询分页数据条数

    IninPage();

    步骤五:ajax查询分页数据列表

    getInfoList();

    总结:我们只需要提供几个必要的参数page(显示第几页),pagesize(每页显示条数),查询记录的条数、查询记录的列表即可实现分页功能。

    在这个示例中我省略了数据查询部分,在具体应用的时候只需查询记录数total,和记录列表list即可。

    ?

    分享给朋友:
    您可能感兴趣的文章:
    随机阅读: