用jquery.pagination.js制作分页_分页器用js怎么做-优快云博客

本文介绍如何使用JQuery分页插件实现动态分页功能。通过具体实例，展示了如何配置分页插件并结合AJAX请求获取数据，动态更新页面内容。此外，还介绍了如何设置每页显示的条目数量、边缘页数等关键参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如上图要制作这样的分页。如是要用到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>