1.适用情况
中文官网的介绍
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 ( MIT license )! 商业支持
更多特性请到官网查看
所以为什么使用它代替普通的自定义表格不言而喻了
2.前台的表格大多数情况需要做到即时搜索以提高交互性
问题来了,ajax交互,官网例子如下
初始化:
$('#example').DataTable( {
serverSide: true,
ajax: {
url: '/data-source',
type: 'POST'
}
} );
服务器返回json数据(json数据这里不多说,官网很详细),先来看一下官网的服务器请求参数:
这张参数表是关键,请求参数和返回参数必须规范,而且名称必须一致,第一次适用的时候就是因为没有仔细阅读官网文档,导致后台数据一致无法载入到表格
3.后台用的是jfinal框架,很实用,适合快速开发
逻辑代码:
public void getPatientList(){
int start = getParaToInt("start");//数据库查询起始位置
String searchValue = getPara("search[value]");//搜索框传入的值
String draw = getPara("draw");//原值返回给ajax
int length = getParaToInt("length");//数据库查询分页长度
List<User> resultList = new ArrayList<>();
List<User> userList = new ArrayList<>();
String sql =