基于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禁止页面操作的示例代码
Dec 17 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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
一个程序下载的管理程序(二)
2006/10/09 PHP
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
php数据序列化测试实例详解
2017/08/12 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
用js计算页面执行时间的函数
2006/12/07 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python plotly绘制直方图实例详解
2019/07/22 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Python3开发环境搭建详细教程
2020/06/18 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
小车司机岗位职责
2013/11/25 职场文书
实习生自我鉴定
2013/12/12 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
门市房租房协议书
2014/12/04 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android