jquery分页插件pagination教程

pagination使用起来非常的方便。

第一步：引入分页需要的js（jquery.pagination.js）和css(pagination.css)

pagination插件下载地址：http://download.csdn.net/download/qq_33556185/9427446

第二步：将分页条容器写到页面里（固定代码）

  

                   

                   

                   

    

第三步：生成分页条方法是pagination，例如$("#page").pagination(100); 传入总数目

例如：

  $("#Pagination").pagination(json.data.count, {
                     items_per_page:5,
                     callback:pageselectCallback
   });

第四步：给分页加回调，点击第几页的请求写到回调函数里。

回调函数带参数：page_index（页数索引，从0开始，第一页index为0），此值插件自动传入。

jquery分页插件pagination示例（ajax应用）示例：

javascript代码：

     var sessionStorage = window.sessionStorage;
    var aid = (JSON.parse(sessionStorage.getItem("user"))).id;
    var articObj = "";
    var articContent = "";
    var pageObj = "";
    data["pageSize"] = 5;
    data["pageNow"] = 1;

    function getMyArtic() {
        if (userIdid == "aid") {
            data["aid"] = aid;
        } else {
            data["userId"] = aid;
        }
        if (document.getElementById("searchTime").value == "") {
            document.getElementById("searchTime").value = myDate.toLocaleDateString();
        }
        data["createTime"] = document.getElementById("searchTime").value;
        jQuery.support.cors = true;
        $.ajax({
            url: serverAddress,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            async: true,
            cache: false,
            type: "post",
            dataType: "json",
            data: data,
            success: function(json) {
                $("#Pagination").empty();
                $("#list_container").empty();
                $("#searchPage").empty();
                if (json.code == 1) {
                    sessionStorage.setItem("artic", JSON.stringify(json.data));
                    if (json.data.recordCount > 0) {
                        for (var i = 0; i < json.data.recordCount; i++) {
                            articContent = json.data.list[i].content;
                            var regEx = /<[^>]*>/g;
                            articContent = articContent.replace(regEx, "");
                            if (articContent.length > 100) {
                                articContent = articContent.substring(0, 100) + "...";
                            }
                            var create_Time = json.data.list[i].createTime;
                            if (create_Time != null || create_Time != "") {
                                create_Time = create_Time.substring(0, 19);
                            }
                            articObj = "
" + json.data.list[i].title +
                                "
" + articContent + "
" +
                                "
" +
                                "
发布于：" + create_Time + "
";
                            $("#list_container").append(articObj);
                            // alert(userIdid)
                            var gotoId = "goto" + json.data.list[i].id;
                            if (userIdid == "userId") { //收藏的文章
                                document.getElementById(gotoId).href = "ArticleDetail.html?id=" + json.data.list[i].id;
                                $(".img_delete").css("display", "none");
                            } else if (userIdid == "aid") { //我的文章
                                $(".img_delete").css("display", "block");
                                document.getElementById(gotoId).href = "editArticle.html?id=" + json.data.list[i].id;
                            }
                        }
                        pageObj = '共' + json.data.totalPage + '页';
                        $("#searchPage").append(pageObj);
                        $("#Pagination").pagination(json.data.count, {
                            items_per_page: 5, //pageSize每页最多显示多少条
                            callback: pageselectCallback
                        });
                    }
                    reSetIframeHeight();
                } else if (json.code == 0) {}
            }
        });
    }
    window.onload = function() {
        getMyArtic();
        personalityCenterRefresh();
    }
 function pageselectCallback(page_index) {
        var createTime = document.getElementById("searchTime").value;
        if (createTime.length == 0 || createTime == null) {
            createTime = myDate.toLocaleDateString();
        }
        if (userIdid == "aid") {
            data["aid"] = aid;
        } else {
            data["userId"] = aid;
        }
        data["pageNow"] = parseInt(page_index) + 1;
        jQuery.support.cors = true;
        $.ajax({
            url: serverAddress,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            async: true,
            cache: false,
            type: "post",
            dataType: "json",
            data: data,
            success: function(json) {
                $("#list_container").empty();
                if (json.code == 1) {
                    if (json.data.recordCount > 0) {
                        sessionStorage.setItem("artic", JSON.stringify(json.data));
                        for (var i = 0; i < json.data.recordCount; i++) {
                            articContent = json.data.list[i].content;
                            //alert(articContent);
                            var regEx = /<[^>]*>/g;
                            articContent = articContent.replace(regEx, "");
                            if (articContent.length > 100) {
                                articContent = articContent.substring(0, 100) + "...";
                            }
                            var create_Time = json.data.list[i].createTime;
                            if (create_Time != null || create_Time != "") {
                                create_Time = create_Time.substring(0, 19);
                            }
                            articObj = "
" + json.data.list[i].title +
                                "
" + articContent + "
" +
                                "
" +
                                "
发布于：" + create_Time + "
";
                            $("#list_container").append(articObj);
                        }
                    }
                } else if (json.code == 0) {}
            }
        });
    }

html代码：

    

        

            

              首页 > 行业动态