浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍

此插件是jquery的ajax分页插件。分页切换时无刷新也无延迟，因为是一次性加载的。如果你用到此插件作分页的时候，涉及到的数据量大，建议不要使用此插件，因为加载慢会导致用户体验不好！

插件使用

此插件使用比较简单。主要引入以下文件就可以用了 
1.jquery.js依赖库 
2.pagination.css 这个主要是样式，我们在元素使用的时候将分页列表放在class类为pagination的标签内即可

<div class='pagination'></div>

 

3.jquery.pagination.js 分页的主要骨架

参数说明 
可以右击下面的参数图片表，选择在新标签页中打开，即可看到大图

使用方法

    $("#Pagination").pagination(pageCount, {
        num_edge_entries: 2,
        num_display_entries: 4
        callback: pageselectCallback,
        items_per_page:10,
        prev_text: "<上一页",
        next_text: "下一页>"
    });

 

上面代码中的pageCount一般是从后台返回的总的数据条数，也就是你一共有多少条数据。num_dege_entries:2表示首尾两侧分页显示2个。num_display_entries:4表示的是连续分页显示的主体数目，item_per_page:每页显示的列表项为10个。callback:pageselectCallback为回调函数。prev_text和next_text为前一页下一页按钮上的显示文字，默认的话是Prev 和 Next。

主要代码与效果展示

1.效果图（可以右击下面的图片，选择在新标签页中打开，即可看到大图） 

2.主要代码

    //首次查询： 
    offline_mark = keeper_offline("1");
    if (offline_mark != false) {
        offlinePageMark();//分页查询
    }
    //--分页
    function offlinePageMark(){
        $("#offlinePage").pagination(offline_mark,        {
            num_edge_entries: 1, //边缘页数     
            num_display_entries: 5,//主体页数
            callback: offlinePageCallback,
            items_per_page: 2, //每页显示2项
            prev_text: "<上一页",
            next_text: "下一页>"
        });
    }

    function offlinePageCallback(page_index, jq) {
        var page_index = parseInt(page_index + 1);
        keeper_offline(page_index);
        return false;
    }
    function keeper_offline(pageStr){
        var offline_mark = false;
        var params={};
        params.helperId=helperId;
        params.homeStatus = "offline";
        params.page = pageStr;      
        $.ajax({
                type: 'post',
                dataType: 'json',
                async:true,
                url: house_keeperURL,
                data:{params:JSON.stringify(params)},
                success: function (result) {
                    if (result.retCode=="0000"){
                        offline_mark = result.pageCount;
                        //列表内容展示代码集，太多了，就省略了，根据各自需求去展示自己的内容就可以了                                             
                    }else{                              
                    }
                }
            })
            return offline_mark;
    }

 

总结：

jquery pagination 是一个很好用的分页插件，展示的效果也是能适应大多需求的，样式的话也可以自己去改她的css就可以了。上手极其容易。我刚始接触分页的时候，并没有用这个插件。而是自己去写的一些共通的方法，代码也不多。后来，有了她，我就直接用她了。不过，我现在也不用她去分页了，现在用的就是layui的分页插件。如果还有不懂的童鞋，可以加我vx:1048725765。可以给我留言你的问题。

这里有更好的分页方法 浅谈js分页的几种方法 分页方法千万中，我现在唯爱这第3种方法！