四种数据来源

对于 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"
        ],
        ...
    ]
}

转载于:https://my.oschina.net/u/2260184/blog/540577

jQuery dataTables四种数据来源[转]的更多相关文章

  1. iOS中常用的四种数据持久化方法简介

    iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 ...

  2. Python中xml、字典、json、类四种数据的转换

    最近学python,觉得python很强很大很强大,写一个学习随笔,当作留念注:xml.字典.json.类四种数据的转换,从左到右依次转换,即xml要转换为类时,先将xml转换为字典,再将字典转换为j ...

  3. Oracle数据库四种数据完整性约束

     Oracle数据库四种数据完整性约束 1.实体完整性 同样的数据不能重复插入(1)采取什么措施保证实体完整性?我们可以给表创建主键约束吗,主键保证了数据的唯一性,主键可以保证同一条记录只能插入一次. ...

  4. 【hive】——Hive四种数据导入方式

    Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在 ...

  5. iOS中常用的四种数据持久化技术

    iOS中的数据持久化方式,基本上有以下四种:属性列表 对象归档 SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 [NSUserDefaults st ...

  6. Jquery DataTables 获取表格数据及行数据

    注意table变量是 1.jQuery DataTables 行号获取 $("#example tbody tr").on("click", function( ...

  7. Hive四种数据导入方式介绍

    问题导读 1.从本地文件系统中通过什么命令可导入数据到Hive表? 2.什么是动态分区插入? 3.该如何实现动态分区插入? 扩展: 这里可以和Hive中的三种不同的数据导出方式介绍进行对比? Hive ...

  8. 013-HQL中级3-Hive四种数据导入方式介绍

    Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在 ...

  9. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

随机推荐

  1. python学习要点(二)

    我的博客:https://www.luozhiyun.com/archives/269 '==' VS 'is' '=='操作符比较对象之间的值是否相等. 'is'操作符比较的是对象的身份标识是否相等 ...

  2. springboot actuator 配置安全

    springboot actuator监控是什么?类似php的phpinfor()函数,不过actuator更强大,可以查看的数据.状态更多.Actuator是Spring Boot提供的对应用系统的 ...

  3. 基于 mpvue 框架的小程序选择控件,支持单列,多列,联动

    最近在学着写mpvue小程序,在做选择控件时候遇到了点问题,按照微信小程序方法picker,很不方便! 在网上搜到一个很好用的组件下面给大家分享: 组件说明文档链接:https://go.ctolib ...

  4. javascript入门 之 bind()

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  5. Java方法的重点

    方法就是完成功能一个语句集合体 使用方法的原则:方法的原子性,一个方法只实现一个功能. 方法的重载 1.函数名必须相同 2.形参列表必须不同(可以是个数不同,类型不同,不然完全一样) 3.返回值可以相 ...

  6. 当文件目录变得杂乱不堪怎么办,python帮你轻松搞定

    这几天和几个小伙伴,在一起合做一个ppt. 做ppt之前有原版的ppt,和一个word大纲,在制作过程中,又不断添加图片.视频等素材,最终,整个目录变得杂乱不堪(见下图-处理之前) 那我想,可不可以做 ...

  7. Personal Photo Management Application

    Customer Problems & Needs People may take a large number of photos and their phone don't have en ...

  8. Wireshark的两种过滤器与BPF过滤规则

    Wirshark使用的关键就在于过滤出想要的数据包,下面介绍怎么过滤. 抓包过滤器 Wirshark有两种过滤器,一个是抓包过滤器,一个是显示过滤器,他们之间的区别在于抓包过滤器只抓取你设置的规则,同 ...

  9. 微信小程序 —搜索框

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...

  10. [PHP][thinkphp5] 学习一:增删改查

    <?php namespace app\index\controller; use think\Controller; use think\Db; class Test extends Cont ...