DataTables控件详解附插图Word文件下载.docx
《DataTables控件详解附插图Word文件下载.docx》由会员分享，可在线阅读，更多相关《DataTables控件详解附插图Word文件下载.docx（21页珍藏版）》请在冰豆网上搜索。
},{},{},{}];
//格式像这样,数据省略
res.json（{data:
data}）;
}）;
html里仅仅声明一个table的框架：
tableclass="
tableb-tb-light"
id="
datatables"
>
<
thead>
tr>
th>
姓名<
/th>
年龄<
JOB<
描述<
<
操作<
!
--自定义列-->
/tr>
/thead>
tbody>
/tbody>
/table>
重头戏是js，这里有功能强大的字段，待我慢慢道来。
首先初始化一个datatables，最基本的就这样：
$（document）.ready（function（）{
$（'
#datatables'
）.dataTable（{
}）;
}）;
datatables太强大，记录起来真是无处下手。
先来看个例子，然后再做详细介绍：
scripttype="
text/javascript"
vartable=$（'
）.DataTable（{
"
autoWidth"
:
false,
paging"
true,
//"
dom"
'
T<
"
clear"
toolbar"
Clfrtip'
iCflrtp'
iDisplayLength"
100,
lengthMenu"
[[100,500,1000,-1],[100,500,1000,"
所有"
]],
tableTools"
{
sSwfPath"
/js/datatables/tabletools/swf/copy_csv_xls_pdf.swf"
aButtons"
[
{sExtends:
csv"
oSelectorOpts:
{page:
current"
}},
print"
],
sRowSelect"
os"
},
stateSave"
processing"
ajax"
url'
/test/index"
order"
[0,"
asc"
],
[1,"
[2,"
desc"
],
columnDefs"
{width:
25%'
targets:
3},
columns"
[{
data"
name"
},{
age"
job"
description"
visible"
false
}],
sPaginationType"
full_numbers"
oLanguage"
sProcessing"
imgsrc='
/images/datatable_loading.gif'
努力加载数据中."
sLengthMenu"
每页显示_MENU_条记录"
sZeroRecords"
抱歉，没有找到"
sInfo"
从_START_到_END_/共_TOTAL_条数据"
sInfoEmpty"
没有数据"
sInfoFiltered"
（从_MAX_条数据中检索）"
没有检索到数据"
sSearch"
模糊查询:
oPaginate"
sFirst"
首页"
sPrevious"
前一页"
sNext"
后一页"
sLast"
尾页"
}
}）;
这里面每个字段都可以说上一番，有些简单很容易理解，像dom这种就很复杂。
展示的效果表格前面：
表格底部是分页：
然后说明一下每个字段的效果都体现在哪里
autoWidth
用来启用或禁用自动列的宽度计算。
通常被禁用作为优化（它需要一个有限的时间量来计算的宽度），默认值是true，所以通常将它设为false
分页paging
指定它才能显示表格底部的分页按钮，如果数据量大的话，这个通常需要设置为true，当然它也与dom的值息息相关，如果dom中没有指定p这个字符，它即使为true也是无效的。
dom
这个是我认为最复杂也是功能最强大的字段，当然目前我也只用到了它的冰山一角。
当自定义数据表时，可以根据自身喜好来设置功能元素的默认位置等，可以指定容器，由数据表给出每个HTML控制元件被表示为在domDT选项的单个字符。
dom常用的初始化字符如下：
l-Lengthchanging选择每页显示行数下拉框的控件
f-Filteringinput搜索过滤控件
t-TheTabletools导出excel，csv的按钮
i-Information显示汇总信息（从1到100/共1,288条数据）
p-Pagination分页控件
r-pRocessing显示加载时的进度条
C-copy显示复制，excel的控件
下面四种是在dom中在自定义的位置植入自定义元素和class
and>
-DIV元素
class"
-DIV和Class
#id"
-DIV和ID
#id.class"
-DIV和ID和Class
这些元素的先后顺序也决定了对应的控件在表格中显示的位置。
举个例子：
i<
TCflrtp'
则在汇总信息（i）左边定义了一个div:
toolbar
js如下：
$（"
div.toolbar"
）.html（"
buttonclass='
btnbtn-primaryadd_server'
>
span>
自定义按钮<
/span>
/button>
）;
$（"
.add_server"
）.click（function（）{
location.href="
/server/import"
}）
即这是在汇总信息左边会出现一个按钮，点击跳转到另一个页面。
这种方式可以在一个集成的表格里植入自定义的东西，非常赞！
对于改变页面上元素的位置，我还愿意多举几个例子：
example1:
简单的DIV和样式元素设置
/*Resultsin:
divclass="
wrapper"
{filter}
{length}
{information}
{pagination}
{table}
/div>
*/
$（'
#example'
）.dataTable（{
flipt>
example2:
每页行数p，检索条件f，分页p在表格上面，表信息i在表格下面
div>
lf<
t>
ip>
example3:
表信息i在表上面，检索条件f，每页行数p，处理中r在表下面，并且有清除元素
top"
{processing}
bottom"
i>
rt<
flp>
iDisplayLength和lengthMenu
这两个元素是和dom的l字符对应的，
100,
------表示默认1页是100行数据
]],
-------自定义每页显示的行数，
iDisplayLength默认是10行，lengthMenu默认是[[102550100],[102550100]]
tableTools
这个也有很多参数，这里只写了常见的。
swf可以导出为csv,pdf,xls三种文件，若需要一种，可以在aButtons中指定
},sFileName:
test.csv"
//导出为csv文件，并且指定了文件的名称
//打印控件
},
对应的表格控件为：
stateSave
如果设置为true这个
升级会员 