jquery分页 mysql(sqlserver、oracle)分页

进段时间手上没有什么事，整理电脑的时候，发现我关于jquery学习文件夹中，有好几个不同形式的分页，各种各样的，五花八门，然后就整理了一下。分页是项目最常见的功能之一，对于大神来说，那是小菜一碟，但是对于刚刚进入IT行业的菜鸟来说，有时候还真是一个头疼的问题。欢迎各位路过的大神不吝赐教，指出错误，相互交流一下。对于新手来说可以借鉴一下。下面进入正题：

一：分页效果

我贴出几个不同的分页效果，有适合自己的就看看，没有合适的就轻轻的来，再轻轻的走。







入手编写程序到现在经常使用的就这三种形式的分页，其中第二种最为常见。

二：分页思路

常见的有以下几种：

1、基于sql语句分页 2、 采用jquery插件进行分页 3、对返回的集合进行分页 还有其他的，个人能力有限，就不一一列举啦。

三 ： 分页原理

分页原理实质就是：pageNum(当前页) pageSize(页容量) ，向后台提交请求的参数也是这两个。

四： 实现分页相关代码

1.sql语句分页(基于最基础的分页)

sqlserver语句: select top pagesize from table1 where id not in(select top pagesize*(pagenum-1) id from table1)

mysql 语句：select * from tb_notice order limit pagenum ,pagesize

oracle 语句: select t1. * from (select tx.*, rownum as number from table2 as t2 where number<20 ) as t1 where t1.number>10

2.采用jquery插件分页

网上有很多写好的插件，这里我上传一个我同事曾经自己封装的一个js分页插件，有需要的朋友可以下载看看哈。
http://download.csdn.net/detail/u010117166/6441955 这是下载链接地址。

3 对返回的集合进行分页

int pageIndex1 = 0; // 当前页

int lastIndex = 0; // 最后一页

int pageSize =3; // 页容量

// 取出当前页的值

String pageIndex = request.getParameter("pageIndex");

try {

List<TbNotice> list1 = noticeservice.getList();

if (pageIndex == null) {

pageIndex1= 1;

} else {

pageIndex1 = Integer.parseInt(pageIndex);

}

// 得到最后一页的页码

lastIndex = list1.size() % pageSize== 0 ? (list1.size() / pageSize) : (list1

.size() /pageSize + 1);

if ( pageIndex1< 1) {

pageIndex1 = 1;

}

if ( pageIndex1 > lastIndex) {

pageIndex1= lastIndex;

}

//对集合进行分页

TbNotice notice=null;

List<TbNotice> list=new ArrayList<TbNotice>();

if( pageIndex1==1)

{

for(int i= pageIndex1-1;i<pageSize* pageIndex1;i++)

{

notice= list1.get(i);

list.add(notice);

}

}else

{

if(list1.size()<pageSize* pageIndex1)

{

for(int i=pageSize*( pageIndex1-1);i<list1.size();i++)

{

notice= list1.get(i);

list.add(notice);

}

}else

{

for(int i=pageSize*( pageIndex1-1);i<pageSize* pageIndex1;i++)

{

notice= list1.get(i);

list.add(notice);

}

}

}

//存值

request.setAttribute("list", list);

request.setAttribute("count", lastIndex);

request.setAttribute("pageIndex", pageIndex1);

五 分页demo

demo是使用springmvc+mybtis+mysql的框架,自己可以修改一下，然后运行。

1.jsp页面:

<link rel="stylesheet" href="css/page.css" type="text/css"></link>

page.css:

#page ul.pages {

display:block;

border:none;

text-transform:uppercase;

font-size:12px;

margin:10px 0 50px;

padding:0;

}

#page ul.pages li {

list-style:none;

float:left;

border:1px solid #ccc;

text-decoration:none;

margin:0 5px 0 0;

padding:5px;

}

#page ul.pages li:hover {

border:1px solid #003f7e;

}

#page ul.pages li.pgEmpty {

border:1px solid #eee;

color:#eee;

}

#page ul.pages li.pgCurrent {

border:1px solid #003f7e;

color:#000;

font-weight:700;

background-color:#eee;

}

<script type="text/javascript" src="js/jquery.pager.js"></script>

jquery.pager.js:

(function($) {

$.fn.pager = function(options) {

var opts = $.extend({}, $.fn.pager.defaults, options);

return this.each(function() {

$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));

$('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });

});

};

function renderpager(pagenumber, pagecount, buttonClickCallback) {

var $pager = $('<ul class="pages"></ul>');

$pager.append(renderButton("首页", pagenumber, pagecount, buttonClickCallback)).append(renderButton("上一页", pagenumber, pagecount, buttonClickCallback));

var startPoint = 1;

var endPoint = 9;

if (pagenumber > 4) {

startPoint = pagenumber - 4;

endPoint = pagenumber + 4;

}

if (endPoint > pagecount) {

startPoint = pagecount - 8;

endPoint = pagecount;

}

if (startPoint < 1) {

startPoint = 1;

}

for (var page = startPoint; page <= endPoint; page++) {

var currentButton = $('<li class="page-number">' + (page) + '</li>');

page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });

currentButton.appendTo($pager);

}

$pager.append(renderButton("下一页", pagenumber, pagecount, buttonClickCallback)).append(renderButton("末页", pagenumber, pagecount, buttonClickCallback));

return $pager;

}

function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {

var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');

var destPage = 1;

switch (buttonLabel) {

case "首页":

destPage = 1;

break;

case "上一页":

destPage = pagenumber - 1;

break;

case "下一页":

destPage = pagenumber + 1;

break;

case "末页":

destPage = pagecount;

break;

}

if (buttonLabel == "首页" || buttonLabel == "上一页") {

pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });

}

else {

pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });

}

return $Button;

}

$.fn.pager.defaults = {

pagenumber: 1,

pagecount: 1

};

})(jQuery);

<script type="text/javascript">

$(function(){

pagejump(0);

});

function pagejump(pageNo){

$.post("notice/getNoticeList",{pageIndex:pageNo},function(data){

$("#getnoticelist").empty();

if(data.list.length<=0)

{

$("#getnoticelist").append("<span style='color:red;font-size:15px;'><center>没有公告信息!</center></span>");

}else

{

//公告列表

$("#getnoticelist").append("<div style='margin-left:30px;margin-bottom:15px;'><div style='font-family:微软雅黑;font-size:13px;'><img src='${ctx}/member/images/point.jpg'><a href='${ctx}/notice/getNoticeById?noticeId="+notice[i].noticeid+"'
target='_blank' >"+notice[i].title+"</a><span></span></div> <div style='margin-left:12px;width:800px;height:auto;'><p style='text-align:left;'> <span style='font-family:微软雅黑;font-size:13px;font-weight:normal;font-style:normal;text-decoration:none;color:#333333;margin-left:20px;'>"+abstract1_+"<br/>"+abstract2_+"</span></p></div></div>
<div style='margin-left:40px;'></div>");

}

}

var pageCount=data.count;

$("#page").pager({ pagenumber: pageNo, pagecount: pageCount, buttonClickCallback: pagejump });

var pagerWidth = 95*2+$(".page-number").length*33;

$("#page").css("width",pagerWidth);

},'json');

}

</script>

<!--公告列表 -->

<div id="getnoticelist"> </div>

<!--分页-->

<div id="page" style="margin: auto;"></div>

2 控制层controller

@RequestMapping(value = "/getNoticeList")

public String getNoticeList(HttpServletRequest request,HttpSession session, PrintWriter writer) {

JSONObject jsonObj = new JSONObject();

int pageIndex1 = 0; // 当前页

int lastIndex = 0; // 最后一页

int pageSize =3; // 页容量

// 取出当前页的值

String pageIndex = request.getParameter("pageIndex");

try {

List<TbNotice> list1 = noticeservice.getList();

if (pageIndex == null) {

pageIndex1 = 1;

} else {

pageIndex1 = Integer.parseInt(pageIndex);

}

// 得到最后一页的页码

lastIndex = list1.size() % pageSize== 0 ? (list1.size() / pageSize) : (list1

.size() /pageSize + 1);

if (pageIndex1 < 1) {

pageIndex1 = 1;

}

if (pageIndex1 > lastIndex) {

pageIndex1 = lastIndex;

}

if (list1.size() > 0) {

List<TbNotice> list = noticeservice.getNoticeList((pageInd - 1)

* pageSize, pageSize);

jsonObj.put("list", list);

jsonObj.put("count", lastIndex);

jsonObj.put("pageIndex", pageIndex1 );

jsonObj.put("lastIndex", lastIndex);

} else {

logger.info("没有公告信息!");

jsonObj.put("list",list1.size());

jsonObj.put("count", 1);

jsonObj.put("pageIndex",1);

jsonObj.put("lastIndex", lastIndex);

}

} catch (Exception e) {

e.printStackTrace();

}

writer.print(jsonObj);

return null;

}

3 services

public List<TbNotice> getNoticeList(int start, int pageSize) {

List<TbNotice> noticelist = tbNoticeMapper.getPageNotice(start,

pageSize);

return noticelist;

}

4 mapper

List<TbNotice> getPageNotice(@Param("start") int start,

@Param("pageSize") int pageSize);

5 数据库

<select id="getPageNotice" parameterType="map" resultType="com.rdkl.register.entity.tb.TbNotice">

select noticeid, title,abstracts,content,createtime,pubuser,pubtime,sort

from tb_notice where state=2 order by sort desc limit #{start},#{pageSize}

</select>

差不多啦吧，有需要的朋友，自己拿去研究一下。事在人为，只要持之以恒，一切问题都不是问题。