jquery分页插件pagination教程

来源：互联网发布：期货炒股软件编辑：程序博客网时间：2024/05/15 15:27

pagination使用起来非常的方便。

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

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

第三步：生成分页条方法是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 = "<div class=\"list\"><div class=\"title_list\"><label class=\"pre blue\"><a onclick='clickHref(this.href)' id=\"goto" + json.data.list[i].id + "\" class=\"pre blue\" href=\"\" \">" + json.data.list[i].title +                                "</a></label></div><div class=\"content\">" + articContent + "</div>" +                                "<div class=\"show_last\"><div class='img_delete'><img class='img_delete' alt=\"删除\" title=\"删除\" src=\"image/lajixiang_03.png\" href=\"#\" onclick=\"deleteArticle(" + json.data.list[i].id + ");\"/></div>" +                                "<div><label>发布于：</label><label class=\"blue\">" + create_Time + "</label></div></div></div>";                            $("#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 = '<span class="page-sum">共<strong class="allPage">' + json.data.totalPage + '</strong>页</span>';                        $("#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 = "<div class=\"list\"><div class=\"title_list\"><label class=\"pre blue\"><a class=\"pre blue\" href=\"#\" onclick=\"javascript:location.href='editArticle.html?id=" + json.data.list[i].id + "'\">" + json.data.list[i].title +                                "</a></label></div><div class=\"content\">" + articContent + "</div>" +                                "<div class=\"show_last\"><div><img alt=\"删除\" title=\"删除\" src=\"image/lajixiang_03.png\" href=\"#\" onclick=\"deleteArticle(" + json.data.list[i].id + ");\"/></div>" +                                "<div><label>发布于：</label><label class=\"blue\">" + create_Time + "</label></div></div></div>";                            $("#list_container").append(articObj);                        }                    }                } else if (json.code == 0) {}            }        });    }

html代码：

<body>    <div class="list" id="mid">        <div class="news">            <div id="trend_top">              首页 > <a href="#">行业动态</a>            </div>            <div id="div_mid">            </div>            <div id="bottom_page">                <div class="pages">                    <div id="Pagination"></div>                    <div class="searchPage" id="searchPage" name="searchPage">                    </div>                </div>            </div>        </div>    </div></body>

1 0