Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。自从使用过以后就喜欢上了它,后台列表数据使用其来渲染比较直观。下面是一个基本初始化,后面以这个为基础介绍:
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive" id="table-demo"> <thead> <tr class="text-c"> <th width="25"><input type="checkbox" name="" value=""></th> <th width="80">row_1</th> <th class="text-c">row_2</th> <th width="80">row_3</th> <th width="80">row_4</th> <th width="60">row_5</th> <th width="60">row_6</th> <th width="60">row_7</th> <th width="120">row_8</th> </tr> </thead> </table>
var o=$("#table-demo").DataTable();
最近因为数据过大就改为了服务器模式,但是使用服务器模式后会需要重新设置一些地方特别是搜索与分页排序。首先启用服务器模式:
启用服务器模的方法如下初始化表格即可。
var o=$("#table-demo").DataTable({ "serverSide": 1, "ajax": {"url": "edit_friend_json.asp","type": "POST","data" : {},}, });
但是使用服务器模式后,json数据需要更改,必须包含draw、recordsTotal、recordsFiltered、data。data是必须的这个都知道。这里recordsTotal是总记录数、recordsFiltered是过滤后的记录数。这里需要注意的是:如果没有设置recordsFiltered的值那么页码会是无限的,所以这个值很重要。那么这个json应该符合这样的格式:
{ "draw": "数值", "recordsTotal": "数值", "recordsFiltered": "数值", "data": [ [ "row_0":"数据一", "row_1":"数据二" ] ... ] }
在启用了服务器模式后,表格初始化以及排序搜索等事件时都会向服务器返回非常多的数据。下面是我用GET模式得到的数据,首先了解一下这些数据。了解了以后基本就明白了怎么做搜索、分页、排序了
draw=2 这个与json中的draw相对应 columns[0][data]=row_0 columns[0][name]= columns[0][searchable]=1 columns[0][orderable]=0 columns[0][search][value]= columns[0][search][regex]=0 ...这里我省略了很多表格有多少列上面的columns就重复多少次基本这些信息是无用的。 order[0][column]=2 这个数据代表的是我使用了第二列来排序 order[0][dir]=asc 这个数据代表的是我使用的排序方式升序还是降序 start=0 这个数据代表的是从哪一个数据开始显示 length=10 这个数据代表的时显示多少条数据 search[value]= 这个数据代表的是搜索框的内容(我没用自带的搜索,所以是关闭了的) search[regex]=0 _=1566805021043 HTTP/1.1
分页就通过start与length两个数值来,简单说就是在程序中从start数据开始调用length条数记录。来实现分页的。这里每页显示10条,那第一页就是1-10条数据,第二页就是11-20条数据,在程序中以分页做好即可。
排序就通过order[0][column]与order[0][dir]两个来实现排序。将order[0][column]返回的值与查询数据库中的order by 字段关联即可。order[0][dir]的值desc与asc直接使用即可。将这两个组合后开成order by 字段 desc。
搜索可以使用search[value]的值来做。或者自定义一个搜索框来做。我就是把自带搜索取消了,自己做的搜索。简单来说就是通过一个按钮事件事读取搜索条件提交给服务器。这里要注意不要把事件按钮放在form里面的提交按钮上。要不就会刷新页面导致搜索无效。
/*项目搜索*/ function item_search(){ var sh_type = $("#sh_type").val(); var sh_stime = $("#sh_stime").val(); var sh_etime = $("#sh_etime").val(); var sh_name = $("#sh_name").val(); var param = { "sh_type": sh_type, "sh_stime": sh_stime, "sh_etime": sh_etime, "sh_name": sh_name, }; o.settings()[0].ajax.data=param; o.ajax.reload(); }
写到这里我发现我其实和网上其它人一样,写的东西只有自己能看懂了。但是大概原理就是这样了。