基于jQuery ligerUI实现分页样式


Posted in Javascript onSeptember 18, 2016

在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 

简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后,显示出来(通过ajax实现)。 

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。 

这里只实现基于ligerUI的分页 

LigerUI的分页方式有两种:localserver

如果数据量不是很大,就直接采用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
关于选择前端分页还是后台分页参考https://3water.com/article/86326.htm

local实现只需要将查询的数据全部提交到前端框架会自动帮你实现分页,但是我个人并不提倡进行客户端分页,Web应用服务器和客户端之间是网络,如果网络传递的数据量越少,则客户端获得响应的速度越快.而且一般来说,数据库服务器和Web应用服务器的处理能力一般比客户端要强很多.从这两点来看,在客户端分页的方案是最不可取的 

下面上server端分页代码:

由于只使用了分页所以只导入了部分插件和图片

基于jQuery ligerUI实现分页样式 

引入需要的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):

基于jQuery ligerUI实现分页样式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 #Javascript
JQuery控制DIV的选取实现方法
Sep 18 #Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 #Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 #Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 #Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 #Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 #Javascript
You might like
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php socket通信简单实现
2016/11/18 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
酒店管理求职信
2014/06/09 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
实习单位鉴定意见
2015/06/04 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python