最近在忙着开发项目，还有给女朋友找工作，好久没更新博客了，嘿嘿~
闲话不多说，进入正题吧。开发的这个项目，比较注重前台展示，所以前台的jquery用的比较多。因为接手这个项目的时候，已经有人做了一大半了，看别人很痛苦的，你们懂的。然后我还发现一件更坑爹的事，就是他的所有的分页都是前台分页的！数据量大的时候速度很慢
，然后和接口组的同事探讨了下，原来也不是前面那个人的原因，原来是是涉及到的数据表比较多，接口组的同事嫌麻烦返回了所有的数据！what the fuck！我能说什么？只要找项目组长商量了（他都不知道做的是前台分页，我能说什么，哎），最后改了一部分（此处省略一万字。。。），还有一部分还是前台分页。好吧，你们赢了。作为一个菜鸟，也只有被宰割了。苦逼啊！
那么问题了，既有前台分页，又有后台分页，怎样才能让分页复用呢？这样既能保证样式统一，也不会出现代码的冗余
--------------思路--------------
1.首先不管是前台分页还是后台分页，共通点在于分页的思路是一样的，点击上一页或者下一页时要取到当前页的数据，也就是说我首先要知道的是数据总条数recordCount、每页限制显示的条数pageSize、当前页这三个关键参数pageIndex。
2.所以就有了这个pageBar.js用于实现分页功能，此js中控制翻页以及跳转页，此js接收recordCount，以及pageSize和pageIndex，当然如果想实现百度那种分页效果a便签点击跳转，控制总分页数maxShowPage
/**
* Author : zhu.zhancai by 2014
* anjun 2015年2月25日 16:36:40修改
*/
$.fn.pageBar = function(options) {
var configs = {
PageIndex: 1,
PageSize: 0,
TotalPage: 0,
RecordCount: 0,
maxShowPage : 10,
onPageClick : function(pageIndex) {
return false;
}
}
$.extend(configs, options);
var tmp = "",
i = 0,
currentPage = parseInt(configs.PageIndex);
totalpage = parseInt(configs.RecordCount / configs.PageSize);
totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage;
if (configs.PageIndex > 1) {
tmp += "<a href='javascript:void(0)'>< 上一页</a>"
} else {
tmp += "<a class=\"no\" href='javascript:void(0)'>< 上一页</a>"
}
//用于控制是长分页还是短分页
if(configs.queryJudge!=null&&configs.queryJudge==1){
tmp += "<a href='javascript:void(0)'>"+currentPage+"</a>"
}else{
tmp += "<a href='javascript:void(0)'>1</a>"
if(totalpage >=configs.maxShowPage){
/*如果当前页面 - 标签数大于1 表示需要在左侧插入省略号，
如果当前页面+标签树小于页面总数 表示需要在右侧插入省略号*/
if(currentPage-2>1){
if(currentPage-3!=1){
tmp += "...."
}
tmp += "<a href='javascript:void(0)'>" + (currentPage-2)+ "</a>"
tmp += "<a href='javascript:void(0)'>" + (currentPage-1)+ "</a>"
}
if(currentPage==3){
tmp += "<a href='javascript:void(0)'>" + (currentPage-1)+ "</a>"
}
if(currentPage!=1 && currentPage!=totalpage){
if(currentPage-1<3){
tmp += "<a href='javascript:void(0)'>" + currentPage+ "</a>"
}
tmp += "<a href='javascript:void(0)'>" + currentPage+ "</a>"
}
if(currentPage==totalpage-2){
tmp += "<a href='javascript:void(0)'>" + (currentPage+1)+ "</a>"
}
if(currentPage+2<totalpage){
tmp += "<a href='javascript:void(0)'>" + (currentPage+1)+ "</a>"
tmp += "<a href='javascript:void(0)'>" + (currentPage+2)+ "</a>"
if(totalpage-currentPage!=3){
tmp += "...."
}
}
tmp += "<a href='javascript:void(0)'>" + totalpage + "</a>"
}else if(totalpage<configs.maxShowPage){
for(i=2 ;i<=totalpage ;i++){
tmp += "<a href='javascript:void(0)'>" + i + "</a>"
}
}
}
if (configs.PageIndex < totalpage) {
tmp += "<a href='javascript:void(0)'>下一页 ></a>"
} else {
tmp += "<a class=\"no\" href='javascript:void(0)'>下一页 ></a>"
}
var pager = this.html(tmp)
var index = pager.children('input')[0];
pager.children('a').click(function() {
var cls = $(this).attr('class');
if (this.innerHTML == '< 上一页') {
if (cls != 'no') {
configs.onPageClick(currentPage - 1) ;
}
} else if (this.innerHTML == '下一页 >') {
if (cls != 'no') {
configs.onPageClick(currentPage+1)
}
}else {
if (cls != 'cur') {
configs.onPageClick(parseInt(this.innerHTML) );
}
}
}).each(function() {
if (configs.PageIndex == parseInt(this.innerHTML)) {
$(this).addClass('cur')
}
})
}
3.前台伪分页的实现：第一次通过发送请求取到所有的数据（这时候可以得到recordCount，totalPage，和计算出可以分多少页，以及定义的pageSize）并且将第一页数据显示出来，将数据存储到全局变量中，第二次发送请求的时候其实是取出的剩余的数据
/*** 分页工具条*/
var $page = function(pageIndex){
var pageOptions = {
PageIndex : pageIndex,
PageSize : pageSize,
RecordCount : recordCount,
TotalPage : totalPage,
maxShowPage : 10,
onPageClick : function(pageIndex) {
$paginationCache(pageIndex);
return false;
}
}
$('.g-pagerwp .g-pager').css('visibility', 'visible').pageBar(pageOptions);
}
调用$paginationCache()方法,取出数据
/** * 改用缓存数据load分页*/
var $paginationCache = function(pageIndex){
Index=pageIndex;
var trArray = [] ;
var currentIndex = 0 ;
var length = 0 ;
currentIndex = parseInt((Index - 1 ) * pageSize) ;
/***是否为最后一页*/
if(window.$variable.Cachetotalpage == Index){
length = recordCount ;
}else{
length = parseInt(Index * pageSize) ;
}
$("#info tr:not(#titleTr)").remove();
/** 此处获取数据显示**/
for(var i= currentIndex;i<length ;i++){
//代码
}
$("#info").append(trArray.join(''));
$page(Index) ;
}
4.后台分页的实现，比前台分页少一个步骤，思路基本一样，通过点击a标签或者下页，调用方法发送请求取到数据，不同的前台分页是取出缓存的数据，后台分页需要再次发送请求得到指定数据。java代码只负责取出指定数据，所有的分页操作通过js控制
/*后台分页显示函数*/
var $loadAdminPage = function(pageIndex){
$cleanAll();
url="请求路径";
$.ajax({
type : "post",
url : basePath + url ,
async : true ,
dataType : "json",
data : $variable.qryCondition + "¤tPage=" + pageIndex,
beforeSend : loading() ,
success : function(data){
if(data==null){
$.DialogBySHF.Alert({ Width: 300, Height: 200, Title: "提示信息", Content: '此项目编码下没有订单' });
return;
}
recordCount = data["flowCount"];
var arrayObj = data["returnInfo"]["flowList"] ;
var trArray = [] ;
var length = arrayObj.length ;
for(var i=0;i<length;i++){
//取出数据,并且显示
}
$("#info").append(trArray.join(''));
pageFilterFunction();
var pageOptions = {
PageIndex : pageIndex,
PageSize : pageSize,
RecordCount : recordCount,
TotalPage : totalPage,
maxShowPage : 10,
onPageClick : function(pageIndex) {
$loadAdminPage(pageIndex);
return false;
}
}
$('#pageDiv .g-pager').css('visibility', 'visible').pageBar(pageOptions);
},complete : function(){
$("#loading").hide();
}
});
}
至此，前后台分页完成了，菜鸟的分页完成了。
相关推荐
Flex + BlazeDS + Java 后台分页的实现是一个关键的技术环节，特别是在开发大型Web应用程序时，为了提高用户体验和系统性能，数据通常需要通过分页的方式进行加载。本方案主要探讨了如何在Flex前端和BlazeDS中间件与...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
本篇将详细讲解如何在SSM环境下，根据条件实现后台分页，并结合MySQL数据库进行实践。 首先，我们需要了解SSM框架的基本构成。Spring作为核心容器，负责管理Bean；SpringMVC处理HTTP请求与响应，提供Web应用的结构...
本篇文章将深入探讨后台分页的概念、工作原理以及如何实现，同时也会提及一些相关的工具和技术。 后台分页是当用户在浏览网页或者使用应用时，服务器仅加载并返回用户当前需要看到的数据部分，而不是一次性加载所有...
对结果集list在代码层面进行分页处理。
mvc 分页 核心代码 前后台
5. **后台专用**：标题中的“后台专用”可能意味着这个分页实现更注重于服务器端的处理。在这种情况下，服务器会处理所有的数据切片和分页逻辑，返回给前端的只是当前页的数据。这种做法适用于大数据集，可以减轻...
在这个场景下，我们将探讨如何使用Ajax与JavaWeb进行后台交互，实现数据的分页显示，以及Gson库在数据传输中的作用。 首先，Ajax的核心是JavaScript对象XMLHttpRequest，它允许我们在后台与服务器进行异步通信。...
如题功用，网上没找到后台分页比较方便的，自己写了一个，希望能方便大家，另初学，调试是通过的，不过有BUG的话多包涵。 前台分页技术和后台分页技术都兼容xml和json格式的数据。前台分页比较简单，后台分页可以...
在本文中，我们将深入探讨AngularJS分页的实现方法，这是一种强大的前端JavaScript框架，用于构建交互式的Web应用程序。AngularJS的分页功能是提高大型数据集加载效率的关键，它允许用户逐步加载数据，而不是一次性...
"page分页jsp页面以及后台代码"这个主题涵盖的是如何在Java Web环境中实现前端（jsp）和后端（通常为Servlet或Controller）的分页功能。以下将详细介绍这一过程。 首先，我们需要理解分页的基本概念。分页通常包括...
在网页开发中，分页是一种常见的数据展示...开发者需要理解如何在后台处理分页逻辑，如何将数据传递给前端，以及如何在前端展示分页效果。掌握这些知识后，无论是开发大型网站还是小型应用，都可以轻松应对分页需求。
本文将详细介绍几种常用的C#后台分页方法及其数据库脚本实现。 #### 第一种：从DataSet里筛选分页行的数据 这种方法是在客户端进行分页处理。首先，通过查询获取所有数据到一个`DataSet`中，然后根据当前页数和每...
**JSP后台通用分页** 是一种在Java Web开发中常用的技术，用于处理大量数据时进行高效的页面展示。在Web应用程序中，如果一次性加载所有数据，可能会导致内存资源的浪费和用户界面的响应速度降低。因此，分页技术...
2. **LIMIT与OFFSET**：在SQL中，我们使用LIMIT来限制返回的记录数，OFFSET则用于跳过前几条记录，这两者结合实现了分页。 3. **Page对象**：在JAVA中，我们可以创建一个Page对象，包含当前页码、每页记录数、总页数...
"ecshop后台分页示例代码"是针对ECShop后台进行分页功能实现的一个示例，下面我们将详细探讨这个主题。 首先，`article.php`是ECShop后台管理文章时的核心文件，其中包含了处理文章数据逻辑的部分。在这个示例中，...
本文将深入探讨如何利用Servlet实现后台分页功能，这在大数据量的Web应用中尤为重要，可以提高用户界面的响应速度和用户体验。 首先，我们需要了解分页的基本概念。分页是将大量数据分割成较小、易管理的部分，每次...
在本主题中，我们将深入探讨如何使用jQuery库中的AJAX方法来实现后台数据的分页功能。 首先，我们需要理解分页的基本原理。通常，分页涉及两个主要部分：前端和后端。前端负责显示分页链接或导航，并处理用户的交互...
本主题聚焦于“Hibernate+Struts”框架下实现后台分页的策略和方法。 Hibernate是一个强大的Java持久化框架，它简化了与数据库的交互，而Struts则是一个用于构建MVC（模型-视图-控制器）架构的Web应用框架。结合这...
这里我们将详细讲解如何使用jQuery DataTable实现后台动态分页。 首先，确保在HTML文件中引入了必要的CSS和JavaScript库，如jQuery核心库、DataTables库以及Bootstrap样式库（如果需要的话）。在提供的代码中，可以...