通用的ajax分页编写

最新推荐文章于 2022-03-28 16:32:10 发布
最新推荐文章于 2022-03-28 16:32:10 发布
阅读量747 收藏 1
点赞数
分类专栏： jquery 文章标签： ajax list string class function button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houpengfei111/article/details/8103010
版权 

大家看见的分页无非是这样的，首页、上一页、1/1、下一页、末页、共几条、默认条数。

那么我们在页面传值的时候，只需要传当前页page，显示的页面条数pageRows，以及我们要查询的分类id---cateId，

页面会有一个隐藏域    <input type="hidden" value="${cateId }" name="cateId" id="cateId"/>来储存cateId；

下面为我们图的显示的html源码:

 	<div class="page" id="page">
	        	<div class="toolbarScroll">
					<s:hidden name="pageRequest.page" id="pagePage"/><!-- pagePage页得索引，id=forwardPageNum文本框输入的页数 ，-->
					<input id="firstPage" οnclick="script:changePage('first')" <s:if test="pageRequest.page == 1">disabled="disabled"</s:if> value=" 首页 " type="button" />
					<input id="beforePage" οnclick="script:changePage('previous')" <s:if test="pageRequest.page == 1">disabled="disabled"</s:if> value=" 上一页 " type="button" />
					<input size="6" maxlength="3" id="forwardPageNum" class="formStylePage" οnblur="goToPointedPage()" value="<s:property value='pageRequest.page'/>" type="text" style="text-align: center;"/>/
					<span class="currentPage" id="totalPage">
						<s:property value="(pageResponse.totalCount - 1) / pageRequest.rows + 1"/>
					</span>
					<input id="nextPage" οnclick="script:changePage('next')" <s:if test="(pageRequest.page == ((pageResponse.totalCount - 1) / pageRequest.rows + 1))">disabled="disabled"</s:if> value=" 下一页 " type="button" />
					<input id="lastPage" οnclick="script:changePage('last')" <s:if test="(pageRequest.page == ((pageResponse.totalCount - 1) / pageRequest.rows + 1))">disabled="disabled"</s:if> value=" 末页 " type="button" />
					共<span id="totalCount"><s:property value="pageResponse.totalCount"/></span>条
					<span>
						<select id="pageRows" name="pageRequest.rows" οnchange="changeRows()"><!-- 每页显示条数 -->
							<s:iterator value="pageResponse.PAGESIZES" status="s">
								<option <s:if test="pageRequest.rows == pageResponse.PAGESIZES[#s.index]">selected="selected"</s:if> value="<s:property value="pageResponse.PAGESIZES[#s.index]"/>">
									<s:if test="pageResponse.PAGESIZES[#s.index] == pageResponse.defaultPageSize">默认条数</s:if>
									<s:else>每页<s:property value="pageResponse.PAGESIZES[#s.index]"/>条</s:else>
								</option>
							</s:iterator>
						</select>
					</span>
				</div>
	        </div>
	        <div class="clearFloat"></div>
	    </div>
下方为初始化的时候的显示列表方法： 

function listInfo(){
		var cateId = $("#cateId").val();//分类id 
		var pagePage = $("#pagePage").val();//页的索引
		var pageRows = $("#pageRows").val();//每页数据个数
		$.ajax({
			url: "${ctx}/system/seaSealspapersInfo/listJson.action",
			data:{"pageRequest.page" : pagePage,"pageRequest.rows":pageRows,"cateId":cateId},
			dataType: "json",
			success: function(d){
				var totalCount = d.totalCount;   //获得总条数
				var pageCount = totalCount % parseInt($("#pageRows").val()) == 0 ? 
							parseInt(totalCount/parseInt($("#pageRows").val())) :
							parseInt(totalCount/parseInt($("#pageRows").val())) +1;  //获得总页数
				$("#totalPage").html(pageCount+'');  //保存总页数
				$("#totalCount").html(totalCount+''); //总数
				if(pageCount == 1){  //如果只有一页，全部禁用
					$("#beforePage").attr("disabled","disabled");  
					$("#firstPage").attr("disabled","disabled");  
					$("#nextPage").attr("disabled","disabled");   
					$("#lastPage").attr("disabled","disabled"); 
				}else if($("#forwardPageNum").val() < pageCount){  //如果页数比总页数小，则下一页和末页能用
					$("#nextPage").removeAttr("disabled");
					$("#lastPage").removeAttr("disabled");
					if($("#forwardPageNum").val() >1){     //如果页数大于1，说明   1<页数<总页数  说明全部都可用
						$("#firstPage").removeAttr("disabled");
						$("#beforePage").removeAttr("disabled");
					}else{										//在页数比总页数小的其他情况下，就只存在一种就是等于1 
						$("#firstPage").attr("disabled","disabled");  //当等于1 的时候，首页和上一页不可用
						$("#beforePage").attr("disabled","disabled");
					}
				} else{
					$("#nextPage").attr("disabled","disabled");
					$("#lastPage").attr("disabled","disabled");
				}
				var list = d.list;
				$("#body").empty();
				if(list.length == 0){
					$("#body").append (
						"<tr>" +
						"	<td colspan='10'>" +
						"		<span class='tip'>系统无记录！</span>" +
						"	</td>" +
						"</tr>"
					);
				}else{
					for(var i = 0;i<list.length;i++){
						var updateTime =  list[i].updateTime  ? list[i].updateTime : '' ;
						var updateUserName = list[i].updateUserName ? list[i].updateUserName : '';
						var seacatename = "";
						if(list[i].seaCategoryInfo != undefined){
							if(list[i].seaCategoryInfo.catName != undefined){
								seacatename = list[i].seaCategoryInfo.catName;
							}
						}
						var seaStatus;
						if(list[i].seaStatus == 1){
							seaStatus = '可借用';
						}else if(list[i].seaStatus == 0){
							seaStatus = '已借出';
						}else{
							seaStatus = '注销';
						}
						$("#body").append(
						 "<tr>" +
			                "<td>" +
						 	"	<input name='ids' type='checkbox' value='" + list[i].id + "' /></td>" +
			                "<td>" +
			                "	<span title='" + list[i].seaFullname + "'>" + list[i].seaFullname + "</span>" +
			                "</td>" +
			                "<td>" +
			                "	<span title='" + list[i].seaShortname + "'>" + list[i].seaShortname + "</span>" +
			                "</td>" +
			                "<td>" +
			                "	<span title='" + seacatename + "'>" + seacatename + "</span>" +
			                "</td>" + 
			                "<td>" +  list[i].seaValiditystartdate + "---" + list[i].seaValidityenddate  + "</td>" +
			                "<td>" + seaStatus + "</td>" +
			                "<td>" + list[i].createUserName + "</td>" +
			                "<td>" + list[i].createTime + "</td>" +
			                "<td>" + updateUserName + "</td>" +
			                "<td>" + updateTime + "</td>" +
			              "</tr>" 		
						);
					}
				}
			}
		});
	}

下面为点击按钮的时候的具体方法： 

	function changePage(pageTitle) {
		if(pageTitle == "previous"){
			$("#nextPage").removeAttr("disabled");      //如果点击上一页，就让下一页的按钮可以用
			$("#lastPage").removeAttr("disabled");     //如果点击上一页，就让尾页的按钮可用
			$('#pagePage').val(parseInt($('#pagePage').val()) - 1);
			if($("#pagePage").val() == 1){                   //点击上一页时，如果页变为1。上一页和首页不可用
				$("#beforePage").attr("disabled","disabled");  
				$("#firstPage").attr("disabled","disabled");   
			}
		}else if(pageTitle == "next"){
			$("#beforePage").removeAttr("disabled");    //如果点击下一页，就让上一页的按钮可用
			$("#firstPage").removeAttr("disabled");     //如果点击下一页，就让首页的按钮可用
			$('#pagePage').val(parseInt($('#pagePage').val()) + 1);
			var pagecount = parseInt($("#totalPage").html());
			if(parseInt($("#pagePage").val()) == pagecount){			//如果点击下一页后成了最后一页,尾页和下一页不可用
				$("#nextPage").attr("disabled","disabled");   
				$("#lastPage").attr("disabled","disabled");  
			}
		}else if(pageTitle == "first"){
			$('#pagePage').val(1);
			$("#beforePage").attr("disabled","disabled");  //如果点击首页按钮，上一页按钮按钮不可用
			$("#firstPage").attr("disabled","disabled");   //如果点击首页按钮，首页按钮不可用
			$("#nextPage").removeAttr("disabled");			//下一页按钮可用
			$("#lastPage").removeAttr("disabled");			//尾页按钮可用
		}else if(pageTitle == "last"){
			$('#pagePage').val($("#totalPage").html());   //点击尾页，将当前页数改为最大页数
			$("#nextPage").attr("disabled","disabled");   //如果点击尾页按钮，下一页按钮不可用
			$("#lastPage").attr("disabled","disabled");   //如果点击尾页按钮，尾页按钮不可用
			$("#firstPage").removeAttr("disabled");       //首页按钮可用
			$("#beforePage").removeAttr("disabled");      //上一页可用
		}
		$("#forwardPageNum").val($("#pagePage").val());
		listInfo();
	}

下面为选择显示条数时的方法：

   

	function goToPointedPage(){
		var pointedPageNum = $('#forwardPageNum').val();  //获得文本框输入的页数
		var totalPage = $("#totalPage").html();  //获取总页数
		var patrn = /^\+?[1-9][0-9]*$/;
		if(!patrn.exec(pointedPageNum)){
			alert('页数请输入正整数');
			return;
		}
		if(parseInt(pointedPageNum) > parseInt(totalPage)){
			alert('输入页数不得超过最大页数');
			return;
		}
		$('#pagePage').val(parseInt(pointedPageNum));
		if(pointedPageNum == 1){
			$("#beforePage").attr("disabled","disabled");  
			$("#firstPage").attr("disabled","disabled");   
		}
		if(pointedPageNum == totalPage){
			$("#nextPage").attr("disabled","disabled");   
			$("#lastPage").attr("disabled","disabled"); 
		}
		listInfo();
	}
	function changeRows(){
		$('#pagePage').val(1); //当选择默认页数改变的时候，当前页数改为1
		listInfo();
	}
/**
 * 
 * @author yijh
 * 获取分页对象
 * 
 */
public class PageRequest {
	
	private int rows;//每页大小
	private int page = 1;//页号
	private String sort;//排序字段
	private String order;//顺序

	public PageRequest() {

		rows = Integer.parseInt(SystemConfig.getProperty("defaultPageSize"));
	}

	public PageRequest(int rows) {
		super();
		this.rows = rows;
	}

	public PageRequest(int rows, String sort,
			String order) {
		super();
		this.rows = rows;
		this.sort = sort;
		this.order = order;
	}

	private int start = 0;
	private int limit ;

	public int getStart() {
		start = (this.page - 1) * this.rows;
		return start;
	}

	public int getLimit() {
		return this.rows;
	}

	public int getRows() {
		return rows;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public String getSort() {
		return sort;
	}

	public void setSort(String sort) {
		this.sort = sort;
	}

	public String getOrder() {
		return order;
	}

	public void setOrder(String order) {
		this.order = order;
	}

}

package com.ether.common.page;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import org.apache.commons.lang.builder.ToStringBuilder;
import org.apache.commons.lang.builder.ToStringStyle;

import com.ether.common.config.SystemConfig;
import com.ether.util.Constant;

/**
 * 
 * @author yijh
 * 分页程序生成的分页对象
 * @param <E>
 */
public class PageResponse<E> implements Serializable{
	private long totalCount;
	private long start;
	private long end;
	private List<E> list;
	private int defaultPageSize;
	private int[] PAGESIZES;

	public PageResponse(long totalCount, List<E> list) {
		super();
		this.totalCount = totalCount;
		this.list = list;
	}

	public PageResponse() {
		super();
		this.totalCount = 0;
		defaultPageSize = Integer.parseInt(SystemConfig.getProperty("defaultPageSize"));
		this.list = new ArrayList<E>();
		PAGESIZES = new int[]{Integer.parseInt(SystemConfig.getProperty("defaultPageSize")),50,100};
	}
	
	public PageResponse(PageRequest pageRequest) {
		super();
		this.totalCount = 0;
		this.list = new ArrayList<E>();
	}

	public long getTotalCount() {
		return totalCount;
	}

	public void setTotalCount(long totalCount) {
		this.totalCount = totalCount;
	}

	public List<E> getList() {
		return list;
	}

	public void setList(List<E> list) {
		this.list = list;
	}

	@Override
	public String toString() {
		return ToStringBuilder.reflectionToString(this,
				ToStringStyle.MULTI_LINE_STYLE);
	}

	public long getStart() {
		return start;
	}

	public void setStart(long start) {
		this.start = start;
	}

	public long getEnd() {
		return end;
	}

	public void setEnd(long end) {
		this.end = end;
	}

	public int[] getPAGESIZES() {
		return PAGESIZES;
	}

	public int getDefaultPageSize() {
		return defaultPageSize;
	}

}



小菜鸟的博客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax做分页
wangjia_520的博客
12-07 1177
用这种ajax做分页的方法比较简单，把代码直接复制就可以，然后根据实际更改一下里面的参数。 1.设置分页显示显示的样式，显示效果如下。   &lt;style type="text/css"&gt; *{ margin:0px auto; padding:0px; font-family:"微软雅黑"} .b3{ list-style:none; width:400px; height:3...
通用ajax分页
qq_20898177的博客
08-09 171
aic.html script src="../js/base.js">script> script src="../js/aic.js">script> div class="tab_tool_wrapper"> div id="tabBar"> --> 10--> 20--> 30--> 40-->
AJAX实现分页
setsunadoudou的博客
10-11 1519
使用AJSX分页原理：封装两个方法，一个方法负责显示，一个负责写入分页栏。 首先使用一张数据比较多的数据库中的表格： 主界面加载后首先导入所有数据，并显示前20条数据，在访问数据库时，使用limi...
JQuery+Ajax通用分页导航（任意表）
07-15
通过ajax调用后端Servlet，(调后端的Servlet名叫testservlet 可以在wzjpage.js第27行处修改。)返回一个JSON对象，要求：jSON对象中必须有 // datarows columns pageCount这3个对象。 //数据格式必须为: List<Object[]>（数据行） String[](列标题) 总页数int //第1步：将css和js目录放进web项目下 //第2步：将test.jsp页面的静态代码复制到你的页面上，注意： //必须提供2个table，而且第1个table的id必须为wzj_data_table //第2个的id必须为wzj_page_table，两个隐藏域名称必须为pageNumber和pageCount //第3步：确认引入了JS和CSS,test.jsp页面中的代码，严禁修改元素id。否则运行报错。 //第4步：编写后端程序根据请求中传入的页码抓取数据
使用ajax实现了分页
04-10
使用ajax实现了分页，并简单阐述了ajax请求时post和get的区别
ajax分页_ajax分页_
09-29
**四、通用Ajax分页组件** 为了提高代码复用性，开发者通常会封装一个通用的Ajax分页组件，该组件接受一些配置参数，如URL、每页大小、回调函数等，然后自动处理请求和数据更新。这样，只需要在不同页面调用这个...
thinkphp ajax分页
08-13
二、Ajax分页原理 Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下更新部分网页内容的技术。在分页场景中，用户点击分页按钮时，前端通过Ajax向服务器发送请求，获取新的分页数据，然后...
ajax结合豆瓣搜索结果进行分页完整代码
10-21
### 知识点五：JavaScript与jQuery在Ajax分页中的应用 在前端实现分页时，JavaScript是不可或缺的编程语言。JavaScript负责处理浏览器端的逻辑，而jQuery作为一个JavaScript库，简化了对DOM的操作和Ajax请求的编写...
ajax实现分页操作
蒙悦纳的博客
06-28 1666
利用ajax请求数据的特点，来实现分页操作。
【B/S】利用AJAX实现分页
哈士奇
04-25 1431
一、前言      以前在使用Asp.Net的时候用过GridView这个控件，这个控件自带分页的功能，虽然很丑，但是功能还是很强大的。这里呢，给大家展示一下更加给力的方式——利用AJAX无刷新直接从服务器获取数据分页。二、实现过程注意：一下的内容都是在服务器内使用的。首先要在服务器的路径下建立几个文件，比如，page1.txt,page2.txt,page3.txt。每个文件中放入数组，如下：[{
ajax实现表格分页功能
m0_46233451的博客
05-19 566
一.数据库分页查询 1.mysql分页查询 select * from table limit a,b a:下标，从0开始 b:长度 mysql> select * from stu limit 0,10; +----+--------+-----------------------------------------+------------+ | id | name | address | birthday | +----
ajax 如何实现分页功能
程序人生
11-07 7393
这里用ajax简单的实现一下分页功能，作为一个例子ajax实现分页，首先需要工具类，Page.java，如下：package com.feelingsys.bean;/** * Page * @author LIU * @version 1.0 2017-09-28 */ public class Page { /** * 总记录数 */ private i
ajax原理简析并用ajax实现分页功能
空城天路客的博客
04-10 7499
这里写链接内容## 写在前面 ## 真的好久没有更新博客了，面临毕业好多杂事要做，而且公司还要培训，真是忙的很。难得偷闲，今天就来谈一下ajax的分页吧！ 简介 首先我们来识别一下几个相关概念： 1、ajax：异步的javascript和xml 指的是在不刷新网页的情况下，可以和服务器端通信，局部刷新。 2、ajaj：其实这才是我们今天要用的，他的含义是: ...
实现Ajax分页
shshbsu的博客
03-28 1070
<!-- 引入jQuery的类库 --> <script type="text/javascript" scr="js/jquery-3.3.1.js"></script> <!-- 另起一个script块 --> <script type="text/javascript"> //页面载入函数 $(function(){ //默认显示第1页 myf('a'); ...
ajax实现无刷新分页功能
热门推荐
倾城一笑stu
08-05 1万+
原理：前台换用ajax将页码以post的方式传到后台，后台接收页码，后台的操作与用php实现分页功能大致一样，只是还需将总页数传到前台，以便在前台输出分页链接。 那么前台怎样传页码呢？？？只需用ajax的回调函数，接收后台的数据，利用json，动态添加dom节点，利用for循环输出分页链接，并在链接a里增加一个data属性，属性值为 页码。当点击a时，利用js获取属性值，这样，即可实现js前台
ajax+JS实现分页
lzj_dandan的博客
11-06 1408
ajax+JS实现分页由于我这个功能比较特殊，会不停的请求数据库，所以用的是ajax分页，请求的时候会把当前的页数存到cookie里，刷新的时候把页数+1或-1传到后台。这里我用的分割页数是6，分为页首、页中和页末。 先上效果图： //页码在开头 //页码在中间 //页码在末尾 在这里，我实现的效果是，不管在哪一页，它前后都会有2-3个页码，多余的用…代替，并且…不可点，当在页
无刷新分页查询实战：AJAX实现
本文将详细介绍如何使用Ajax实现不刷新页面的...通过以上步骤，你将实现一个基本的Ajax分页查询示例，用户在输入关键字后无需刷新页面即可看到实时更新的搜索结果。这在处理大量数据或频繁数据更新的场景中尤其实用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值