学习jquery插件之DataTables（3）

学习jquery插件之DataTables（三）

三、代码实例属性说明

/$(document).ready(function() {
??? //$('#example').dataTable( {//加载
??? ??? //"bPaginate": true,//分页按钮
??? ??? //"bLengthChange": true,//每行显示记录数
??? ??? //"bFilter": true,//搜索栏
??? ??? //"bSort": true,//排序
??? ??? //"bInfo": true,//Showing 1 to 10 of 23 entries? 总记录数没也显示多少等信息
??? ??? //"bAutoWidth": true } );
//} );


//$(document).ready(function() {
??? //$('#example').dataTable( {
??? ??? //"aaSorting": [[ 4, "desc" ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
??? //} );
//} );


//$(document).ready(function() {
??? //$('#example').dataTable( {
??? ??? //"aoColumns": [?
??? ??? //??? /* Engine */?? null,? //默认
??? ??? //??? /* Browser */? null,
??? ??? //??? /* Platform */ { "bSearchable": false, //不可参与搜索
??? ??? //??? ???????????????? "bVisible":??? false },//不可见
??? ??? //??? /* Version */? { "bVisible":??? false },//不可见
??? ??? //??? /* Grade */??? null
??? ??? //] } );
//} );



//$(document).ready(function() {
??? //$('#example').dataTable({
??? //});
//} );



//$(document).ready(function() {
??? //$('#example').dataTable( {
??? ??? //"sDom": '<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。??? *? l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class??? * Examples: <"wrapper"flipt>, <lf<t>ip>

??? //} );
//} );



//$(document).ready(function() {
//??? $('#example').dataTable( {
??? //??? "bStateSave": true?//保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
??? //} );
//} );

//$(document).ready(function() {
??? //$('#example').dataTable( {
??? ??? //"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button? 是datatables默认
??? //} );
//} );

//$(document).ready(function() {
??? //$('#example').dataTable( {? //分页信息 不是很难理解。
??? ??? //"oLanguage": {
??? ??? ??? //"sLengthMenu": "Display _MENU_ records per page",
??? ??? ??? //"sZeroRecords": "Nothing found - sorry",
??? ??? ??? //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
??? ??? ??? //"sInfoEmtpy": "Showing 0 to 0 of 0 records",
??? ??? ??? //"sInfoFiltered": "(filtered from _MAX_ total records)"
??? ??? //}
??? //} );
//} )

$(document).ready(function() {
??? oTable = $('#example').dataTable({
??? ??? "bJQueryUI": true, //可以添加 jqury的ui theme? 需要添加css
??? ??? "sPaginationType": "full_numbers"
??? });
} );

默认的语言是英文的 当然可以国际化：
"sUrl": "/SSS/dataTables/de_DE.txt" 添加个国际化的文件就可以。 名字随便 路径对了就可以。我写的国际化文件内容如下，可以直接复制到txt中使用.

{
"sProcessing": "Bitte warten...",
"sLengthMenu": "显示_MENU_条 ",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_? 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",??? //"sUrl": "dataTables/de_DE.txt" 添加个国际化的文件
"oPaginate": {
"sFirst":??? "第一页",
"sPrevious": " 上一页 ",
"sNext":???? " 下一页 ",
"sLast":???? " 最后一页 "
}
}

de_DE.txt内容如下：

{
??? "sProcessing":?? "处理中...",
??? "sLengthMenu":?? "显示 _MENU_ 项结果",
??? "sZeroRecords":? "没有匹配结果",
??? "sInfo":???????? "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
??? "sInfoEmpty":??? "显示第 0 至 0 项结果，共 0 项",
??? "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
??? "sInfoPostFix":? "",
??? "sSearch":?????? "搜索:",
??? "sUrl":????????? "",
??? "oPaginate": {
??? ??? "sFirst":??? "首页",
??? ??? "sPrevious": "上页",
??? ??? "sNext":???? "下页",
??? ??? "sLast":???? "末页"
??? }
}

四、简单介绍表格四种数据来源

对于 dataTables 来说，支持四种表格数据来源。

最为基本的就是来源于网页，网页被浏览器解析为 DOM 对象，在 dataTables 中称为? DOM 来源。

$(document).ready(function() {????$('#example').dataTable();} );

第二种数据来源为数组， JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。

$(document).ready(function() {????$('#demo').html(?'<table cellpadding="0" cellspacing="0" border="0" id="example"></table>'?);????$('#example').dataTable( {????????"aaData": [????????????/* Reduced data set */????????????[?"Trident",?"Internet Explorer 4.0",?"Win 95+", 4,?"X"?],????????????[?"Trident",?"Internet Explorer 5.0",?"Win 95+", 5,?"C"?],????????????[?"Trident",?"Internet Explorer 5.5",?"Win 95+", 5.5,?"A"?],????????????[?"Trident",?"Internet Explorer 6.0",?"Win 98+", 6,?"A"?],????????????[?"Trident",?"Internet Explorer 7.0",?"Win XP SP2+", 7,?"A"?],????????????[?"Gecko",?"Firefox 1.5",?"Win 98+ / OSX.2+", 1.8,?"A"?],????????????[?"Gecko",?"Firefox 2",?"Win 98+ / OSX.2+", 1.8,?"A"?],????????????[?"Gecko",?"Firefox 3",?"Win 2k+ / OSX.3+", 1.9,?"A"?],????????????[?"Webkit",?"Safari 1.2",?"OSX.3", 125.5,?"A"?],????????????[?"Webkit",?"Safari 1.3",?"OSX.3", 312.8,?"A"?],????????????[?"Webkit",?"Safari 2.0",?"OSX.4+", 419.3,?"A"?],????????????[?"Webkit",?"Safari 3.0",?"OSX.4+", 522.1,?"A"?]????????],????????"aoColumns": [????????????{?"sTitle":?"Engine"?},????????????{?"sTitle":?"Browser"?},????????????{?"sTitle":?"Platform"?},????????????{?"sTitle":?"Version",?"sClass":?"center"?},????????????{????????????????"sTitle":?"Grade",????????????????"sClass":?"center",????????????????"fnRender":?function(obj) {????????????????????var?sReturn = obj.aData[ obj.iDataColumn ];????????????????????if?( sReturn ==?"A"?) {????????????????????????sReturn =?"<b>A</b>";????????????????????}????????????????????return?sReturn;????????????????}????????????}????????]????} );???} );

aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。

对于每一个列对象：

sTitle 定义列的标题

sClass 定义列的样式

fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。

当然了，对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。

?

?

第三种数据来源是 AJAX，也就是说可以向服务器发一个请求来获得数据。

在初始化参数对象中，通过?sAjaxSource?的属性传递请求的地址，bProcessing 表示是否需要显示一个工作中的提示。

在 JSON 方式返回的数据中，需要一个名为 aaData 的属性来提供实际的数据。

$(document).ready(function() {????$('#example').dataTable( {????????"bProcessing":?true,????????"sAjaxSource":?'../examples_support/json_source.txt'????} );} );

其中 json_source.txt 就是 JSON 数据，其中定义了一个名为 aaData 的属性。这个文件可以在下载的压缩包中找到，在 examples\examples_support 文件夹中。

最后一种数据来源是服务器，对于大量的数据来说，你可能希望在服务器端完成所有的操作，分页、排序、过滤等等。dataTable 可以通过服务器完成这些功能，甚至其他的服务器，像??Google Gears?或者 Adobe Air，这样的话，dataTables 就是一个显示数据和提供操作事件的前端模块。

$(document).ready(function() {????$('#example').dataTable( {????????"bProcessing":?true,????????"bServerSide":?true,????????"sAjaxSource":?"../examples_support/server_processing.php"????} );} );

对于服务器来说，可以通过请求参数来获得当前的操作信息。

类型名称说明intiDisplayStart显示的起始索引intiDisplayLength显示的行数intiColumns显示的列数stringsSearch全局搜索字段?booleanbEscapeRegex全局搜索是否正则booleanbSortable_(int)表示一列是否在客户端被标志位可排序booleanbSearchable_(int)表示一列是否在客户端被标志位可搜索stringsSearch_(int)个别列的搜索booleanbEscapeRegex_(int)个别列是否使用正则搜索intiSortingCols排序的列数?intiSortCol_(int)被排序的列stringsSortDir_(int)排序的方向 "desc" 或者 "asc".stringsEcho?DataTables 用来生成的信息

服务器应该返回如下的 JSON 格式数据

类型名称说明intiTotalRecords实际的行数intiTotalDisplayRecords过滤之后，实际的行数。stringsEcho来自客户端 sEcho 的没有变化的复制品，stringsColumns可选，以逗号分隔的列名，　　　　array array mixedaaData数组的数组，表格中的实际数据。　　　　

服务器返回的数据示例如下：

{????"sEcho": 3,????"iTotalRecords": 57,????"iTotalDisplayRecords": 57,????"aaData": [????????[????????????"Gecko",????????????"Firefox 1.0",????????????"Win 98+ / OSX.2+",????????????"1.7",????????????"A"????????],????????[????????????"Gecko",????????????"Firefox 1.5",????????????"Win 98+ / OSX.2+",????????????"1.8",????????????"A"????????],????????...????]}

//使用实例说明
$(document).ready(function() {????$('#example').dataTable({"sScrollX":?"100%",???//表格的宽度??"sScrollXInner":?"110%",???//表格的内容宽度??"bScrollCollapse":?true,??//当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)?"bPaginate":?true,??//是否显示分页??"bLengthChange":?true,??//每页显示的记录数??"bFilter":?true,?//搜索栏??"bSort":?true,?//是否支持排序功能??"bInfo":?true,?//显示表格信息??"bAutoWidth":?false,??//自适应宽度??"aaSorting": [[1,?"asc"]],??//给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc??"aoColumns": [??????null,??????null,??????{??????????"bVisible":?true,?//不可见??????????"bSearchable":?false,?//参与搜索??????},??????null,??????null??],?//列设置，表有几列，数组就有几项???"bStateSave":?true,?//保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了??"sPaginationType":?"full_numbers",?//分页，一共两种样式，full_numbers和two_button(默认)??"oLanguage": {??????"sLengthMenu":?"每页显示 _MENU_ 条记录",??????"sZeroRecords":?"对不起，查询不到任何相关数据",??????"sInfo":?"当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",??????"sInfoEmtpy":?"找不到相关数据",??????"sInfoFiltered":?"数据表中共为 _MAX_ 条记录)",??????"sProcessing":?"正在加载中...",??????"sSearch":?"搜索",??????"sUrl":?"",?//多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt??????"oPaginate": {??????????"sFirst":????"第一页",??????????"sPrevious":?" 上一页 ",??????????"sNext":?????" 下一页 ",??????????"sLast":?????" 最后一页 "??????}??},?//多语言配置?"bJQueryUI":?false,?//可以添加 jqury的ui theme? 需要添加css???????"aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条",?"每页25条",?"每页50条",?"显示所有数据",?"不显示数据"]]??//设置每页显示记录的下拉菜单????});});

直接调用默认的设置

$('#example').dataTable();

查看更多 下一篇