2016-11-17 DataTables学习一

DataTables处理数据的三个核心概念：

1. 处理模式
2. 数据类型
3. 数据源

一、处理模式
DataTables中有两种不同的方式处理数据（排序，搜索，分页等）：

• 客户端处理：所有的数据预先加载，数据的处理都是在浏览器中完成的【逻辑分页】。
• 服务器端处理：数据处理是在服务器上执行，页面只进行当前页的数据的处理【物理分页】。

选择哪种处理方式由你具体情况进行决定，根据经验来看，数据少于10,000行你可以选择客户端模式，超过10,000则使用服务器端处理。两种方式不能同时使用，但可以动态的更改从一个模式到另一个。服务器模式需要请用serverSideOption属性。

二、数据类型
DataTables使用的数据源必须是一个数组，数据里的每一项将显示在你定义的行上面，DataTables可以使用三种基本的JS数据类型作为数据源：

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

(1)、数组（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
    } );

(2)、对象（Objects）
使用对象前，你必须明确告诉DataTables哪个属性对应哪一列，通过使用colunms.dataOptions完成。
例如：

  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' }
        ]
    } );

(3)、实例（instances）
DataTables从实例中获取数据数据是非常有用的，实例可以定义成抽象的方法来更新数据。
例如：

function Employee ( name, position, salary, office ) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this._office = office;

        this.office = function () {
            return this._office;
        }
    };

    $('#example').DataTable( {
        data: [
            new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
            new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
        ],
        columns: [
            { data: 'name' },
            { data: 'salary' },
            { data: 'office()' },//这里DataTables会自动识别
            { data: 'position' }
        ]
    } );

三、Data sources
DataTables支持三种数据源显示：

• DOM
• JavaScript
• Ajax

(1)、DOM
DataTables初始化后，会自动检查表格中的数据，如果存在则作为表显示的数据，当使用DOM显示表，DataTables将会把数据当做数组作为数据源。
(2)、HTML5
DataTables可以利用 HTML5 data-*属性，可以提供datatables中排序和搜索数据的附加信息。
例如，你有一个列是日期格式如‘’21st November 2013‘’，浏览器很难对他进行排序，但是你可以提供一个data-order属性作为HTML的一部分包含一个时间戳，就可以解决这个问题。此外，还可以使用data-search搜索数据。
例如：

<td data-search="21st November 2013 21/11/2013" data-order="1384992000">
    21st November 2013
</td>

DataTables中会自动检测的字段有：
排序数据：data-order和data-sort属性
查找数据：data-search和data-filter属性
(3)、Javascript
你可以指定DataTables使用哪一种数据作为初始化，详细查看DataTables的api，使用row.add()和row.reomve()方法可以动态添加删除表中的数据。
(4)、AJax
ajax和javascript数据很类似，你只需要指定要加载的数据的url即可。
服务器端处理是一种特殊的数据源，每页的数据通过异步请求来显示相应的数据，详细参考手册https://datatables.net/manual/data/