注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

isblog主页

或许不一定要做得最多,但一定要做得最好! 能力就是一种财富,积累越多,就越体现你

 
 
 

日志

 
 

学习jquery插件之DataTables(三)  

2011-07-28 23:07:39|  分类: jquery学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


三、代码实例属性说明

/$(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();

































































  评论这张
 
阅读(1917)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018