datatables表格底部对应列汇总怎么实现 datatables sdom

对于jQuery dataTables 来说，支持四种表格数据来源。
最为基本的就是来源于网页，在 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": [
            [ "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'
    } );
} );

最后一种数据来源是服务器，对于大量的数据来说，你可能希望在服务器端完成所有的操作，分页、排序、过滤等等。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” 
 ], 
 … 
 ] 
 }