dataTables的学习笔记 -- 未开启服务器数据模式

官方网站：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、前台页面图：