用jquery.pagination.js制作分页

来源：互联网发布：windows update不见了编辑：程序博客网时间：2024/04/30 18:49

如上图要制作这样的分页。如是要用到jquery.pagination.js+pagination.css这连个文件。如果没有，可以在网上下载。下面解释一下具体调用jquery.pagination.js。因为要做成公用的。所以我写了一个页面page.jsp.里面就是具体条用jquery.pagination.js

<%@ 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>

0 0