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

isblog主页

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

 
 
 

日志

 
 

使用jQuery dataTables四种数据来源  

2013-11-29 22:15:27|  分类: datatables插件 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

四种数据来源

对于 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": [
 
            
 
            [ "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 表示当前的行数组。函数返回的结果将被填充到单元格中。

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

\jQuery dataTables 四种数据来源" />

第三种数据来源是 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 用来生成的信息

这篇文章介绍了在 C# 中结合 LINQ 使用 DataTables 进行服务端处理的经验 jQuery DataTables Plugin

服务器应该返回如下的 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"
 
        ],
 
        ...
 
    
 
}

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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