这两天接触到Jquery DataTables,写了一篇文章记录自己的学习内容。同时接触到了Jquery DataTables的一个扩展控件TableTools,为了作以区分,重新写一篇文章来记录
TableTools的相关内容。
TableTools是一个对table内的数据进行复制、保存(xls、pdf等)等操作的Jquery DataTables扩展控件。http://datatables.net/extras/下载。
他的使用其实也并不复杂,只是相关的属性不少。一一了解了用起来很方便。
添加了下载的js文件后,用以下方式调用。
$(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "sSwfPath": "/swf/copy_csv_xls_pdf.swf" } } ); } );
"oTableTools":{
"sSwfPath":"/swf/copy_csv_xls_pdf.swf"
}
这是TableTools的最基本的一个调用,sSwfPath告诉TableTools到哪里去找用来复制和保存table数据的SWF文件(这个文件在下载的TableTools包里会有),这
个sSwfPath要一直写在这里的,我就是在测试其他example的时候把sSwfPath注释掉了,其他的example就不工作了,最后才发现sSwfPath要一直存在才行。
"aButtons":["copy","print"]
aButtons告诉TableTools我要在页面上实现那些功能,比如这里就只是实现了copy和print,在加上“xls”,就会多出一个按钮来提供excel下载的功能。
我们还可以选择不使用简单的“copy”、“print”等,比如我们想用“Copy to clipboard”来提示用户copy数据,我们要用到以下代码,其实也很简单。
"aButtons":[
{
“sExtends”:"copy",
"sButtonText":"Copy to clipboard"
}
]
我们还可以选择将多个按钮放在一个下拉框里,点击后出现,那么我们就用到了collection,我们将csv、xls、pdf的下载放在一个隐藏的下拉框中。
"aButtons":[
"copy",
"print",
{
“sExtends”:"collection",
"sButtonText":"Save",
"aButtons":["csv","xls","pdf"]
}
]
我们还会想要选择一些我们想要的数据下载下来,而不是下载所有的数据。这时我们先要知道如何去选择数据。
"sRowSelect":"multi" 多行选择 single单行选择
"aButtons":["select_all","select_none"] 全选、全不选
然后我们可以通过对于按钮的扩展来选择下载被选中的数据。
{
“sExtends”:"xls",
"bSelectedOnly":true, 仅导出被选中的数据
"bFooter":false 不导出tfoot内的数据(默认为true)
}
另外TableTools还为我们提供了很多的属性、方法供我们进行各种各样的操作,我的感觉是,你能想到的操作在这里都能找到简单的实现方法。有需要的可以到这里去看一看http://datatables.net/extras/tabletools/