jquery分页 mysql(sqlserver、oracle)分页

最新推荐文章于 2021-02-17 04:18:28 发布

u010117166

最新推荐文章于 2021-02-17 04:18:28 发布

阅读量1.2k

点赞数

分类专栏： jquery 文章标签： jquery 分页 mysql jquery插件 springmvc

本文链接：https://blog.csdn.net/u010117166/article/details/12969137

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

进段时间手上没有什么事，整理电脑的时候，发现我关于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页面:

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;
}

jquery.pager.js:

   $(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>

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