PS:前面忘了给大家讲解后台需要做的 ,同步分页的时候,我们只需要定义一个方法,给前台传递一个page对象,前台接收到直接展示即可;异步分页要多一步,首先还是写一个方法,传递初始对象,后面的ajax返回的时候需要再定义一个方法,作为分页数据刷新。

  上一篇文章为给大家讲到了同步分页,封装完整,复用性高,但是缺点就是每次点击的时候需要刷新整个界面,碍于开发的需要,当某些界面存在几个分页的时候缺点就出来了,于是又在这个基础上做了一些小调整,使用了ajax的方式,实现局部刷新分页,现在把代码给大家共享一下:

1、JSP页面跟同步分页差不多

a)、不在只是局限于只定义一个form表单,可以在每个需要分页的地方都写一个;

<div>
<div class="color size14" style="margin-top: 95px">
账号记录
</div>
<div class="table-responsive" style="margin-top: 20px;margin-left: 0">
<table id="sample-table-1" class="table table-striped table-bordered table-hover" style="margin-left: 0"> <thead>
<tr>
<th>序号</th>
<th>操作人</th>
<th>操作时间</th>
<th>操作描述</th>
<th>内容</th>
<th>结果</th>
</tr>
</thead>
<tbody id="operLog-tbody">
<%--分页内容--%>
<c:forEach items="${operLogPage.list}" var="operlog" varStatus="status">
<tr>
<td>${status.index+1}</td>
<td>${operlog.operater}</td>
<td>${operlog.updateTime}</td>
<td>${operlog.remark}</td>
<td>${operlog.operName}</td>
<td>${operlog.result}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div class="page">
<form class="submitPage operlogForm" action="${ctx}/admin/userManage/getOperLogPagination" > </form>
</div>
</div>

  2、将同步分页的page.js里面的整体封装成一个方法,方便重复调用:

<!--基本信息分页-->
function getOperlogPage(operlogCurpage,operlogTotalPage,formName) {
var curPageNum = 1;
var curtotalpage = 4;
curPageNum = operlogTotalPage;
//前5页//后5页
//需要计算开始页数
var startpage = 1; if (operlogCurpage == null) {
operlogCurpage = 1;
}
if (operlogCurpage <= 3) {
startpage = 1;
} else {
startpage = operlogCurpage - 3 + startpage;
}
var prepage = operlogCurpage - 1;
var nextpage = parseInt(operlogCurpage) + 1;
var endpage = startpage + curtotalpage;
if (endpage > operlogTotalPage) {
endpage = operlogTotalPage;
}
var front = operlogCurpage - 3;
var back = parseInt(operlogCurpage) + 2;
//上一页
if (prepage >= 1) {
var prepage = '<input class="inp pages" id="oper_pre" type="button" value="上一页" onclick="nextOperlogPageToForm(' + prepage + ')">';
$(prepage).appendTo(formName);
}
//前省略
if (front > 0) {
var qiandian = '<input class="inp nob" type="button" value="1" onclick="nextOperlogPageToForm(1)">';
qiandian += '<input class="inp dian mr" type="button" value="..."> ';
formName.append(qiandian);
}
//页码
for (var i = startpage; i <= endpage; i++) {
var wtpage = null;
if (i == operlogCurpage) {
wtpage = '<input class="inp nob active" type="button" value="' + i + '" onclick="nextOperlogPageToForm(' + i + ')">';
} else {
wtpage = '<input class="inp nob" type="button" value="' + i + '" onclick="nextOperlogPageToForm(' + i + ')">';
}
$(wtpage).appendTo(formName);
}
//后省略
if (back < operlogTotalPage && operlogTotalPage > 5) {
var houdian = '<input class="inp dian mr" type="button" value="..."> ';
houdian += '<input class="inp nob" type="button" value="' + operlogTotalPage + '" id="oper_total" onclick="nextOperlogPageToForm(1)">';
formName.append(houdian);
}
//下一页
if (nextpage <= operlogTotalPage) {
var nextcontent = '<input class="inp pages" id="oper_next" type="button" value="下一页" onclick="nextOperlogPageToForm(' + nextpage + ')" >';
$(nextcontent).appendTo(formName);
}
//跳转页码
var pageNum1 = '  第  <input class="inp nob inner" type="text" id="operlog-input" value="' + operlogCurpage + '" >  页  ';
formName.append(pageNum1);
var pageNum2 = '<a href="javascript:jumpOperlog();" class="color6">跳转</a>';
formName.append(pageNum2); }

  3、JSP页面调用方法:

 var curPageNum=1;
getOperlogPage('${operLogPage.pageNo}','${operLogPage.totalPage}',$(".operlogForm"));

  4、ajax分页:

 //上一页/下一页 首页/尾页 适用于带form参数
function nextOperlogPageToForm(pageNo){
if( $(document).find(".operlogForm").length > 0){ $("<input id='pageNo' name='pageNo' type='hidden' value=\""+pageNo+"\">").appendTo(".operlogForm");
$.ajax({
type: "POST",
url: "${ctx}/admin/userManage/getOperLogPagination",
data: {
id:${model.id},
pageNo:pageNo
},
success:function(data){
$("#sample-table-1 tr:not(:first)").html("");
var operLogVo = data.list;
for(var i = 0;i<operLogVo.length;i++){
$("#operLog-tbody").append(" "
+" <tr>"
+"<td>"+(i+1)+"</td>"
+"<td>"+(operLogVo[i].operater)+"</td>"
+"<td>"+(operLogVo[i].updateTime)+"</td>"
+"<td>"+(operLogVo[i].remark)+"</td>"
+"<td>"+(operLogVo[i].operName)+"</td>"
+"<td>"+(operLogVo[i].result)+"</td>"
);
} }
});
$(".operlogForm").empty();
getOperlogPage(pageNo,'${operLogPage.totalPage}',$(".operlogForm"));
/* $(".operlogForm").find('.nob').removeClass('active');
$(".operlogForm").find('input[value="'+pageNo+'"]').addClass('active');*/
}
}

  5、效果与前者一样,还是给大家看看图片

项目开发之分页---异步分页(ajax)的更多相关文章

  1. 项目:《ssh框架综合项目开发视频》-视频目录和第六天的EasyUI简单讲解

    4 练习使用技术: Struts2 + hibernate5.x + spring4.x + mysql数据库 1 crm:customer relational manager,客户关系管理 2 c ...

  2. 5.Hibernate实现全套增删改查和ajax异步分页

    1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...

  3. jQuery+Ajax+PHP实现异步分页数据显示

    这几天做毕业设计的时候需要使用到一个异步分页的功能,即翻页的时候只是刷新分页的数据而不是刷新整个页面.因为之前做项目的时候没有做过这方面的功能,所以还是纠结了挺长时间的,在网上也找了很多资料,结合自己 ...

  4. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  5. 利用Linq + Jquery + Ajax 异步分页的实现

    在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...

  6. SPA项目开发之动态树+数据表格+分页

    SPA项目开发之动态树+数据表格+分页 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> < ...

  7. SPA项目开发动态树、数据表格、分页功能

    SPA项目开发 1.修改左侧动态树 LeftNav.vue <template> <el-menu router :" class="el-menu-vertic ...

  8. Java项目开发中实现分页的三种方式一篇包会

    前言   Java项目开发中经常要用到分页功能,现在普遍使用SpringBoot进行快速开发,而数据层主要整合SpringDataJPA和MyBatis两种框架,这两种框架都提供了相应的分页工具,使用 ...

  9. Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用

    在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...

随机推荐

  1. 使用Scala操作Mongodb

    介绍 Scala是一种功能性面向对象语言.它融汇了很多前所未有的特性.而同一时候又执行于JVM之上.随着开发人员对Scala的兴趣日增,以及越来越多的工具支持,无疑Scala语言将成为你手上一件不可缺 ...

  2. SQLServer中处理每天四亿三千万记录

    我是如何在SQLServer中处理每天四亿三千万记录的   首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地 ...

  3. HBuilder js 自定义代码块

    =begin 本文档是HBuilder预置的js代码块的文件.注意不要把其他语言的设置放到js里来. 如果用户修改此文档,HBuilder升级后会覆盖用户的修改,建议进入菜单 工具→扩展代码块 扩展相 ...

  4. 使用 C# 进行 Outlook 2003 编程

    原文:使用 C# 进行 Outlook 2003 编程 摘要: 本文介绍了 Microsoft Outlook 2003 对象模型介,并探讨了如何使用 C# 编程语言生成 Outlook 识别的应用程 ...

  5. 如何查找Linux的函数定义的位置?

    网上的许多站点提供这样的服务,如下面这个: http://lxr.free-electrons.com/ident?v=3.10 Linux的错误返回值:3.10版本 Linux/include/ua ...

  6. ThoughtWorks Merchant's Guide To The Galaxy

    ThoughtWorks笔试题之Merchant's Guide To The Galaxy解析 一.背景 在某网站上看到ThoughtWorks在武汉招人,待遇在本地还算不错,就投递了简历.第二天H ...

  7. mysql主从同步配置(windows环境)

    mysql主从同步配置(mysql5.5,windows环境)   A主机(作为主服务器)环境:windows8.mysql5.5 ip:192.168.1.100(自己填) B主机(作为从服务器,由 ...

  8. Smarty从配置文件读取的变量

    从配置文件读取的变量 配置文件中的变量需要通过用两个"#"或者是smarty的保留变量 $smarty.config.来调用(下节将讲到) 第二种语法在变量作为属性值并被引号括住的 ...

  9. beanutils获取带参数get方法

    public Employee getEmployee(int index) {        return new Employee();    } 1.PropertyUtils.getIndex ...

  10. psql: FATAL: role “postgres” does not exist 解决方案

    当时想做的事情,是运行一个创建数据库的脚本.找到的解决方案差不多和下面这个链接相同. http://stackoverflow.com/questions/15301826/psql-fatal-ro ...