zoukankan      html  css  js  c++  java
  • 使用 jQuery dataTables 2 四种数据来源

    四种数据来源

    对于 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 用来生成的信息

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

    服务器应该返回如下的 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"
            ],
            ...
        ] 
    }
    
  • 相关阅读:
    Django的开发服务的搭建和使用
    Openerp
    Django Url设计 小知识点
    try...finally的用法
    SQL rownum的用法
    oracle 日期常用函數sysdate
    datetime.datetime.now()时间格式转化是碰到的问题
    CSS BACKGROUND汇总
    css3动画效果小结
    javascript花式理解闭包
  • 原文地址:https://www.cnblogs.com/haogj/p/1971335.html
Copyright © 2011-2022 走看看