利用AjAX+JSP+JSON+MYSQL实现无刷新分页,求实现过程

代码如下:

一.html代码部分:

<table class="table style-5"> 

 <thead id="t_head"> 

  <tr> 

   <th>序号</th> 

   <th>标题</th> 

   <th>地点</th> 

   <th>已报名</th> 

   <th>类别</th> 

   <th> *** 作</th> 

  </tr> 

</thead> 

<tbody id="t_body"> 

<!-- ajax填充列表 -->

</tbody> 

</table> 

<button id="firstPage">首页</button> 

<button id="previous">上一页</button> 

<button id="next">下一页</button> 

<button id="last">尾页</button>

二.ajax代码部分:

var pageSize = "10"//每页行数 

var currentPage = "1"//当前页 

var totalPage = "0"//总页数 

var rowCount = "0"//总条数 

var params=""//参数 

var url="activity_list.action"//action 

$(document).ready(function(){//jquery代码随着document加载完毕而加载 

 //分页查询 

 function queryForPages()

 { 

  $.ajax({ 

   url:url, 

   type:'post', 

   dataType:'json', 

   data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params, 

   success:function callbackFun(data)

   { 

    //解析json 

    var info = eval("("+data+")") 

    //清空数据 

    clearDate() 

    fillTable(info) 

   } 

  }) 

 } 

 //填充数据 

 function fillTable(info)

 { 

  if(info.length>1)

  { 

   totalPage=info[info.length-1].totalPage 

   var tbody_content=""//不初始化字符串"",会默认"undefined" 

   for(var i=0i<info.length-1i++)

   { 

    tbody_content +="<tr>" 

    +"<td data-title='序号' >"+(i+1+(currentPage-1)*pageSize)+"</td>" 

    +"<td data-title='标题'>"+info[i].title.substr(0,20)+"</td>" 

    +"<td data-title='地点'>"+info[i].address.substr(0,6)+"</td>" 

    +"<td data-title='已报名'>"+info[i].quota_sign+"人</td>" 

    +"<td data-title='类别'>"+info[i].type+"</td>" 

    +"<td data-title=' *** 作'><a href='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>编辑</a></td>" 

    +"</tr>" 

    $("#t_body").html(tbody_content) 

   } 

  }

  else

  { 

   $("#t_head").html("") 

   $("#t_body").html("<div style='height: 200pxwidth: 700pxpadding-top: 100px' align='center'>"+info.msg+"</div>") 

  } 

 } 

 //清空数据 

 function clearDate()

 { 

  $("#t_body").html("") 

 }

 //搜索活动 

 $("#searchActivity").click(function(){ 

  queryForPages()

 }) 

 //首页 

 $("#firstPage").click(function(){ 

  currentPage="1" 

  queryForPages() 

 }) 

 //上一页 

 $("#previous").click(function(){ 

  if(currentPage>1)

  { 

   currentPage--  

  } 

  queryForPages() 

 }) 

 //下一页 

 $("#next").click(function(){ 

  if(currentPage<totalPage)

  { 

   currentPage++  

  } 

  queryForPages() 

 }) 

 //尾页 

 $("#last").click(function(){ 

  currentPage = totalPage 

  queryForPages() 

 }) 

})

大数据量下的分页解决方法：要看你的数据存储是用的什么数据库了。常用的有mysql，sqlserver，oracle。没种数据库进行分页的SQL语句不同。

做大数据分页都是无刷新的技术，这里我们选择ajax来实现。ajax请求地址需要你使用后台代码来实现，后台代码除了要返回数据集合还要返回数据的总数量，总页数，下一页等参数，方便选择分页的时候获取数据。

下面看一下后台代码实现，sqlserver的分页SQL：selecttop一页数量*from表名where主键notin(selecttop15主键from表名)

mysql的分页语句SQL：select*from表名where主键>10orderbydeptnoascpmitn

记得我还在念大学的时候，一位教我们单片机的老师说了一句话："学习编程刚开始你就得照葫芦画瓢...",以前我在mysql中分页都是用的 limit 100000,20这样的方式，我相信你也是吧，但是要提高效率，让分页的代码效率更高一些，更快一些,那我们又该怎么做呢?

第一部分：看一下分页的基本原理：

第一部分：看一下分页的基本原理：

mysql explain SELECT * FROM message ORDER BY id DESC LIMIT 10000, 20

***************** 1. row **************

id: 1

select_type: SIMPLE

table: message

type: index

possible_keys: NULL

key: PRIMARY

key_len: 4

ref: NULL

rows: 10020

Extra:

1 row in set (0.00 sec) 对上面的mysql语句说明：limit 10000,20的意思扫描满足条件的10020行，扔掉前面的10000行，返回最后的20行，问题就在这里，如果是limit 100000,100，需要扫描100100行，在一个高并发的应用里，每次查询需要扫描超过10W行，性能肯定大打折扣。文中还提到limit n性能是没问题的，因为只扫描n行。

第二部分：根据雅虎的几位工程师带来了一篇Efficient Pagination Using MySQL的报告内容扩展：在文中提到一种clue的做法，给翻页提供一些线索，比如还是SELECT * FROM message ORDER BY id DESC，按id降序分页，每页20条，当前是第10页，当前页条目id最大的是1020，最小的是1000，如果我们只提供上一页、下一页这样的跳转（不提供到第N页的跳转），那么在处理上一页的时候SQL语句可以是：

完整请到：http://www.ityoudao.com/Web/Mysql_606_1349.html

---