用jquery.pagination.js製作分頁
阿新 • • 發佈：2018-12-31
如上圖要製作這樣的分頁。如是要用到jquery.pagination.js+pagination.css這連個檔案。如果沒有，可以在網上下載。下面解釋一下具體呼叫jquery.pagination.js。因為要做成公用的。所以我寫了一個頁面page.jsp.裡面就是具體條用jquery.pagination.js
1.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="Searchresult"></div> <div id="Pagination" class="pagination"><!-- 這裡顯示分頁條--></div> <script> var pageSize = 10; //每頁顯示條數初始化，修改顯示條數，修改這裡即可 $(function(){ //回撥函式的作用是顯示對應分頁的列表項內容 //回撥函式在使用者每次點選分頁連結的時候執行 //引數page_index{int整型}表示當前的索引頁 <span style="color:#FF6666;">var num_entries = $("#pageCount").val();//總頁數</span> var initPagination = function() { // 建立分頁 $("#Pagination").pagination(num_entries, { num_edge_entries: 1, //邊緣頁數 num_display_entries: 6, //主體頁數 callback: pageselectCallback, items_per_page:pageSize //每頁顯示條數 }); }(); function pageselectCallback(page_index, jq){ <span style="color:#999999;">InitTable(page_index,pageSize);</span> return false; } }); </script> </body> </html>
只要需要分頁的頁面包含這個page.jsp即可。
上面的總頁數，是載入頁面時傳入過來的。
2.ajax方式呼叫
function InitTable(pageIndex,pageSize) { $.ajax({ url: "getInvestByProjectId.do", data:{"pageIndex":pageIndex+1,"id":$("#projectId").val(),"pageSize":pageSize}, type:"POST", success:function(data){ var content = '<div id="projectPageList">'; content +='<table class="taTranpro taSideMtma" width="100%" border="0" cellspacing="0" cellpadding="0">'; if(data.totalSize ==0){ document.getElementById('invPageId').style.display = "none";//隱藏分頁條 content += '<tr id="tdiv"><td class="blue" style="font-size: 15px;" colspan="10" align="center">沒有投資訊息！</td></tr>'; }if(data.totalSize > 0){ document.getElementById('invPageId').style.display = ""; //顯示分頁條 $("#projectPageList").empty(); //動態構建列表 for (var pro = 0; pro < data.totalSize; pro++) { var project = data.resultList[pro]; content += '<tr><td width="32%">'+project.projectName+'</td><td width="29%">￥'+project.investerAmount+'</td><td width="39%">'+project.investerTimeStr+'</td></tr>'; } } content += '</table>'; content += '</div>'; $("#projectPageList").replaceWith(content); } }); }
3.jsp頁面展示：
<div id="tagContent3" class="SideMtma" style="display:none;"> <div class="SideMtmale l"> <table class="taTranpro taSideMtma" width="100%" border="0" cellspacing="0" cellpadding="0" id="Result"> <tr> <th width="32%">投資人</th> <th width="29%">投資金額</th> <th width="39%">投資時間</th> </tr> </table> <div id="projectPageList"></div> <ul id="invPageId" class="page_ul"> <%@ include file="/WEB-INF/base/page.jsp" %> </ul> </div> <div class="SideMtmari r"> <h3 class="gray0"><i></i>投資專案特性</h3> <p class="gray6"> 1、${project.singlecopy}元/份，1份起投，專案投資總額根據專案發展計劃有限額，目前創業專案首輪融資為${fn:split(project.targetAmount,".")[0]}元。 <br>2、惠卡公司對所有投資提供100%本金加保底月度利息回報保障。 <br>3、每月發放上月投資利息回報，利率為${project.yearRate}%，投資期為${project.holdtime}月，${project.holdtime}個月後自動贖回，未滿${project.holdtime}個月可議價轉讓，未轉讓成功前正常參與每月利息。 <br>4、投資人可隨時來公司監督檢查進度進展、財務狀況等，專案團隊會每月更新專案進度進行公示。 <br>5、投資人享有投資公司月度、年度分工全，投資專案後惠信其他專案上市後的有限換股購股權，所投資專案監督權。 <br>6、對專案感興趣的投資人可以和惠卡公司談創業專案股權投資。 </p> </div> <div class="clearfix"></div> </div>