分页有多种方式,mysql的limit是个不错的选择,通过ajax实现异步刷新,将当前页数和每页数量传入后台即可

1. 首先后台要拿到总记录数和所需显示数据列表,所以要分别写两个sql方法

我这里是通过spring的注解方式写的sql,其它方法原理是一样的

    /**
* 礼品列表(分页)
*/
@Select("select * from t_coupons limit ${firstnum},${maxnum}")
public List<Coupon> list(@Param("firstnum") long firstnum,@Param("maxnum") long maxnum); /**
* 礼品列表总条数
*/
@Select("select count(*) from t_coupons")
public int countlist();

2. 再是service的处理,这里因为每条显示数量由后台控制,所以只需要传入当前页数就行,如有需要可自己加

    /**
* 礼品列表
*/
public List<Object> list(int pageNow) {
//每页显示条数
int pageNum = 5;
//开始条数
int beginNum = (pageNow - 1) * pageNum;
//查询
List<Coupon> couponDataTotal = couponDataDao.list(beginNum, pageNum);
//总条数
int count = couponDataDao.countlist();
//总页数
int allPage = PageUtil.countPageByCountAndpageNum(count, pageNum);
//数据集合
List<Object> list = new ArrayList<Object>();
list.add(couponDataTotal);
list.add(allPage);
return list; }

后台返回的是一个object数据,包含数据列表和总页数

3. 接下来就是前端处理了,我同事写了一个公共js,只需要引用js和一行html即可实现上一页、下一页的控制效果和当前页数、总页数的显示,觉得很不错,所以拿来用了

/**
* 分页的改变
* @param pageShowId 分页显示的id
* @param i (1 上一页,2 下一页,3 当前页,4 第一页)
* @returns 操作过后的页数(当前页)
*/
function pageChange(pageShowId,i){
if(i == 1){
clickUp(pageShowId);
}else if(i == 2){
clickNext(pageShowId);
}else if(i == 4){
setPageNum(pageShowId, 1, 1);
}
var nowPage = getPageNum(pageShowId, 1);
return nowPage;
} /**
* 点击上一页的时候触发
*/
function clickUp(pageShowId){
var now = getPageNum(pageShowId,1);
if(now==1){
nowPage = 1;
}else if(now>1){
nowPage = parseInt(now) - 1;
}
setPageNum(pageShowId,1,nowPage);
} /**
* 点击下一页时触发
* @param pageShowId
* @returns
*/
function clickNext(pageShowId){
var now = getPageNum(pageShowId,1);
var all = getPageNum(pageShowId,2);
if(now==all){
nowPage = all;
}else if(parseInt(now)<parseInt(all)){
nowPage = parseInt(now) + 1;
}else{
nowPage = 1;
}
setPageNum(pageShowId,1,nowPage);
} /**
* 获取分页(pageShowId 显示分页的id,index 1为当前页,2为总页)
*/
function getPageNum(pageShowId,index){
var pageText = $("#"+pageShowId+"").text();
var strs= new Array(); //定义一数组
strs = pageText.split("/");
if(index==1){
return strs[0];
}else if(index==2){
return strs[1];
}
} /**
* 设置分页(pageShowId 显示分页的id,index 1为当前页,2为总页,str 是要修改的字符串)
*/
function setPageNum(pageShowId,index,str){
var pageText = $("#"+pageShowId+"").text();
var strs= new Array(); //定义一数组
strs = pageText.split("/");
if(index==1){
//修改当前页
$("#"+pageShowId+"").text(str+"/"+strs[1]);
}else if(index==2){
//修改总页
$("#"+pageShowId+"").text(strs[0]+"/"+str);
}
}

这个js基本不用改,直接引用然后配合下面的html代码,基本通用

4. 然后是html界面

<div class="table-cont">
<table width="100%" border="0" class="ins" cellspacing="0" cellpadding="0">
<tr class="tbHead">
<td>部门机构(支行)名称</td>
<td>已分配</td>
<td>价值</td>
<td>已发放</td>
<td>价值</td>
<td>库存</td>
<td>价值</td>
<td>已领取</td>
<td>未领取</td>
<td>已使用</td>
<td>未使用</td>
<td>使用中</td>
<td>操作</td>
</tr>
</table>
</div> <div class="pager tc">
<input name="" type="button" value="上一页" onclick="change(1)" class="btn_prev" />
<span id="pageShow-up" class="btn_page">1/1</span>
<input name="" type="button" value="下一页" onclick="change(2)" class="btn_next" />
<input name="" type="button" value="返回" onclick="javascript:history.go(-1)" class="btn_back" />
</div>

其实只有

<span id="pageShow-up" class="btn_page">1/1</span>

这行代码不能变,其它都是可以根据界面需求自己改的

5. 最后就是通过ajax将当前页数传入后台即可

//获取支行礼品统计列表
function getBranchCouponDataList(nowPage){
$(".remove").remove();
$.ajax({
url:path + "/couponData/branchCouponData",
type:"POST",
dataType: "json",
data:{nowPage:nowPage},
success:function(data){
//设置总页数
setPageNum("pageShow-up", 2, data[1]);
var html = '';
for(var i=0; i<data[0].length; i++){
var info = data[0][i];
html +=" <tr class='cl remove'>"
+" <td>"+info.branch_name+"</td>"
+" <td>"+info.puted_num+"份</td>"
+" <td>"+info.sum_price+"元</td>"
+" <td>"+info.send_num+"份</td>"
+" <td>"+info.send_price+"元</td>"
+" <td>"+info.last_num+"份</td>"
+" <td>"+info.last_price+"元</td>"
+" <td>"+info.receive_num+"份</td>"
+" <td>"+info.not_receive+"份</td>"
+" <td>"+info.used_num+"份</td>"
+" <td>"+info.notuse_num+"份</td>"
+" <td>"+info.useing_num+"份</td>"
+" <td>"
+" <input name='' type='button' value='查看' class='btn_red' onclick='toManagerCouponData("+info.branch_id+")'/>"
+" </td>"
+" </tr>";
}
$(".ins").append(html);
},
error:function(e){
alert("错误");
}
});
}

在加载页面时,可以默认传1也就是第一页执行此方法

以上基本就能实现一个ajax分页,且通用性高,需要改动的地方不多

mysql分页(ajax)的更多相关文章

  1. Oracle、SQL Server、MySQL分页方法

    测试用例:查询TEST_TABLE表中TEST_COLUMN列的第10-20条数据 1,Oracle分页方法 SELECT A.* FROM ( SELECT ROWNUM ROWNO, B.* FR ...

  2. MySql 分页

    MySql 分页 由于最近项目需要,于是就简单写了个分页查询.总体而言MySql 分页机制较为简单.数据库方面只需要使用limit即可实现分页.前后台交互就直接用session传了值. 下面就写写具体 ...

  3. FluentData Mysql分页的一个BUG

    开发环境 FluentData3.0.VS.NET2010.Mysql5.0 问题描述 使用FluentData对一个表(记录数28)进行分页时,突然发现一个诡异的问题,第一页返回10条数据正常,第二 ...

  4. Mysql 分页语句Limit用法

    转载自:http://qimo601.iteye.com/blog/1634748 1.Mysql的limit用法 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用 ...

  5. php+mysql分页类的入门实例

    php+mysql分页类的简单代码 时间:2016-02-25 06:16:26来源:网络 导读:php+mysql分页类的简单代码,二个php分页类代码,对商品进行分页展示,当前页面数,每个页面展示 ...

  6. sqlserver分页;mysql分页;orcale分页 的sql 查询语句

    一,sqlserver分页: )) ID FROM 表名 AS 表名1_1 ORDER BY ID)) ORDER BY ID; 二:mysql分页 )*每页显示的数据条数,当前页码 * 每页显示的数 ...

  7. MySQL分页实现

    mysql> select pname from product; +--------+ | pname  | +--------+ | 产品1  | | 产品2  | | 产品三 | +--- ...

  8. MySQL分页优化中的“INNER JOIN方式优化分页算法”到底在什么情况下会生效?

    本文出处:http://www.cnblogs.com/wy123/p/7003157.html 最近无意间看到一个MySQL分页优化的测试案例,并没有非常具体地说明测试场景的情况下,给出了一种经典的 ...

  9. oracle和mysql分页

    mysql分页 关键字limit,limit m,n 其中m表示起始位置的下标,下标从0开始.n表示要显示的条数,比如要查询一个表的第2到5条数据. ,; oracle分页 关键字rownum, ro ...

  10. EF获取多个数据集以及MySQL分页数据查询优化

    背景:MySQL分页查询语句为 ,10; 一般页面还会获取总条数,这时候还需要一条查询总条数语句 , 这样数据库需要执行两次查询操作.MySQL提供了SQL_CALC_FOUND_ROWS追踪总条数的 ...

随机推荐

  1. springboot之约定大约配置

    前言 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样 ...

  2. 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(四)——对 run.py 的调整

    使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...

  3. Abp中SwaggerUI的接口说明文档配置

    项目中集成了swashbuckle,那么通过访问http://ip:port/swagger/ui/index,可以看到提供的接口列表.接口列表默认是没有提供接口说明信息的,但是swagger内部是集 ...

  4. Spring-boot简单的理解

    SpringBoot启动 SpringApplication.run(MyBootApplication.class); SpringApplication.run启动SpringBoot应用,主要过 ...

  5. [C语言] 数据结构-算法效率的度量方法-事前分析估算方法

    事前分析估算方法:在计算机程序编制前,依据统计方法对算法进行估算,抛开与计算机硬件软件有关的因素,一个程序的运行时间,依赖于算法的,好坏和问题的输入规模,所谓问题输入规模是指输入量的多少 推导过程,比 ...

  6. MyEclipse设置选中单词其它同名单词前景色和背景色

    General->Editors->Annotations->Occurrences

  7. POJ 2480 Longge's problem 欧拉函数—————∑gcd(i, N) 1<=i <=N

    Longge's problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6383   Accepted: 2043 ...

  8. 序列化模块1 json

    ......得到一个 字符串 的结果 过程就叫序列化 字典 / 列表 / 数字 /对象 -序列化->字符串 为什么要序列化 # 1.要把内容写入文件 序列化 # 2.网络传输数据 序列化 字符串 ...

  9. Code Signal_10分钟挑战题_constructArray

    完成时间3分06秒 Given an integer size, return an array containing each integer from 1 to size in the follo ...

  10. animation3 背景小动画笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...