官方网站:http://www.datatables.net/

(1)未开启服务器数据模式(即"bServerSide" : false),数据会从后台直接全部获取,然后在前台全部渲染,分页是框架自己完成的。

(2)开启服务器数据模式(即"bServerSide" : true),数据从后台查询,接着在前台将查询到的所有数据全部渲染到一页上,所以需要在后台分页后传到前台。

bServerSide的值默认为false。

建议:在数据量非常大的情况下建议在后台分页,即开启服务器数据模式。

本次以未开启服务器数据模式为例

 1、jsp页面

<div class="adv-table">
<table class="display table table-bordered" id="userList">
</table>
</div>

2、js代码

$(document).ready(function() {

    /*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#userList').dataTable( {
"bLengthChange": true, //允许改变每页显示的数据条数, 默认为true
"bFilter": true, //开启搜索功能, 默认为true
"bInfo" : true, //开启Datatables信息显示
"bPaginate" : true, //允许表格分页, 默认为true "bProcessing": true, //开启读取服务器数据时显示正在加载中
//"bServerSide": true, //开启服务器模式
"iDisplayLength": 5,//每页显示15条数据 // Ajax地址
"sAjaxSource": contextPath + "/user/getUserList?time=" + new Date().getTime(),
"sAjaxDataProp" : "aaData",
"aoColumnDefs": [ //列定义配置数组
{
"bSortable": true, //开启或关闭某列的排序
"aTargets": [ 0 ] //指定一个特定的列
}
],
"aaSorting": [[0, 'asc']], // 第1列,增序
"aLengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] ], //改变每页显示条数列表的选项 //配置列要显示的数据
"aoColumns": [
{
"mDataProp" : "id",
"sTitle" : "<input type='checkbox' name='allbox' id='allbox' onclick='check();' />",
"sDefaultContent" : "",
"bSortable" : false,
"sClass" : "center",
"mRender" : function(data, display, row) {
return "<input type='checkbox' id='"+data+"' name='idList' value='"+data+"'/>";
}
},
{
"sTitle" : "ID",   //显示的列名
"mDataProp": "id",  //对应的数据中的字段名
"sDefaultContent" : "",
"sClass" : "center"
},
{
"sTitle" : "Name",
"mDataProp": "name",
"sDefaultContent" : "",
"sClass" : "center"
},
{
"sTitle" : "Age",
"mDataProp": "age",
"sDefaultContent" : "",
"sClass" : "center"
},
{
"sTitle" : "Update Time",
"mDataProp": "updateTime",
"sDefaultContent" : "",
"sClass" : "center",
"mRender" : function(data, display, row) { //将从数据库中查到的时间戳格式化
return new Date(data).Format("yyyy-MM-dd hh:mm:ss");
} },
{
"sTitle" : "Operate",
"mDataProp": '',
"sDefaultContent" : '<i class="fa fa-plus-square"><i class="fa fa-edit"></i><i class="fa fa-trash-o"></i>', //设置该列字段的值
"sClass" : "center"
}
],
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据,请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"sUrl" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
}
}); /* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
// $(document).on('click','#hidden-table-info tbody td img',function () {
// var nTr = $(this).parents('tr')[0];
// if ( oTable.fnIsOpen(nTr) )
// {
// /* This row is already open - close it */
// this.src = "images/details_open.png";
// oTable.fnClose( nTr );
// }
// else
// {
// /* Open this row */
// this.src = "images/details_close.png";
// oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
// }
// } );
} ); // 日期格式转换
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}

3、后台的代码

UserController类
package com.my.springmvc.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; import com.my.springmvc.model.User;
import com.my.springmvc.service.UserService; @Controller
@RequestMapping(
"/user")
public class UserController
{
@Autowired
private UserService userService; @RequestMapping("/toUser")
public String toUser()
{
return "main";
} @RequestMapping("/getUserList")
@ResponseBody
public Map<String, Object> getUserList(Model model)
{
List<User> userlist = userService.getUserList();
Map<String, Object> map = new HashMap<>();
map.put("aaData", userlist);
return map;
}
}
UserService类:
package com.my.springmvc.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import com.my.springmvc.dao.UserMapper;
import com.my.springmvc.model.User; @Service
public class UserService
{
@Autowired
private UserMapper userMapper; public List<User> getUserList()
{
return userMapper.getUserList();
}
}
UserMapper接口:
package com.my.springmvc.dao;

import java.util.List;
import com.my.springmvc.model.User; public interface UserMapper
{
// 查询所有用户
public List<User> getUserList();
}
UserMapper.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--命名空间应该是对应接口的包名+接口名 -->
<mapper namespace="com.my.springmvc.dao.UserMapper"> <!--获得所有用户 -->
<select id="getUserList" resultType="User">
SELECT
u.id, u.name, u.age, u.updateTime
FROM tbl_user u
</select> </mapper>
User实体类:
package com.my.springmvc.model;

import java.util.Date;

public class User
{
private Integer id;
private String name;
private Integer age;
private Date updateTime; @Override
public String toString()
{
return "User [id=" + id + ", name=" + name + ", age=" + age + ", updateTime=" + updateTime + "]";
}
// ...get/set方法省略
}

4、数据库表结构:

CREATE TABLE `tbl_user` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(50) DEFAULT NULL,
`age` int(11) DEFAULT NULL,
`updateTime` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8

5、前台页面图:

dataTables的学习笔记 -- 未开启服务器数据模式的更多相关文章

  1. R学习笔记(4): 使用外部数据

    来源于:R学习笔记(4): 使用外部数据 博客:心内求法 鉴于内存的非持久性和容量限制,一个有效的数据处理工具必须能够使用外部数据:能够从外部获取大量的数据,也能够将处理结果保存.R中提供了一系列的函 ...

  2. .NET MVC 学习笔记(六)— 数据导入

    .NET MVC 学习笔记(六)—— 数据导入 在程序使用过程中,有时候需要新增大量数据,这样一条条数据去Add明显不是很友好,这时候最好就是有一个导入功能,导入所需要的数据,下面我们就一起来看一下导 ...

  3. Kotlin学习笔记(9)- 数据类

    系列文章全部为本人的学习笔记,若有任何不妥之处,随时欢迎拍砖指正.如果你觉得我的文章对你有用,欢迎关注我,我们一起学习进步! Kotlin学习笔记(1)- 环境配置 Kotlin学习笔记(2)- 空安 ...

  4. openresty 学习笔记二:获取请求数据

    openresty 学习笔记二:获取请求数据 openresty 获取POST或者GET的请求参数.这个是要用openresty 做接口必须要做的事情.这里分几种类型:GET,POST(urlenco ...

  5. Redis学习笔记八:集群模式

    作者:Grey 原文地址:Redis学习笔记八:集群模式 前面提到的Redis学习笔记七:主从复制和哨兵只能解决Redis的单点压力大和单点故障问题,接下来要讲的Redis Cluster模式,主要是 ...

  6. 并发编程学习笔记(9)----AQS的共享模式源码分析及CountDownLatch使用及原理

    1. AQS共享模式 前面已经说过了AQS的原理及独享模式的源码分析,今天就来学习共享模式下的AQS的几个接口的源码. 首先还是从顶级接口acquireShared()方法入手: public fin ...

  7. MyCat 学习笔记 第十篇.数据分片 之 ER分片

    1 应用场景 这篇来说下mycat中自带的er关系分片,所谓er关系分片即可以理解为有关联关系表之间数据分片.类似于订单主表与订单详情表间的分片存储规则. 本文所说的er分片分为两种: a. 依据主键 ...

  8. MyCat 学习笔记 第八篇.数据分片 之 求摸运算分片

    1 应用场景 Mycat 自带了多套数据分片的机制,其实根据数值取摸应该是最简单的一种. 优点:数据离散概率较为平均,可以有效的提高应用的数据吞吐. 缺点:比较明显,后期数据运维与迁移比较困难.好在M ...

  9. MyCat 学习笔记 第七篇.数据分片 之 按数据范围分片

    1 应用场景 Mycat 其实自带了2个数据范围分片的方案,一个是纯数据范围的分片,比如 1至 10000 号的数据放到分片1 ,10001 至 20000号数据放到分片2里. 另一个是数据常量形式的 ...

随机推荐

  1. 网络传输中利用fastjson将复杂嵌套数据类型Json格式转换(GeoJsonPolygon)

    如果一个对象太复杂了,那么在网络传输键的JSON格式数据转换容易出问题. 比如下面一个类Area.java import lombok.AllArgsConstructor; import lombo ...

  2. MySql数据库常用语句汇总

    第一天1.登陆数据库 mysql -uroot -proot; //-u用户名 -p密码2.启动数据库 net start mysql;3.创建表空间(数据库)create database qy97 ...

  3. Dictionary在多线程情况下

    Add时出错 错误信息: Index was outside the bounds of the array. 详细信息: at System.Collections.Generic.Dictiona ...

  4. JDK1.8 HashMap 扩容 对链表(长度小于默认的8)处理时重新定位的过程

    关于HashMap的扩容过程,请参考源码或百度. 我想记录的是1.8 HashMap扩容是对链表中节点的Hash计算分析. 对术语先明确一下: hash计算指的确定节点在table[index]中的链 ...

  5. weblogc SessionData.getNextId性能问题

    参考:https://www.cnblogs.com/lemon-flm/p/7396627.html weblogic运行中持续报weblogic.servlet.internal.session. ...

  6. Oracle OLAP 与 OLTP 介绍

    文章出处:http://blog.csdn.net/tianlesoftware/article/details/5794844 感谢原作者的分享. 数据处理大致可以分成两大类:联机事务处理OLTP( ...

  7. Kerberos 互信免登陆

    第一步:机器加互信 将机器A的Kerberos name加到机器B的~/.k5login中,同时将机器B的Kerberos name加到机器A的~/.k5login中 例如:host/bjm6-193 ...

  8. 【Django】ORM操作MySQL数据库遇到的一些问题

    关于查询操作: 1.exact和iexact exact相当于=   iexact相当于like(但是这里的like和数据库的不一样,没有给后面条件加上%%所以这里like和=的作用相似) artic ...

  9. inception+archery SQL审核平台

    关闭防火墙和selinux 宿主机安装mysql,创建archery数据库,并给所有权限,允许远程连接到该数据库 grant all privileges on *.* to 'root'@'%' i ...

  10. Nginx 功能

      本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,毕竟只是我个人使用过和了解到过得,欢迎留言交流. Nginx能做什么 ...