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

php开发lamp

《西安--木木》-经历丰富了生活。 架构师QQ群: 246695517

 
 
 

日志

 
 

Jquery DataTables 之完全总结(三)  

2014-05-07 17:38:28|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
简单介绍表格四种数据来源

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

http://www.cnblogs.com/haogj/archive/2011/03/05/1971335.html

最为基本的就是来源于网页,网页被浏览器解析为 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 表示当前的行数组。函数返回的结果将被填充到单元格中。

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

错误的数组

$(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();
  评论这张
 
阅读(3422)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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