datatables
基础示例
使用 jQuery + datatables + 0 设置
样式没有使用 bootstrap 的好看
<link rel="stylesheet" type="text/css" href="{{ asset('assets/jquery.dataTables.css') }}"><script type="text/javascript" charset="utf8" src="{{ asset('assets/jquery.js') }}"></script><script type="text/javascript" charset="utf8" src="{{ asset('assets/jquery.dataTables.js') }}"></script><table id="dt" class="display"> <thead> <tr> <th>actor_id</th> <th>first_name</th> <th>last_name</th> <th>last_update</th> </tr> </thead> <tbody> @foreach ($rows as $row) <tr> <td>{{ $row->actor_id }}</td> <td>{{ $row->first_name }}</td> <td>{{ $row->last_name }}</td> <td>{{ $row->last_update }}</td> </tr> @endforeach </tbody></table><script type="text/javascript"> $(document).ready( function () { $('#dt').DataTable(); });</script>option
http://datatables.club/reference/option/
autoWidth(true): 自动计算列宽
info(true): 控制是否显示表格左下角的信息
retrieve(false) + destroy(false): 使用不同的配置全新显示 datatables
serverSide(false): 开启服务器模式, 传递给服务器的参数: http://datatables.club/manual/server-side.html
data: 使用 jQuery 数组作为数据源
ajax: 写法和 jQuery 类似, 配合上面的 serverSide 参数一起使用
ajax.data
ajax.dataSrc: 相当于 jQuery ajax success 方法
columns: 列设置
columns.data: 列数据绑定
columns.render: 渲染函数
columns.visible(true)
columnDefs: 类似 columns 可以应用到多个列
dom: 用来操作各个组件
l: length changing, 选择分页大小的组件
f: filter input
t: table
i: info
p: pagination
r: 加载等待显示的信息
`<"#id.class">: div 元素, 可以很好的配合 bootstrap 等框架使用
initComplete: 回调函数中的 data 为 datatables 实例化的对象
footerCallback: tfoot 回调函数, 最常用来做 合计, 参考 http://datatables.club/reference/option/footerCallback.html
api
http://datatables.club/reference/api/
dt.ajax.url().load(): 指定 url load 数据
dt.ajax.reload: 重新加载数据
dt.url(): 重新指定数据源, 但是不重新加载
dt.draw(): 重绘
$.fn.dataTable.util.throttle(): 减少方法的调用频率, 比如延长 过滤搜索 的响应时间
server side
确定 dt 发起 ajax 请求传递的参数以及需要的数据格式即可
搜索框的场景可以 固定 只对某一列searchDelay: 3000: 设置搜索延迟
Diff
1.10 之前返回的是 jQuery 对象, 1.10开始返回 dt(datatables) 对象
