jquery分頁(yè)插件pagination使用教程
pagination使用起來(lái)非常的方便。
第一步:引入分頁(yè)需要的js(jquery.pagination.js)和css(pagination.css)
pagination插件下載地址
第二步:將分頁(yè)條容器寫到頁(yè)面里(固定代碼)
<div class="pages"> <div id="Pagination"></div> <div class="searchPage" id="searchPage" name="searchPage"> </div> </div>
第三步:生成分頁(yè)條方法是pagination,例如$("#page").pagination(100); 傳入總數(shù)目
例如:
$("#Pagination").pagination(json.data.count, { items_per_page:5, callback:pageselectCallback });
第四步:給分頁(yè)加回調(diào),點(diǎn)擊第幾頁(yè)的請(qǐng)求寫到回調(diào)函數(shù)里。
回調(diào)函數(shù)帶參數(shù):page_index(頁(yè)數(shù)索引,從0開始,第一頁(yè)index為0),此值插件自動(dòng)傳入。
jquery分頁(yè)插件pagination示例(ajax應(yīng)用)示例:
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>發(fā)布于:</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>頁(yè)</span>'; $("#searchPage").append(pageObj); $("#Pagination").pagination(json.data.count, { items_per_page: 5, //pageSize每頁(yè)最多顯示多少條 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>發(fā)布于:</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"> 首頁(yè) > <a href="#" rel="external nofollow" >行業(yè)動(dòng)態(tài)</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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - Pagination分頁(yè)
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- jquery pagination插件實(shí)現(xiàn)無(wú)刷新分頁(yè)代碼
- jquery分頁(yè)插件jquery.pagination.js使用方法解析
- jquery.pagination.js 無(wú)刷新分頁(yè)實(shí)現(xiàn)步驟分享
- jQuery EasyUI Pagination實(shí)現(xiàn)分頁(yè)的常用方法
- Jquery 分頁(yè)插件之Jquery Pagination
- jQuery Pagination分頁(yè)插件使用方法詳解
- jquery.pagination.js分頁(yè)使用教程
- jQuery pagination分頁(yè)示例詳解
相關(guān)文章
S2SH整合JQuery+Ajax實(shí)現(xiàn)登錄驗(yàn)證功能實(shí)現(xiàn)代碼
登錄驗(yàn)證,在項(xiàng)目開發(fā)中很常用的,尤其是這一塊非常有利于用戶體驗(yàn),感興趣的朋友可以參考下,或許對(duì)你學(xué)習(xí)登陸驗(yàn)證有所幫助,好了閑話不多說了,看代碼2013-01-01基于jquery-resizable創(chuàng)建可調(diào)整大小的表(table)格
本文介紹如何基于jquery-resizable實(shí)現(xiàn)可調(diào)整表格(table)列寬的代碼,需要的朋友可以參考下2023-06-06基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作的相關(guān)資料,利用jquery實(shí)現(xiàn)了對(duì)一個(gè)表單字段格式的即時(shí)檢查,感興趣的小伙伴們可以參考一下2016-05-05jQuery Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)
下面小編就為大家?guī)?lái)一篇jQuery Ajax 實(shí)例代碼 ($.ajax、$.post、$.get)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04jQuery實(shí)現(xiàn)dialog設(shè)置focus焦點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)dialog設(shè)置focus焦點(diǎn)的方法,涉及jQuery針對(duì)dialog的操作技巧,需要的朋友可以參考下2015-06-06