mysql分页(ajax)
分页有多种方式,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)的更多相关文章
- Oracle、SQL Server、MySQL分页方法
测试用例:查询TEST_TABLE表中TEST_COLUMN列的第10-20条数据 1,Oracle分页方法 SELECT A.* FROM ( SELECT ROWNUM ROWNO, B.* FR ...
- MySql 分页
MySql 分页 由于最近项目需要,于是就简单写了个分页查询.总体而言MySql 分页机制较为简单.数据库方面只需要使用limit即可实现分页.前后台交互就直接用session传了值. 下面就写写具体 ...
- FluentData Mysql分页的一个BUG
开发环境 FluentData3.0.VS.NET2010.Mysql5.0 问题描述 使用FluentData对一个表(记录数28)进行分页时,突然发现一个诡异的问题,第一页返回10条数据正常,第二 ...
- Mysql 分页语句Limit用法
转载自:http://qimo601.iteye.com/blog/1634748 1.Mysql的limit用法 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用 ...
- php+mysql分页类的入门实例
php+mysql分页类的简单代码 时间:2016-02-25 06:16:26来源:网络 导读:php+mysql分页类的简单代码,二个php分页类代码,对商品进行分页展示,当前页面数,每个页面展示 ...
- sqlserver分页;mysql分页;orcale分页 的sql 查询语句
一,sqlserver分页: )) ID FROM 表名 AS 表名1_1 ORDER BY ID)) ORDER BY ID; 二:mysql分页 )*每页显示的数据条数,当前页码 * 每页显示的数 ...
- MySQL分页实现
mysql> select pname from product; +--------+ | pname | +--------+ | 产品1 | | 产品2 | | 产品三 | +--- ...
- MySQL分页优化中的“INNER JOIN方式优化分页算法”到底在什么情况下会生效?
本文出处:http://www.cnblogs.com/wy123/p/7003157.html 最近无意间看到一个MySQL分页优化的测试案例,并没有非常具体地说明测试场景的情况下,给出了一种经典的 ...
- oracle和mysql分页
mysql分页 关键字limit,limit m,n 其中m表示起始位置的下标,下标从0开始.n表示要显示的条数,比如要查询一个表的第2到5条数据. ,; oracle分页 关键字rownum, ro ...
- EF获取多个数据集以及MySQL分页数据查询优化
背景:MySQL分页查询语句为 ,10; 一般页面还会获取总条数,这时候还需要一条查询总条数语句 , 这样数据库需要执行两次查询操作.MySQL提供了SQL_CALC_FOUND_ROWS追踪总条数的 ...
随机推荐
- springboot之约定大约配置
前言 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(四)——对 run.py 的调整
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- Abp中SwaggerUI的接口说明文档配置
项目中集成了swashbuckle,那么通过访问http://ip:port/swagger/ui/index,可以看到提供的接口列表.接口列表默认是没有提供接口说明信息的,但是swagger内部是集 ...
- Spring-boot简单的理解
SpringBoot启动 SpringApplication.run(MyBootApplication.class); SpringApplication.run启动SpringBoot应用,主要过 ...
- [C语言] 数据结构-算法效率的度量方法-事前分析估算方法
事前分析估算方法:在计算机程序编制前,依据统计方法对算法进行估算,抛开与计算机硬件软件有关的因素,一个程序的运行时间,依赖于算法的,好坏和问题的输入规模,所谓问题输入规模是指输入量的多少 推导过程,比 ...
- MyEclipse设置选中单词其它同名单词前景色和背景色
General->Editors->Annotations->Occurrences
- 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 ...
- 序列化模块1 json
......得到一个 字符串 的结果 过程就叫序列化 字典 / 列表 / 数字 /对象 -序列化->字符串 为什么要序列化 # 1.要把内容写入文件 序列化 # 2.网络传输数据 序列化 字符串 ...
- Code Signal_10分钟挑战题_constructArray
完成时间3分06秒 Given an integer size, return an array containing each integer from 1 to size in the follo ...
- animation3 背景小动画笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...