pagination 使用起来非常的方便.
第一步: 引入分页需要的 JS(jQuery.pagination.JS)和 CSS(pagination.CSS)
pagination 插件下载地址
第二步: 将分页条容器写到页面里(固定代码)
- <div class="pages">
- <div id="Pagination"></div>
- <div class="searchPage" id="searchPage" name="searchPage">
- </div>
- </div>
第三步: 生成分页条方法是 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 = Windows.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) {}
- }
- });
- }
- Windows.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="#" rel="external nofollow">行业动态</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>
来源: https://www.jb51.net/article/149391.htm