学习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" class="display" 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"

} );

} );

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

类型	名称	说明
int	iDisplayStart	显示的起始索引
int	iDisplayLength	显示的行数
int	iColumns	显示的列数
string	sSearch	全局搜索字段
boolean	bEscapeRegex	全局搜索是否正则
boolean	bSortable_(int)	表示一列是否在客户端被标志位可排序
boolean	bSearchable_(int)	表示一列是否在客户端被标志位可搜索
string	sSearch_(int)	个别列的搜索
boolean	bEscapeRegex_(int)	个别列是否使用正则搜索
int	iSortingCols	排序的列数
int	iSortCol_(int)	被排序的列
string	sSortDir_(int)	排序的方向 "desc" 或者 "asc".
string	sEcho	DataTables 用来生成的信息

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

类型	名称	说明
int	iTotalRecords	实际的行数
int	iTotalDisplayRecords	过滤之后，实际的行数。
string	sEcho	来自客户端 sEcho 的没有变化的复制品，
string	sColumns	可选，以逗号分隔的列名，
array array mixed	aaData	数组的数组，表格中的实际数据。

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

{

"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();