官方网站: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. 游戏引擎中三大及时光照渲染方法介绍(以unity3d为例)

    (转)游戏引擎中三大及时光照渲染方法介绍(以unity3d为例)   重要:在目前市面上常见的游戏引擎中,主要采用以下三种灯光实现方式: 顶点照明渲染路径细节 Vertex Lit Rendering ...

  2. 详解MySQL数据表类型

    学习Mysql数据库,Mysql表类型都有哪些是一定需要知道的,下面就为您介绍七种Mysql表类型,希望能对您学习Mysql表类型有所帮助. MySQL作为当前最为流行的免费数据库服务引擎,已经风靡了 ...

  3. vue --轮播图

    轮播图,可以使用mint-ui中的swipe HTML: <Swipe :auto="4000"> <SwipeItem v-for="item in ...

  4. 04_web基础(二)之web构建

    03.04.05.06web项目创建 07.第一个Servlet程序 1.拷贝tomcat 中的 servlet-api.jar 在lib包下面 2.新建一个HelloWordServlet类并实现 ...

  5. Light Probe Proxy Volume

    [Light Probe Proxy Volume] The Light Probe Proxy Volume (LPPV) component allows you to use more ligh ...

  6. oracle存储过程与存储函数的区别和联系

    相同点:1.创建语法结构相似,都可以携带多个传入参数和传出参数.      2.都是一次编译,多次执行. 不同点:1.存储过程定义关键字用procedure,函数定义用function. 2.存储过程 ...

  7. c/c++ 中的重要函数

    1,strtod: 函数原型: #include <cstdlib> double strtod(const char *nptr, char **endptr); strtod 原型 名 ...

  8. Python3 reversed 函数

    Python3 reversed 函数  Python3 内置函数 描述 reversed 函数返回一个反转的迭代器. 语法 以下是 reversed 的语法: reversed(seq) 参数 se ...

  9. Jenkins安装部署(二)

    Jenkins配置 一.修改jenkins家目录 由于jenkins在启动个之后会默认将所有的构建应用在家目录中创建一遍,为了合理化服务器资源,重新定义jenkins家目录. 在tomcat的cata ...

  10. POJ-2386.Lakecounting(DFS求连通块)

    本题是一道连通块的入门题,用来练手,后续还会更新连通块的题目. 本题大意:一个n * m 的陆地上面有很多水洼,让你统计水洼的个数并输出. 本题思路:按照顺序遍历陆地,如果发现水洼就将它的八连块都进行 ...