简单分页代码

最新推荐文章于 2024-05-11 15:40:37 发布
最新推荐文章于 2024-05-11 15:40:37 发布
阅读量804 收藏 1
点赞数 1
分类专栏： js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19865223/article/details/95177094
版权
java 同时被 2 个专栏收录
8 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

1.paging.js

function Paging(paramsObj, callback) {
    this.pageSize = paramsObj.pageSize || 10;    //每页条数（不设置时，默认为10
    this.pageIndex = paramsObj.pageIndex || 1;    //当前页码
    this.totalCount = paramsObj.totalCount || 0;   //总记录数
    this.totalPage = Math.ceil(paramsObj.totalCount / paramsObj.pageSize) || 0;     //总页数
    this.prevPage = paramsObj.prevPage || '<';     //上一页（不设置时，默认为：<）
    this.nextPage = paramsObj.nextPage || '>';     //下一页（不设置时，默认为：>）
    this.firstPage = paramsObj.firstPage || '<<';     //首页（不设置时，默认为：<<）
    this.lastPage = paramsObj.lastPage || '>>';     //末页（不设置时，默认为：>>）
    this.degeCount = paramsObj.degeCount || 3;             //当前页前后两边可显示的页码个数（不设置时，默认为3）
    this.ellipsis = paramsObj.ellipsis; //是否显示省略号不可点击按钮（true：显示，false：不显示）
    this.ellipsisBtn = (paramsObj.ellipsis == true || paramsObj.ellipsis == null) ? '<li><span class="ellipsis">…</span></li>' : '';
    var that = this;

    $('#page_size').val(this.pageSize);
    callback && callback(this.pageIndex, this.pageSize);    //立即执行回调函数

    // 生成分页DOM结构
    this.initPage = function (totalCount, totalPage, pageIndex) {
        this.totalCount = totalCount;
        this.totalPage = totalPage;
        this.pageIndex = pageIndex;
        var degeCount = this.degeCount;
        var pageHtml = '';  //总的DOM结构
        var tmpHtmlPrev = '';   //省略号按钮前面的DOM
        var tmpHtmlNext = '';   //省略号按钮后面的DOM
        var headHtml = ''; //首页和上一页按钮的DOM
        var endHtml = '';   //末页和下一页按钮的DOM
        if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){   //前后都需要省略号按钮
            headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';

            endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            var count = degeCount;  //前后各自需要显示的页码个数
            for(var i=0; i<count; i++){
                if(pageIndex != 1){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                }
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                this.ellipsisBtn +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                this.ellipsisBtn +
                endHtml;
        }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前面需要省略号按钮，后面不需要
            headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';

            if(pageIndex == totalPage){ //如果当前页就是最后一页
                endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                    '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
            }else{  //当前页不是最后一页
                endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                    '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
            }

            var count = degeCount;  //前需要显示的页码个数
            var countNext = totalPage - pageIndex;  //后需要显示的页码个数
            if(pageIndex != 1){
                for(var i=0; i<count; i++){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
                }
            }
            for(var i=0; i<countNext; i++){
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                this.ellipsisBtn +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                endHtml;
        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前面不需要，后面需要省略号按钮
            if(pageIndex == 1){ //如果当前页就是第一页
                headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                    '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
            }else{  //当前页不是第一页
                headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                    '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
            }

            endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            var countPrev = pageIndex - 1;  //前需要显示的页码个数
            var count = degeCount;  //后需要显示的页码个数
            if(pageIndex != 1){
                for(var i=0; i<countPrev; i++){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                }
            }
            for(var i=0; i<count; i++){
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                this.ellipsisBtn +
                endHtml;
        }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){   //前后都不需要省略号按钮
            headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
            endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';

            if(totalPage == 1){ //如果总页数就为1
                headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                    '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
                endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                    '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
            }else{
                if(pageIndex == 1){ //如果当前页就是第一页
                    headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
                        '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
                    endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
                        '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
                }else if(pageIndex == totalPage){  //如果当前页是最后一页
                    headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
                        '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
                    endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
                        '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
                }
            }

            var countPrev = pageIndex - 1;  //前需要显示的页码个数
            var countNext = totalPage - pageIndex;  //后需要显示的页码个数
            if(pageIndex != 1){
                for(var i=0; i<countPrev; i++){
                    tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
                }
            }
            for(var i=0; i<countNext; i++){
                tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
            }
            pageHtml = headHtml +
                tmpHtmlPrev +
                '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
                tmpHtmlNext +
                endHtml;
        }
        $('#page_ul').html(pageHtml);
        $('#total_count').html(totalCount);
    };

    // 点击页码（首页、上一页、下一页、末页、数字页）
    $('#page_ul').on('click','a',function (e) {
        var _this = $(this);
        var idAttr = _this.attr('id');
        var className = _this.attr('class');
        if(idAttr == 'first_page'){ //如果是点击的首页
            that.pageIndex = 1;
        }else if(idAttr == 'prev_page'){    //如果点击的是上一页
            that.pageIndex = that.pageIndex == 1 ? that.pageIndex : that.pageIndex - 1 ;
        }else if(idAttr == 'next_page'){ //如果点击的是下一页
            that.pageIndex = that.pageIndex == that.totalPage ? that.pageIndex : parseInt(that.pageIndex) + 1;
        }else if(idAttr == 'last_page'){ //如果点击的是末页
            that.pageIndex = that.totalPage;
        }else if(className == 'page-number'){   //如果点击的是数字页码
            that.pageIndex = _this.html();
        }
        callback && callback(that.pageIndex, that.pageSize);
    });

    // 改变每页条数
    $('#page_size').change(function () {
        var _this = $(this);
        that.pageIndex = paramsObj.pageIndex = 1;
        that.pageSize = paramsObj.pageSize = _this.val() - 0;
        callback && callback(that.pageIndex, that.pageSize);
    })
}

2.paging.css

			    .page {font-size: 14px;background-color: transparent;width: 100%;height: 50px;line-height: 50px;display: none;}
				.page .page-l select {width: 60px;height: 30px;}
				.page .page-l .page-size-box {display: inline-block;margin-left: 20px;}
				.page .page-r {float: right;padding-top: 10px;}
				.page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;padding: 0;}
				.page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}
				.page .page-r ul li a:hover {background-color: #f5f2f2;}
				.page .page-r ul li:last-child {border-right: 1px solid #ccc;}
				.page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #777;}
				.page .page-r ul li a.active {background-color: #09aeb0;color: #fff;}
				.page .page-r ul li span {display: block;height: 100%;padding:0 10px;color: #ccc;cursor: not-allowed;}
				.page .page-r ul li span.ellipsis {cursor: default;}

 3.页面html标签

 

										<table class="table table-striped" style=" border-collapse: collapse; border: 1px solid black;">
											<thead>
												<tr id="firstTR">
													<th id="firstTD">发送单编号</th>
													<th>发送单名称</th>
													<th>所属型号</th>
													<th>任务状态</th>
													<th>到达时间</th>
													<th>数据包名称</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody id="tbody">
											<%
												for(int i=0;i<5;i++){
													out.print("<tr>");
													out.print("<td>1</td>");
													out.print("<td>2</td>");
													out.print("<td>3</td>");
													out.print("<td>4</td>");
													out.print("<td>5</td>");
													out.print("<td><a href='www.baidu.com'>数据包</a></td>");
													if(i==0){
														out.print("<td><button onclick='pass()'>通过</button><button onclick='noPass()'>驳回</button></td>");
													}else{
														out.print("<td></td>");
													}
													out.print("</tr>");
												}
											%>
											</tbody>
										</table>

										        <!-- 分页结构 -->
												<div class="page">
													<div class="page-l" id="page_l" style="float: left;">
														<span>总共 <span id="total_count"></span> 条</span>
														<div class="page-size-box">
															<span>每页显示</span>
															<select id="page_size">
																<option value="10">10</option>
																<option value="20">20</option>
																<option value="50">50</option>
																<option value="100">100</option>
															</select>条
														</div>
													</div>
													<div class="page-r">
														<ul id="page_ul" class="page-ul"></ul>
													</div>
												</div>
												<!-- 分页结构end -->

 

 4.页面创建js对象，以及调用

		<script>
			//分页参数（参数名固定不可变）
			var pageConfig = {
				pageSize: 10,                //每页条数（不设置时，默认为10）
				prevPage: '上页',             //上一页（不设置时，默认为：<）
				nextPage: '下页',             //下一页（不设置时，默认为：>）
				firstPage: '首页',            //首页（不设置时，默认为：<<）
				lastPage: '末页',             //末页（不设置时，默认为：>>）
				degeCount: 2,                //当前页前后两边可显示的页码个数（不设置时，默认为3）
				ellipsis: true               //是否显示省略号按钮(不可点击)（true:显示，false:不显示，不设置时，默认为显示）
			}
			
			//兼容低浏览器没有forEach方法
			if (typeof Array.prototype.forEach != 'function') {
				Array.prototype.forEach = function (callback) {
					for (var i = 0; i < this.length; i++) {
						callback.apply(this, [this[i], i, this]);
					}
				};
			}

			//ajax请求方法
			function createXMLHTTP() {
				var arrSignatures = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
				for(var i = 0; i < arrSignatures.length; i++){
					try{
						var oRequest = new ActiveXObject(arrSignatures[i]);
					} catch (oError) {
						oRequest = false;
					}
					if (!oRequest && typeof XMLHttpRequest != 'undefined') {
						oRequest = new XMLHttpRequest();
					}
					return oRequest;
				}
				throw new Error("MSXML is not installed on your system");
			}
			window.onload=function(){
				init();
			}

			//初始化数据
			function init(){
				    var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
                    //var userName = $('#user_name').val();
	
					var xhr = createXMLHTTP(); //创建一个ajax对象
					xhr.onreadystatechange = function(event) { //对ajax对象进行监听
						if (xhr.readyState == 4) { //4表示解析完毕
							if (xhr.status == 200) { //200为正常返回
								console.log(xhr)
								var res=xhr.responseText;
								var obj = eval('(' + res + ')');
								if(obj.success == 1){
									if(obj.data.length > 0){  //如果查询到了数据
										var dataList = obj.data;
										var html = '';
										dataList.forEach(function (item, i) {
											//获取所有数据前端分页
											var startPoint=(pageIndex-1)*pageSize;
											var endPoint=pageIndex*pageSize;
											if(startPoint<=i&&i<endPoint){
												html += '<tr>'+
														'<td>'+((pageIndex-1)*pageSize+i+1)+'</td>'+
														'<td>'+item.id+'</td>'+
														'<td>'+item.name+'</td>'+
														'<td>'+item.createTime+'</td>'+
														'<td>'+item.createTime+'</td>'+
														'<td>'+item.createTime+'</td>'+
														'<td>'+item.createTime+'</td>'+
													'</tr>';
											}
											
										});
										$('#tbody').html(html);
										var totalCount = obj.totalCount;   //接口返回的总条数
										//var totalCount = document.getElementById("totalCount").value;   //接口返回的总条数
										var totalPage = Math.ceil(totalCount / pageSize);   //根据总条数和每页条数计算总页码数

										// 调用Paging实例的 initPage()方法生成分页DOM结构
										pageIng.initPage(totalCount, totalPage, pageIndex);
										$('.page').show();
										$('.no-data').hide();
									}else{  //如果未查询到数据
										$('#tbody').html('');
										$('.page').hide();
										$('.no-data').show();
									}
								}else{
									$('#tbody').html('');
									$('.page').hide();
									$('.no-data').show();
								}
							}
						}
					};
					xhr.open('POST',"http://avidm4.calt.casc/Windchill/netmarkets/jsp/ext/common/queryAjax.jsp", true); //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
					xhr.send(null); //发送	 
                });
			}

 

5，支持前端分页，和后端分页 

参考网页：

https://www.cnblogs.com/libo0125ok/p/7815597.html

 

梧桐倚潇湘
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分页代码 分页代码 分页代码
10-14
分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码
asp 简单分页代码
10-29
ASP（Active Server Pages）是一种微软开发的服务器端脚本技术，用于...以上就是ASP实现简单分页的基本步骤和涉及的关键知识点。通过这种方式，可以创建一个有效的用户界面，使用户能够方便地浏览数据库中的大量信息。
网页分页功能讲解及相关代码模块实现
qq_45780016的博客
04-14 2380
分页功能的讲解及其实现，利用Mybaits分页插件pagehelper，以及自己编写的分页功能
Java最新SpringBoot+VUE+Element UI实现分页操作（附源码），看完老板就给加薪了
最新发布
2401_83977546的博客
05-11 628
既然是要面试，那么就少不了刷题，实际上春节回家后，哪儿也去不了，我自己是刷了不少面试题的，所以在面试过程中才能够做到心中有数，基本上会清楚面试过程中会问到哪些知识点，高频题又有哪些，所以刷题是面试前期准备过程中非常重要的一点。很多人感叹“学习无用”，实际上之所以产生无用论，是因为自己想要的与自己所学的匹配不上，这也就意味着自己学得远远不够。我牺牲了自己的大概十个小时写了这片文章，换来的是成千上万的求职者节约几天甚至几周时间浪费在无用的资源上。3.4 Controller层的实现。2.2 mapper接口。
通用分页【上】之前端代码
2301_76988707的博客
06-28 232
目录1.分页2.分页的步骤3.分页的核心思想是什么？4. 优化PageBean5.分页工具类6.助手类7.编写tld文件8.前端展示页面和Servlet界面9.最后效果展示分页工具类代码：助手类代码： 8.前端展示页面和Servlet界面 前端页面代码:servlet代码：
自己设计的网站，如何实现分页功能？（详细代码+注释）
CYK_byte的博客
03-25 2769
你在设计网站的时候是否有过这样的烦恼？
分页代码（注释+代码）
Destroy_wang的博客
12-10 2369
import java.io.Serializable; import java.util.List; public class PageUtil<T> implements Serializable { private int page;//当前页 private int pre;//上一页 private int next;//下一页 private int totalpage;//尾页 private int size;//每页多少条 .
ajax简单分页代码
12-27
本篇文章将深入讲解如何使用Ajax与后端交互，实现一个简单的分页功能。 首先，我们需要理解Ajax的基本工作原理。Ajax允许我们在不刷新整个页面的情况下，通过JavaScript异步地从服务器获取数据。这通常涉及以下四个...
PHP简单分页代码.rar
06-05
php超简单精简分页，包含分页码数限制 如100页 当前页3显示 1，2，3，4，5，当前页10显示8，9，10，11，12，包含下拉列表选择页数自动调转，输入页数点击跳转功能，样式方面可自由引用美工class ,或者自己添加修改，...
简单的分页代码js实现
11-25
简单的分页js代码: 1、效果描述：  不用分页即可显示的jQuery插件  jQuery分页插件——jQuery.page.js用法很简单，效果很棒  2、调用方法：  $(".tcdPageCode").createPage({ pageCount:10, current:1, ...
jQuery简单分页样式代码
05-01
以上就是使用jQuery实现简单分页的基本步骤。当然，实际应用中可能还需要考虑更多细节，如分页大小的调整、上一页/下一页按钮的添加、禁用状态的处理等。但这个基础模板已经足够帮助你开始实现自己的分页功能。记得...
struts1.2实现的简单分页代码
06-24
本示例是关于如何在Struts1.2框架下实现简单的分页功能，这对于处理大量数据并提高用户体验至关重要。分页允许用户逐页浏览内容，而不是一次性加载所有数据，从而减轻服务器负担，提升页面加载速度。 首先，我们要...
JavaWeb 简单分页实现代码
09-01
以上就是一个简单的JavaWeb分页实现。在实际开发中，你可能需要考虑更多的细节，如错误处理、数据校验、性能优化等。分页组件也可以使用成熟的库，如MyBatis的PageHelper或者Spring Data JPA的Pageable接口，以简化...
简单实用的分页代码
04-09
"简单的分页代码"是针对初学者设计的一个教学资源，旨在帮助他们快速理解并实现分页功能，同时具备良好的可扩展性，适应未来项目的需求。 分页的基本原理是将大量的数据分成若干个较小的部分，每次只加载和展示一...
js分页代码分享
10-26
主要介绍了js分页代码示例，很简单的代码,需要的朋友可以参考下
基于jquery的web分页实现，2024年最新python的毕业设计
2401_84182685的博客
04-08 572
rent中-------------------------------------------------
网页中常用分页效果代码
健健
07-23 1106
package com.page.jdbc; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import com.entor.jdbc.DBUtil; public class Page { p...
html显示列表分页的方法
dusea的博客
09-01 7063
经常在看网页，博客等地方，显示分页，上一页，下一页，首页，尾页等 170条数据 共4页 首页 上一页 1 2 3 4 170条数据 共4页 首页 上一页 1 2 3 4 下一页 尾页
html分页代码
06-01
以下是一个简单的 CSS 分页代码示例： HTML 代码： ```html 第一页 第二页 第三页 第四页 第五页 ``` CSS 代码： ```css .page { display: flex; flex-wrap: wrap; justify-content: center; } .page...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值