jquery写的一个分页grid(非jqGrid插件)
2017-04-13 10:56
459 查看
自己写的一个带有删除和修改功能的分页grid,导航栏是动态生成的,可以自己设定每页显示多少条记录,以及导航栏一次最多显示n页,点击【次へ】显示接下来的n页。因为是纯jquery手写的(不是用开源插件),写的不算好,但还是在这里做个备份吧
jsp:
js:
action:
大小: 67.4 KB
查看图片附件
jsp:
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户列表</title> <link rel="stylesheet" type="text/css" href="../css/usermgr/userlist.css"> <script language="JavaScript" type="text/javascript" src="../js/jquery/jquery-1.8.0.js"></script> <script language="JavaScript" type="text/javascript" src="../js/common/common.js"></script> <script language="JavaScript" type="text/javascript" src="../js/usermgr/userlist.js"></script> <style type="text/css"> </style> </head> <body> <% int totalPage = Integer.parseInt((String)request.getAttribute("totalPage")); int curPage = Integer.parseInt((String)request.getAttribute("pageIndex")); int displayNum = Integer.parseInt((String)request.getAttribute("displayNumForPageNavi")); // 以下のstartIndexとendIndexの計算ロジックはuserlist.jsでのstartIndexとendIndexの計算ロジックと同様です int startIndex = curPage % displayNum == 0 ? (curPage - displayNum + 1) : (curPage / displayNum) * displayNum + 1; int endIndex = totalPage >= displayNum ? (displayNum + startIndex <= totalPage ? displayNum + startIndex : totalPage + 1) : totalPage + 1; %> <input type="hidden" id="hidden_displayNum" value="<s:property value="displayNumForPageNavi"/>"> <br><br><br><br><br> <center> <table> <tr> <td> <div id="pageNaviDiv"> <table id="pageNavi"> <tr> <td><label>Page:</label></td> <td><label id="curPage"><s:property value="pageIndex"/></label></td><td>/</td><td><label id="allPage"><%=totalPage %></label></td> <td><a href="javascript:void(0)" id="first">最前</a></td> <td><a href="javascript:void(0)" id="prev">前へ</a></td> <% for (int i = startIndex; i < endIndex; i ++) { if (i == startIndex) {%> <td><a href="javascript:void(0)" class="page" id="firstNavi"><%=i %></a></td> <% } else if (i != startIndex && i == endIndex - 1) {%> <td><a href="javascript:void(0)" class="page" id="lastNavi"><%=i %></a></td> <% } else {%> <td><a href="javascript:void(0)" class="page"><%=i %></a></td> <% } %> <% } %> <td><a href="javascript:void(0)" id="next">次へ</a></td> <td><a href="javascript:void(0)" id="end">最後</a></td> <td><input id="jumpToPage" type="text" style="width:26px;height:16px;"></td> </tr> </table> </div> </td> </tr> <tr> <td> <div> <table id="contentTb"> <tr id="contentTb_th"> <th>用户ID</th> <th>姓名</th> <th>EMAIL地址</th> <th>密码</th> <th>createTransNo</th> <th>updateTransNo</th> <th>修正</th> <th>删除</th> </tr> <s:iterator value="userlist" id="list"> <tr id="contentTb_tr_<s:property value="#list.userId"/>"> <td><input id="userId<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.userId"/>" style="width:5em;" readonly="readonly;"></td> <td><input id="nickname<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.nickname"/>" style="width:8em;" readonly="readonly;"></td> <td><input id="email<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.email"/>" style="width:15em;" readonly="readonly;"></td> <td><input id="password<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.password"/>" style="width:15em;" readonly="readonly;"></td> <td><input id="createTransNo<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.createTransNo"/>" style="width:9em;" readonly="readonly;"></td> <td><input id="updateTransNo<s:property value="#list.userId"/>" class="input<s:property value="#list.userId"/>" type="text" value="<s:property value="#list.updateTransNo"/>" style="width:9em;" readonly="readonly;"></td> <td> <a id="change<s:property value="#list.userId"/>" href="javascript:void(0)" onclick="change(<s:property value="#list.userId"/>)">修正</a> <a id="submit<s:property value="#list.userId"/>" href="javascript:void(0)" style="display:none;" onclick="submit(<s:property value="#list.userId"/>)">確認</a> </td> <td><a id="delete<s:property value="#list.userId"/>" href="javascript:void(0)" onclick="deleteFunction(<s:property value="#list.userId"/>)">削除</a></td> </tr> </s:iterator> </table> </div> </td> </tr> </table> </center> <br> <br> <br> <br> <br> <center><table id="testRemote"><tr><td/></tr></table></center> <center><div id="pager" style="height:4em;"></div></center> <button id="aa">test</button> </body> </html>
js:
$(document).ready(function() { $("#aa").button(); // init css control function styleFunc(); // clickToPage event $(".page").click(clickToPage); function clickToPage() { var pageInfo = "pageIndex=" + $.trim($(this).text()); var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } /** clickToPage Response function */ // $(document).ready(function(){});外部のdeleteFunctionResponseもコールできる為、clickToPageResponseをグローバル関数にする window.clickToPageResponse = function(data) { /** ======================== refresh page navi START ========================== */ // id=jumpToPageの<input>のwidthとheightを取得する var jumpToPageWidth = $("#jumpToPage").css("width"); var jumpToPageHeight = $("#jumpToPage").css("height"); // IEはFF、chromeと違う為、ブラウザーを判断し、widthとheightを処理する if($.browser.msie) { jumpToPageWidth = parseInt(jumpToPageWidth.substring(0,2)) + 6; jumpToPageHeight = parseInt(jumpToPageHeight.substring(0,2)) + 6; }else if($.browser.opera) { }else if($.browser.mozilla) { }else if($.browser.safari) { }else { } $("#pageNavi").empty(); // count of all record var allCount = data.allCount; // record count of per page var countOfPerPage = data.countOfPerPage; // ページナビで表示するリンクの数 var displayNum = data.displayNumForPageNavi; // total number of page var totalPage = data.totalPage; var naviHtml = ""; if (allCount != 0) { // current page var curPage = data.pageIndex; naviHtml += "<tr><td><label>Page:</label></td>" + "<td><label id='curPage'>" + curPage + "</label></td>" + "<td>/</td>" + "<td><label id='allPage'>" + totalPage + "</label></td>" + "<td><a href='javascript:void(0)' id='first'>最前</a></td>" + "<td><a href='javascript:void(0)' id='prev'>前へ</a></td>"; // 以下のstartIndexとendIndexの計算ロジックはuserlist.jspでのstartIndexとendIndexの計算ロジックと同様です // startIndex:1,11,21,... var startIndex = curPage % displayNum == 0 ? (curPage - displayNum + 1) : Math.floor(curPage / displayNum) * displayNum + 1; var endIndex = totalPage >= displayNum ? (displayNum + startIndex <= totalPage ? displayNum + startIndex : totalPage + 1) : totalPage + 1; for (var i = startIndex; i < endIndex; i ++) { if(i == startIndex) { naviHtml += "<td><a href='javascript:void(0)' class='page' id='firstNavi'>" + i + "</a></td>"; } else if(i != startIndex && i == endIndex - 1) { naviHtml += "<td><a href='javascript:void(0)' class='page' id='lastNavi'>" + i + "</a></td>"; } else { naviHtml += "<td><a href='javascript:void(0)' class='page'>" + i + "</a></td>"; } } naviHtml += "<td><a href='javascript:void(0)' id='next'>次へ</a></td>" + "<td><a href='javascript:void(0)' id='end'>最後</a></td>" + "<td><input id='jumpToPage' type='text' style='width:" + jumpToPageWidth + ";height:" + jumpToPageHeight + ";'></td></tr>"; } $("#pageNavi").append(naviHtml); // ページナビをリフレッシュした後ページリンクにclickToPage関数を付ける $(".page").click(clickToPage); // ページナビをリフレッシュした後「前へ」イベントを付ける $("#prev").click(previous); // id=nextの<a>がある場合 if (totalPage != 1 && totalPage != 0) { // ページナビをリフレッシュした後「次へ」イベントを付ける $("#next").click(next); } // ページナビをリフレッシュした後「最前」イベントを付ける $("#first").click(first); // ページナビをリフレッシュした後「最後」イベントを付ける $("#end").click(end); // ページナビをリフレッシュした後「page jump」enterイベントを付ける $("#jumpToPage").keydown(jumpToPage); /** ======================== refresh page navi END ========================== */ /** ======================== refresh userInfo table START ========================== */ var htmlStr = "<tr id='contentTb_th'>"; // ループして<th>を生成する $.each($("#contentTb_th th"), function() { htmlStr += "<th>" + $(this).text() + "</th>"; }); // <tr>を閉じる htmlStr += "</tr>"; $("#contentTb").empty(); // ユーザーリストを取得する var userlist = data.userlist; // ループ(i:インデックス;n:内容) $.each(userlist, function(i, n){ htmlStr += "<tr id='contentTb_tr_" + n.userId + "'>" + " <td><input id='userId" + n.userId + "' type='text' value='" + n.userId + "' style='width:5em;' readonly='readonly'></td>" + " <td><input id='nickname" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.nickname + "' style='width:8em;' readonly='readonly'></td>" + " <td><input id='email" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.email + "' style='width:15em;' readonly='readonly'></td>" + " <td><input id='password" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.password + "' style='width:15em;' readonly='readonly'></td>" + " <td><input id='createTransNo" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.createTransNo + "' style='width:9em;' readonly='readonly'></td>" + " <td><input id='updateTransNo" + n.userId + "' class='input" + n.userId + "' type='text' value='" + n.updateTransNo + "' style='width:9em;' readonly='readonly'></td>" + " <td>" + " <a id='change" + n.userId + "' href='javascript:void(0)' onclick='change(" + n.userId + ")'>修正</a>" + " <a id='submit" + n.userId + "' href='javascript:void(0)' style='display:none;' onclick='submit(" + n.userId + ")'>確認</a>" + " </td>" + " <td><a id='delete" + n.userId + "' href='javascript:void(0)' onclick='deleteFunction(" + n.userId + ")'>削除</a></td>" + "</tr>"; }); $("#contentTb").append(htmlStr); /** ======================== refresh userInfo table END ========================== */ // init css control function styleFunc(); }; /** 次へイベント */ $("#next").click(next); // 次へイベントロジックは基本的に今ナビで表示してる最後のページの次のページのclickToPageイベントの再発行 function next() { // totalPage var totalPage = $("#allPage").text(); // jspから取得したページナビで表示するリンクの数 var displayNum = $("#hidden_displayNum").val(); // 今ナビで表示してる最前のページ var firstNavi = parseInt($.trim($("#firstNavi").text())); // id=lastNaviの<a>は必ず存在してる場合 if (firstNavi != totalPage && displayNum > 1) { // 今ナビで表示してる最後のページ var lastNavi = parseInt($.trim($("#lastNavi").text())); if (lastNavi < totalPage) { // pageIndexはlastNaviの次のページ var pageIndex = lastNavi + 1; var pageInfo = "pageIndex=" + pageIndex; var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } else { alert("当前ページは最後です"); } // この場合はnextページを表示する動作と同様 } else if (displayNum = 1) { if (firstNavi < totalPage) { var pageIndex = firstNavi + 1; var pageInfo = "pageIndex=" + pageIndex; var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } else { alert("当前ページは最後です"); } } else { alert("当前ページは最後です"); } } /** 前へイベント */ $("#prev").click(previous); function previous() { // 今ナビで表示してる最前のページ var firstNavi = parseInt($.trim($("#firstNavi").text())); // totalPage:jspから取得する var totalPage = $("#allPage").text(); // jspから取得したページナビで表示するリンクの数 var displayNum = $("#hidden_displayNum").val(); if (firstNavi != 1) { // pageIndexはfirstNaviの前displayNumページ var pageIndex = firstNavi - displayNum; var pageInfo = "pageIndex=" + pageIndex; var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } else { alert("当前ページは最前です"); } } /** 最前イベント */ $("#first").click(first); function first() { // curPage:jspから取得する var curPage = $("#curPage").text(); if (curPage <= 1) { alert("当前ページは最前です"); return ; } var pageIndex = 1; var pageInfo = "pageIndex=" + pageIndex; var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } /** 最後イベント */ $("#end").click(end); function end() { // totalPage:jspから取得する var totalPage = $("#allPage").text(); // curPage:jspから取得する var curPage = $("#curPage").text(); if (curPage == totalPage) { alert("当前ページは最後です"); return ; } var pageIndex = totalPage; var pageInfo = "pageIndex=" + pageIndex; var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } /** page jump enter イベント */ $("#jumpToPage").keydown(jumpToPage); function jumpToPage(e) { var curKey = e.which; if (curKey == 13) { // totalPage:jspから取得する var totalPage = $("#allPage").text(); var pageIndex = $(this).val(); // regular expression of integer var reg=/^[-+]?\d+$/; if (!reg.test(pageIndex)) { $(this).val(""); alert("正しいページナンバーを入力してください"); return; } if (pageIndex <= totalPage) { var pageInfo = "pageIndex=" + pageIndex; var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } else { $(this).val(""); alert("ページ上限を超えました"); } $("input[id='searchChtoEn']").click(); return false; } } /** ============================FUNCTIONS FOR CSS STYLE START ============================================= */ function styleFunc() { $("#first").mouseover(function() { $(this).addClass("mouseOverStyle"); }); $("#first").mouseout(function() { $(this).removeClass("mouseOverStyle"); }); $("#prev").mouseover(function() { $(this).addClass("mouseOverStyle"); var displayNum = $("#hidden_displayNum").val(); var hintStr = "前の" + displayNum + "ページ"; $(this).attr("title",hintStr); }); $("#prev").mouseout(function() { $(this).removeClass("mouseOverStyle"); }); $("#next").mouseover(function() { $(this).addClass("mouseOverStyle"); var displayNum = $("#hidden_displayNum").val(); var hintStr = "次の" + displayNum + "ページ"; $(this).attr("title",hintStr); }); $("#next").mouseout(function() { $(this).removeClass("mouseOverStyle"); }); $("#end").mouseover(function() { $(this).addClass("mouseOverStyle"); }); $("#end").mouseout(function() { $(this).removeClass("mouseOverStyle"); }); $(".page").mouseover(function() { $(this).css("background","#0073EA"); }); $(".page").mouseout(function() { // curPage:jspから取得する var curPage = $("#curPage").text(); var pageIndex = $(this).text(); if (pageIndex == curPage) { $(this).css("background","black"); } else { $(this).css("background","#5A5A5A"); } }); $("a[id^='change']").mouseover(function() { $(this).css("background","#0073EA"); }); $("a[id^='change']").mouseout(function() { $(this).css("background","#5A5A5A"); }); $("a[id^='submit']").mouseover(function() { $(this).css("background","#0073EA"); }); $("a[id^='submit']").mouseout(function() { $(this).css("background","#5A5A5A"); }); $("a[id^='delete']").mouseover(function() { $(this).css("background","#0073EA"); }); $("a[id^='delete']").mouseout(function() { $(this).css("background","#5A5A5A"); }); // delete the dotted line after <a> is clicked $("#pageNavi a").focus(function() { this.blur(); }); $("#contentTb a").focus(function() { this.blur(); }); $("#jumpToPage").attr("title","Enterキーでジャンプ"); // 一覧テーブルの偶数行のbackgroundを設定する $("#contentTb tr:even").css("background","#EEEEF0"); $("#contentTb tr:even td input").css("background","#EEEEF0"); // line highlight after mouse over $("#contentTb tr[id != contentTb_th]").mouseover(function() { var trId = $(this).attr("id"); $("#" + trId + " td input").css("background","#D0D1D1"); $(this).css("background","#D0D1D1"); }); $("#contentTb tr[id != contentTb_th]").mouseout(function() { var trId = $(this).attr("id"); var id = trId.substring(13); // 当前行のインデックスを取得する var index = $("#contentTb tr").index(this); if (index % 2 != 0) { $("input[id*=" + id + "]").css("background","white"); $(this).css("background","white"); } else { $("input[id*=" + id + "]").css("background","#EEEEF0"); $(this).css("background","#EEEEF0"); } }); // add fadeIn effect $("#contentTb tr[id ^= contentTb_tr_]").css("display","none"); $("#contentTb tr[id ^= contentTb_tr_]").fadeIn("normal"); $("#contentTb tr td input").mouseover(function() { $(this).attr("title",$(this).val()); }); // 当前ページのハイライト表示 // curPage:jspから取得する var curPage = $("#curPage").text(); $.each($(".page"), function() { var pageIndex = $(this).text(); if (pageIndex == curPage) { $(this).css("background","black"); } }); } /** ============================FUNCTIONS FOR CSS STYLE END =============================================== */ }); /** 修正イベント */ function change(id) { $("#change" + id).toggle(); $("#submit" + id).css("display","block"); $(".input" + id).removeAttr("readonly"); $(".input" + id).css("border","solid #0073EA 1px"); } /** 確認イベント */ function submit(id) { var userInfo = "userId=" + $('#userId' + id).val() + "&nickname=" + $('#nickname' + id).val() + "&email=" + $('#email' + id).val() + "&password=" + $('#password' + id).val() + "&createTransNo=" + $('#createTransNo' + id).val() + "&updateTransNo=" + $('#updateTransNo' + id).val(); var options = { url:'update.html', type:'POST', dataType:'json', data:userInfo, success: updateResponse, error: function(){ alert("サーバーで異常が発生しました"); } }; $.ajax(options); } //確認イベントのレスポンス関数 function updateResponse(result) { var id = result.userId; $("#submit" + id).toggle(); $("#change" + id).css("display","block"); if (result.updRst == 1) { $(".input" + id).attr("readonly","readonly"); $(".input" + id).css("border","solid 0px"); } else { alert("更新失敗しました"); } } /** 削除イベント */ function deleteFunction(id) { var hintStr = "userId=" + $('#userId' + id).val() + "のレコードを削除しますか?"; if (confirm(hintStr)) { var userInfo = "userId=" + $('#userId' + id).val() + "&nickname=" + $('#nickname' + id).val() + "&email=" + $('#email' + id).val() + "&password=" + $('#password' + id).val() + "&createTransNo=" + $('#createTransNo' + id).val() + "&updateTransNo=" + $('#updateTransNo' + id).val(); var options = { url:'delete.html', type:'POST', dataType:'json', data:userInfo, success: deleteFunctionResponse, error: function(){ alert("サーバーで異常が発生した為、削除失敗しました"); } }; $.ajax(options); } } //削除イベントのレスポンス関数 function deleteFunctionResponse(result) { if (result.delRst == 1) { // jspからcurrent pageを取得する var pageIndex = $("#curPage").text(); // jspからtotal pageを取得する var totalPage = $("#allPage").text(); // 当前ページで表示してるレコードの数 var trNum = $("tr[id^='contentTb_tr_']").length; // 当前ページでレコードが1件しか表示してない場合、このレコードの削除を成功した後、前の1ページをpageIndexとして再検索する if (totalPage != 1 && pageIndex == totalPage && trNum == 1) { pageIndex -= 1; // レコードは全部1件しかない場合、このレコードの削除を成功した後、テーブルを空にする } else if (totalPage == 1 && pageIndex == totalPage && trNum == 1){ $("tr[id^='contentTb_tr_']").empty(); return; } var pageInfo = "pageIndex=" + pageIndex; var options = { url:'clickToPage.html', type:'POST', dataType:'json', data:pageInfo, success: clickToPageResponse, error: function(){ alert("サーバーでエラーが発生しました"); } }; $.ajax(options); } else { alert("削除失敗しました"); } }
action:
public class UserPageSearchAction extends BaseAction { /** */ private static final long serialVersionUID = -6960892723912036191L; private UserService userService; private List<User> userlist; private int pageIndex; private int countOfPerPage = Constants.COUNT_OF_PERPAGE; private int allCount; private int totalPage; // ページナビで表示するリンクの数 private int displayNumForPageNavi = Constants.DISP_NUM_FOR_PAGE_NAVI; /** * @return the userRegisterService */ //从服务器取得list信息,供一览画面使用 /** * @return the userlist */ public List<User> getUserlist() { return userlist; } /** * @param userlist the userlist to set */ public void setUserlist( List<User> userlist ) { this.userlist = userlist; } @Override protected String executeProcess() throws Exception { // TODO Auto-generated method stub List<User> allUser = userService.getAllUser(); List<User> tmpUserList = new ArrayList<User>(); if(!allUser.isEmpty()){ allCount = allUser.size(); // countOfPerPage = Constants.COUNT_OF_PERPAGE; totalPage = allCount <= countOfPerPage ? 1 : (allCount % countOfPerPage == 0 ? allCount / countOfPerPage : allCount / countOfPerPage + 1); int startIndex = pageIndex > 1 ? (pageIndex - 1) * countOfPerPage : 0; int length = allCount <= countOfPerPage ? allCount : ((allCount - startIndex) < countOfPerPage ? allCount - startIndex : countOfPerPage); for (int i = startIndex; i < startIndex + length; i ++) { tmpUserList.add(allUser.get(i)); } HttpServletRequest req = getRequest(); userlist = tmpUserList; // 如果是通过struts方式直接进入该action的,则设置pageIndex为1(此时肯定是第一页) if (pageIndex == 0) { pageIndex = 1; } // pageIndexをJSPページのjavaソースに使える為、リクエストにセットする req.setAttribute("pageIndex", String.valueOf(pageIndex)); // totalPageをJSPページのjavaソースに使える為、リクエストにセットする req.setAttribute("totalPage", String.valueOf(totalPage)); // displayNumForPageNaviをJSPページのjavaソースに使える為、リクエストにセットする req.setAttribute("displayNumForPageNavi", String.valueOf(displayNumForPageNavi)); return SUCCESS; }else{ // return SUCCESS; return "failure"; } } }
大小: 67.4 KB
查看图片附件
相关文章推荐
- 利用JQuery写一个简单的分页插件
- 分享一个jQuery的超酷分页插件 - jPages
- 写的一个jquery小分页插件,类似aspnetpager的用法
- JQuery写的一个简单的分页插件-2
- 自己diy一个jquery分页插件
- 用Jquery写的一个分页插件
- 分享一个自己动手写的jQuery分页插件
- 利用JQuery写一个简单的异步分页插件
- 分享一个Jquery 分页插件 Jquery Pagination
- 利用JQuery写一个简单的分页插件
- 分享一个jQuery的超酷分页插件 - jPages
- jQuery分页插件jBootstrapPage,一个Bootstrap风格的分页插件
- 一个非常好用的Jquery表格分页插件——jPages
- 一个简单的JQuery自适应分页插件twbsPagination
- 改写Jquery的一个分页插件
- 分享一个jQuery的超酷分页插件 - jPages
- 自己写的一个jQuery分页插件
- jQuery分页插件jBootstrapPage,一个Bootstrap风格的分页插件
- jQuery Gridly 一个jQuery插件,允许拖放,以及在grid上调整大小。
- jQuery插件:一个仿百度搜索分页插件