数据源类型

Datatable可以使用三种基本的JavaScript数据类型作为数据源

  • 数组(Arrays[])
  • 对象(objects{})
  • 实例(new myclass())

    目前使用过的为前两种,现以前两种为例进行讲解

数组(Arrays)

当使用数组作为数据源,每个数组元素的数量必须等于表中的列数

var data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]; //然后 DataTables 这样初始化:
$('#example').DataTable( {
data: data
} );

对象(Objects)数组

使用对象前,需要明确告诉 DataTables 那个属性对应那一列

var data = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
];
//object可以如下初始化表格
$('#example').DataTable( {
data: data,
//使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
//data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
} );

数据源

DataTables 支持三种数据源显示:

  • DOM
  • Ajax
  • JavaScript

    目前使用过前两种,现以前两种为例进行讲解

DOM

DataTables 初始化后,它会自动检查表格中的数据,如果存在即作为表显示的数据,这是使用 DataTables 最简单的方法,渲染已经存在的table

注意,当使用DOM显示表,DataTables 将会把数据当做数组作为数据源

DataTables还可以直接把 DOM 数据转化为自己的内部数据对象,示例如下:

<button id="table_id_example_button">获取选中的行</button>
<table id="table_id_example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table> $(document).ready( function () {
var table = $('#table_id_example').DataTable({
//这样配置后,即可用DT的API来访问表格数据
columns: [
{data: "column1"},
{data: "column2"}
]
});
//给行绑定选中事件
$('#table_id_example tbody').on( 'click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
//给按钮绑定点击事件
$("#table_id_example_button").click(function () {
var column1 = table.row('.selected').data().column1;
var column2 = table.row('.selected').data().column2;
alert("第一列内容:"+column1 + ";第二列内容: " + column2);
});
} );

AJAX数据源

$(document).ready(function() {
$('#example').DataTable( {
"ajax": '{% url "phone:operate_query_spread" %}?',
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );

参数链接:http://datatables.club/manual/data/

Datatable 数据源的更多相关文章

  1. C# 将DataTable数据源转换成实体类

    using System; using System.Collections.Generic; using System.Data; using System.Reflection; /// < ...

  2. Vs2010中rdlc报表绑定DataTable数据源

    首先,新建一个网站,接着添加数据集,并且命名为student,如下图所示: 在该数据集对象上面添加datatable,并且设置列名,如下图所示: 添加一张报表,命名为student,如下图所示: 向报 ...

  3. asp.net DataTable导出Excel 自定义列名

    1.添加引用NPOI.dll 2.cs文件头部添加 using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System.IO; 3.代码如 ...

  4. 使用反射将DataTable的数据转成实体类

    利用反射避免了硬编码出现的错误,但是实体类的属性名必须和数据库名字对应(相同) 1.利用反射把DataTable的数据写到单个实体类 /// <summary> ///利用反射把DataT ...

  5. 如何将DataTable转换成List<T>呢?

    昨日在工作中,遇到一个问题:需要将查询出来的DataTable数据源,转换成List<T>的泛型集合(已知T类型).第一反应,我想肯定要用到“泛型”(这不是废话吗?都说了要转换成List& ...

  6. 反射 DataTable拓展方法 转实体对象、实体集合、JSON

    Mapper类 using System; using System.Collections.Generic; using System.Data; using System.Globalizatio ...

  7. 使用JavaScriptSerializer序列化集合、字典、数组、DataTable为JSON字符串 分类: 前端 数据格式 JSON 2014-10-30 14:08 169人阅读 评论(0) 收藏

    一.JSON简介 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的数据交换格式. JSON是"名值对"的集合.结构由大 ...

  8. c# Lamdba及DataTable AsEnumerable()的使用

    Lamdba是延迟执行的,实际上什么都没有发生,当真正使用对象的时候(例如调用:First, Single, ToList-.的时候)才执行. 1.Where var var_dtTable = dt ...

  9. DataTable转换成实体

    public static class DataTableToEntity { /// <summary> /// 将DataTable数据源转换成实体类 /// </summary ...

随机推荐

  1. 刷题记录:Codeforces Round #731 (Div. 3)

    Codeforces Round #731 (Div. 3) 20210803.网址:https://codeforces.com/contest/1547. 感觉这次犯的低级错误有亿点多-- A 一 ...

  2. 【java】学习路线15-接口interface、匿名内部类、接口继承

    class Learn03{    public static void main(String[] aa){        A b = new B(); //接口也可以用多态        b.me ...

  3. 用metasploit映射公网远程控制舍友电脑

    用metasploit映射公网远程控制舍友电脑 Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正 ...

  4. Rust 从入门到精通06-语句和表达式

    1.语句和表达式 语句和表达式是 Rust 语言实现逻辑控制的基本单元. 在 Rust 程序里面,语句(Statement)是执行一些操作但不返回的指令,表达式(Expressions)计算并产生一个 ...

  5. day30-注解

    Java注解 1.注解的理解 注解(Annotation)也被称为元数据(Metadata),用于修饰解释 包.类.方法.属性.构造器.局部变量等数据信息 和注释一样,注解不影响程序逻辑,但注解可以被 ...

  6. openstack中Nova组件简解

    一.Nova组件概述 计算节点通过Nova Computer进行虚拟机创建,通过libvirt调用kvm创建虚拟机,nova之间通信通过rabbitMQ队列进行通信. Nova位于Openstack架 ...

  7. Android同屏、摄像头RTMP推送常用的数据接口设计探讨

    前言 好多开发者在调用Android平台RTMP推送或轻量级RTSP服务接口时,采集到的video数据类型多样化,如420sp.I420.yv12.nv21.rgb的,还有的拿到的图像是倒置的,如果开 ...

  8. KingbaseES V8R3集群维护案例之---在线添加备库管理节点

    案例说明: 在KingbaseES V8R3主备流复制的集群中 ,一般有两个节点是集群的管理节点,分为master和standby:如对于一主二备的架构,其中有两个节点是管理节点,三个数据节点:管理节 ...

  9. volatile 函数影响子查询提升

    我们知道 volatile 函数会影响SQL的执行性能,比如:volatile 类型函数无法建函数索引.volatile 函数针对每条记录都要执行一次.本篇的例子主要讲述 volatile 类型的函数 ...

  10. angr原理与实践(二)—— 各类图的生成(CFG CG ACFG DDG等)

    ​  本文系原创,转载请说明出处 Please Subscribe Wechat Official Account:信安科研人,获取更多的原创安全资讯 上一篇文章介绍了angr的原理,自此篇文章开始, ...