基于jQuery ligerUI实现分页样式
在公司实习看到公司框架里使用了ligerUI的grid进行分页，个人感觉挺好用的，自己摸索着实现了一遍记录下来
简单来说，liger grid 就是提交准备好的数据到指定的目标请求数据，拿到数据以后，显示出来（通过ajax实现）。
ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。
这里只实现基于ligerUI的分页
LigerUI的分页方式有两种：local和server。
如果数据量不是很大，就直接采用local分页，一次性的把数据全部发送到前台来，之后LigerUI自身的grid会自动分页。说一下 total，在后台传送jsonString时传送定义好的total（总条数），你可以定义多少都可以，但是到前台它会自动将总条数赋值给total， 这是local下的方式。
而如果数据量很大，一次性加载直接不显示数据或反应很慢的，就需要用server分页了，当用server分页时，每次请求都会比local时多发送两个参数：page和pagesize，不需要自己去发送，只需要在后台获取就行。
int page=Integer.parseInt(request.getParameter("page"));
int pagesize=Integer.parseInt(request.getParameter("pagesize"));
int total;
这时你可以把page和pagesize写进你的sql语句：
sql=".........";
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
这样查出的结果放入jsonString中，这里要注意total了，total需要自己定义，需要自己重新查一下结果的总条数后赋值给total传到页面，其他的LigerUI会帮你搞定！
关于更多的ligerUI grid参官网考API http://api.ligerui.com/?to=grid
关于选择前端分页还是后台分页参考http://www.jb51.net/article/86326.htm
local实现只需要将查询的数据全部提交到前端框架会自动帮你实现分页，但是我个人并不提倡进行客户端分页，Web应用服务器和客户端之间是网络,如果网络传递的数据量越少,则客户端获得响应的速度越快.而且一般来说,数据库服务器和Web应用服务器的处理能力一般比客户端要强很多.从这两点来看,在客户端分页的方案是最不可取的
下面上server端分页代码：
由于只使用了分页所以只导入了部分插件和图片
引入需要的jquery，liger和css
<link href="js/ligerui-all.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-3.0.0.js"></script> <script type="text/javascript" src="js/ligerui.all.js"></script>
jsp中样例如下：在ligerGrid中需要指定dataAction（默认是local），请求的url，page和pageSize，其中page和pageSize可以在后台获取
<script type="text/javascript" >
$(function(){
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '序号',
render:function(record, rowindex, value, column){
return rowindex+1;
}
},
{ name: 'title', display: '标题'}
],
height:210,
dataAction:"server",
url:"LUServlet",
page:"1",
pageSize:"5"
});
});
</script>
</head>
<body>
<div style="width:600px">
<div id="maingrid"></div>
</div>
model类和测试数据库
//为了省事用sql.Date
import java.sql.Date;
public class Blog {
private int id;
private int category_id;
private String title;
private String content;
private Date created_time;
//getter和setter方法
@Override
public String toString() {
return "Blog [id=" + id + ", category_id=" + category_id + ", title=" + title + ", content=" + content
+ ", created_time=" + created_time + "]";
}
}
dao类，用jdbc测试
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import model.Blog;
public class MysqlTest {
PreparedStatement ps = null;
ResultSet rs = null;
Connection connect = null;
public MysqlTest() {
try {
Class.forName("com.mysql.jdbc.Driver");
connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/blogs_stu", "root", "");
} catch (Exception e) {
e.printStackTrace();
}
}
//返回一个Blog数组，用于拼接json字符串
//不用model时可以直接在此处拼接json字符串返回
//传入page和pagesize用于判断最后一页数组长度，否则会报错
public Blog[] getInfo(String sql,int page,int pagesize) {
int total=getTotal();
if(page*pagesize>=total){
pagesize=total%pagesize;
}
Blog[] blog = new Blog[pagesize];
try {
ps = connect.prepareStatement(sql);
rs = ps.executeQuery();
int index=0;
while (rs.next()) {
blog[index]=new Blog();
blog[index].setId(rs.getInt("id"));
blog[index].setCategory_id(rs.getInt("category_id"));
blog[index].setTitle(rs.getString("title"));
blog[index].setContent(rs.getString("content"));
blog[index].setCreated_time(rs.getDate("created_time"));
index++;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (connect != null)
try {
connect.close();
ps.close();
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return blog;
}
//获取总记录数total
public int getTotal(){
int total=0;
String sql="";
try {
sql="select count(id) from blog";
ps = connect.prepareStatement(sql);
rs = ps.executeQuery();
while(rs.next()){
total=rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
return total;
}
}
后台servlet实现
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import model.Blog;
import mysqljdbc.MysqlTest;
@WebServlet("/LUServlet")
public class LUServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
//获取页面的page和pagesize，拼接sql用
int page=Integer.valueOf(request.getParameter("page"));
int pagesize=Integer.valueOf(request.getParameter("pagesize"));
MysqlTest test=new MysqlTest();
//在拼接json字符串是传给前台一个total记录总数，ligerUI grid会自动获取该total
int total=test.getTotal();
request.setAttribute("total", total);
//用的mysql，查找限定条数语句用limit,从page*pagesize-pagesize开始，取pagesize条
String sql="select * from blog";
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
Blog[] blog=test.getInfo(sql,page,pagesize);
//将数据拼接成json字符串
StringBuffer strbuffer=new StringBuffer();
//ligerUI grid接受的json格式是{"Rows":[],"Total":""}
strbuffer.append("{\"Rows\":[");
for(int i=0;i<blog.length;i++){
strbuffer.append("{\"title\":").append("\"" + blog[i].getTitle() + "\"},");
}
strbuffer.replace(strbuffer.length()-1, strbuffer.length(), "");
strbuffer.append("],").append("\"Total\":").append("\""+total+"\"").append("}");
PrintWriter out=response.getWriter();
out.write(strbuffer.toString());
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
运行结果（默认样式可以改，具体参照ligerUI API）：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
分页技术原理与实现之Java+Oracle代码实现分页(二)
紧接着上篇-分页技术原理与实现之分页的意义及方法(一) ,本篇继续分析分页技术.上篇讲的是分页技术的简单原理与介绍,这篇深入分析一下分页技术的代码实现. 上篇最后讲到了分页的最佳实现是在数据库层进行分页,而且不同的数据库有不同的分页实现,比如Oracle是用三层sql嵌套实现分页的.MySQL是用limit关键字实现的(上篇已讲到). 这篇以Java+Oracle为基础,讲解代码层的实现. 就如平时我们很在分页中看到的,分页的时候返回的不仅包括查询的结果集(List),而且还包括总的页数(pag
-
Java操作MongoDB模糊查询和分页查询
本文实例为大家分享了Java操作MongoDB模糊查询和分页查询,供大家参考,具体内容如下 模糊查询条件: 1.完全匹配 Pattern pattern = Pattern.compile("^name$", Pattern.CASE_INSENSITIVE); 2.右匹配 Pattern pattern = Pattern.compile("^.*name$", Pattern.CASE_INSENSITIVE); 3.左匹配 Pattern pattern =
-
利用JQuery写一个简单的异步分页插件
写了一个Jquery异步分页插件,拿出来分享一下,有不完善之处请指教. 以用户分页为例,先看一下效果,首先是第一页: 下一页或者点击第二页后: 点击尾页后: 效果还可以吧?来看看具体怎么用,首先后台要有一个Page模型: Page.java: public class Page { /** * 当前页号 */ private int currPageNum = 1; /** * 总记录数 */ private int totalRowSize = 0; /** * 每页记录数 */ privat
-
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery
-
基于jquery实现简单的分页控件
前台分页控件有很多,这里分享我的分页控件 pagination.js 1.0版本,该控件基于jquery. 先来看一下预览效果: 默认情况下,点击页码会像博客园一样,在url后面加上"#p页码". 控件有2个参数需要注意: 1. beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象.这个时候我们可以在呈现前做一些处理,例如增加自己的属性等.默认情况下,点击页码,会在url后面加上"#p页码",这样的url并不会刷新页面.如果我们需要刷
-
jQuery DataTables插件自定义Ajax分页实例解析
一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不
-
利用jQuery中的ajax分页实现代码
本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下 把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.pageAjax(url,functionName,showDIv); 这里的url是你要请求的ajax
-
jquery+json实现分页效果
Json作为一种轻量级的数据交换格式,由于其传输数据格式的方便性,今天偶然想将其应用于分页实现,分页做为web开发一个长久的话题,其应用的高效与重要性就不多说了 本文主要技术:反射机制,Json数据格式,jquery 为了应用的通用性,首先要根据反射机制,能将要返回的任意类型的结果对象转化成Json类型的格式. public static String toJSON(Object obj) { HashMap map = new HashMap(); Class c = obj.getClass
-
Ajax分页插件Pagination从前台jQuery到后端java总结
困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
-
基于jQuery ligerUI实现分页样式
在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后,显示出来(通过ajax实现). ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 这里只实现基于ligerUI的分页 LigerUI的分页方式有两种:local和server. 如果数据量不是很大,就直接采用l
-
基于jQuery封装的分页组件
由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果. 1.page.init.css @charset "utf=8"; *{ box-sizing: border-box; padding: 0; margin: 0; } .page{ font-size: 13px; text-align: right; } .page .page_to
-
基于jquery animate操作css样式属性小结
昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi
-
基于jQuery的js分页代码
复制代码 代码如下: function pagerBar(dataCount,pageSize,serverUrl,contentPlace,pagerbarPlace,callBack){ this.dataCount = dataCount; this.pageSize = pageSize; this.serverUrl = serverUrl; this.contentPlace = $("#"+contentPlace); this.pagerbarPlace = $(&qu
-
基于jQuery实现的无刷新表格分页实例
本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica
-
基于Jquery+Ajax+Json的高效分页实现代码
如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长. 本人QQ:364175837 前言 相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您. 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用.好了废话不多说,直接上代码. vs2010+sql2005expre
-
基于Bootstrap和jQuery构建前端分页工具实例代码
前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询
-
基于jquery实现表格无刷新分页
本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre
-
基于jquery.page.js实现分页效果
基于jquery.page.js的一款简单的分页效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的jQuery分页插件</title> <style> *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none;} a:h