• datatbales的数据源类型(Data source types)

    数据是复杂的,并且所有的数据是不一样的。因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据。

    本节将讨论 DataTables 处理数据的三个核心概念：

    • 处理模式
    • 数据类型
    • 数据源

    处理模式(Processing modes)

    DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):

    • 客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
    • 服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。

    每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。 请注意,两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。

    PS:当然这个不是一定的，针对数据是可增长的，不确定最终数据是多少那么最好是选择服务器模式，如果是确定的数据，利用缓存选择客户端模式也未尝不可

    服务器模式  :需要启用 serverSideOption 属性，完整的介绍参考 服务器处理(server-side)

    数据源类型(Data source types)

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

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

    DataTables 可以用 columns.dataOption 或者 columns.renderOption columns.render 1不定时一讲 columns.render 2不定时一讲columns.render 3不定时一讲 columns.render 4不定时一讲 选项来设定显示数据，默认操作模式是数组（Arrays），而对象（Objects）和实例（Instance）能处理更复杂的数据

    数组(Arrays)

    数组在 DataTables 中很容易使用当使用数组作为数据源,每个数组元素的数量必须等于表中的列数。例如,对于一个6列的表格如下:

    1. var data = [
    2. [
    3. "Tiger Nixon",
    4. "System Architect",
    5. "Edinburgh",
    6. "5421",
    7. "2011/04/25",
    8. "$3,120"
    9. ],
    10. [
    11. "Garrett Winters",
    12. "Director",
    13. "Edinburgh",
    14. "8422",
    15. "2011/07/25",
    16. "$5,300"
    17. ]
    18. ];
    19.  
    20. //然后 DataTables 这样初始化：
    21. $('#example').DataTable( {
    22. data: data
    23. } );

    对象(Objects)

    对象看起来很直观，使用起来和数组略有不同。如果你已经参考了 API ，你可以知道通过对象获得特定的数据非常简单， 你只需要使用一个属性的名字，而不是记住这个数组的索引，比如data.name，而不是data[0]

    根据表格的需求显示，对象可以包含更多的信息,例如包括数据库的主键而用户是看不见的.

    使用对象前，你需要明确告诉 DataTables 那个属性对应那一列， 通过使用 columns.dataOption 或者 columns.dataOption 选项完成。

    下面看看 Object 是个什么样的格式：

    1. var data = [
    2. {
    3. "name": "Tiger Nixon",
    4. "position": "System Architect",
    5. "salary": "$3,120",
    6. "start_date": "2011/04/25",
    7. "office": "Edinburgh",
    8. "extn": "5421"
    9. },
    10. {
    11. "name": "Garrett Winters",
    12. "position": "Director",
    13. "salary": "$5,300",
    14. "start_date": "2011/07/25",
    15. "office": "Edinburgh",
    16. "extn": "8422"
    17. }
    18. ];
    19. //object可以如下初始化表格
    20. $('#example').DataTable( {
    21. data: data,
    22. //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
    23. //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
    24. columns: [
    25. { data: 'name' },
    26. { data: 'position' },
    27. { data: 'salary' },
    28. { data: 'office' }
    29. ]
    30. } );

    实例(Instances)

    DataTables 从实例中获取数据显示是非常有用的，这些实例可以定义成抽象的方法来更新数据。

    注意,name,salary,position 是属性而office是一个方法，DataTables 允许这样使用，他会自动识别，详细见手册 columns.dataOption 
    以上为实例作为数据源的实例，效果如下：

    1. function Employee ( name, position, salary, office ) {
    2. this.name = name;
    3. this.position = position;
    4. this.salary = salary;
    5. this._office = office;
    6.  
    7. this.office = function () {
    8. return this._office;
    9. }
    10. };
    11.  
    12. $('#example').DataTable( {
    13. data: [
    14. new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
    15. new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
    16. ],
    17. columns: [
    18. { data: 'name' },
    19. { data: 'salary' },
    20. { data: 'office()' },
    21. { data: 'position' }
    22. ]
    23. } );

    Data sources

    DataTables 支持三种数据源显示：

    • DOM
    • JavaScript
    • Ajax

    DOM

    DataTables 初始化后，它会自动检查表格中的数据，如果存在即作为表显示的数据 （注意，如果你这时使用data或者ajax传递数据将不会显示），这是使用 DataTables 最简单的方法，渲染已经存在的table

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

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

    1. <button id="table_id_example_button">获取选中的行</button>
    2. <table id="table_id_example" class="display">
    3. <thead>
    4. <tr>
    5. <th>Column 1</th>
    6. <th>Column 2</th>
    7. </tr>
    8. </thead>
    9. <tbody>
    10. <tr>
    11. <td>Row 1 Data 1</td>
    12. <td>Row 1 Data 2</td>
    13. </tr>
    14. <tr>
    15. <td>Row 2 Data 1</td>
    16. <td>Row 2 Data 2</td>
    17. </tr>
    18. </tbody>
    19. </table>
    20.  
    21. $(document).ready( function () {
    22. var table = $('#table_id_example').DataTable({
    23. //这样配置后，即可用DT的API来访问表格数据
    24. columns: [
    25. {data: "column1"},
    26. {data: "column2"}
    27. ]
    28. });
    29. //给行绑定选中事件
    30. $('#table_id_example tbody').on( 'click', 'tr', function () {
    31. if ($(this).hasClass('selected')) {
    32. $(this).removeClass('selected');
    33. }
    34. else {
    35. table.$('tr.selected').removeClass('selected');
    36. $(this).addClass('selected');
    37. }
    38. } );
    39. //给按钮绑定点击事件
    40. $("#table_id_example_button").click(function () {
    41. var column1 = table.row('.selected').data().column1;
    42. var column2 = table.row('.selected').data().column2;
    43. alert("第一列内容："+column1 + "；第二列内容： " + column2);
    44. });
    45. } );

    HTML5

    DataTables 中还可以利用HTML5 data- *属性,可以提供datatables中排序和搜索数据的附加信息。例如您可能有一个列是一个日期格式,如“21st November 2013”，浏览器将难以排序,但是你可以提供一个data-order属性作为HTML的一部分包含一个时间戳,就可以很容易地解决。此外,可以使用data-search搜索数据。例如:

    1
    2
    3
    <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 属性

    详细参考手册

    Javascript

    你可以指定 DataTables 使用哪一种数据作为初始化，这些数据可以是数组，对象或者实例(见上)，只要 JavaScript 可以访问到数据就可以交给 DataTables 显示。

    查看 DataTables 的api，使用row.add()和row.remove()方法可以动态添加删除表格中的数据

    Ajax

    ajax和javascript数据很类似，你只需要指定要加载的数据的url即可。

    服务器端处理是一种特殊的数据源，每页的数据通过异步请求来显示相应的数据，这允许大量的数据集显示，怎么实现服务器处理，详细参考手册
  • 相关阅读:
    【转载】关于C#中动态加载AppDomain的问题
    poj2239
    poj2231
    poj2229
    poj2234
    poj2236
    前 路
    只含一个单词的句子
    做人准则
    改变人生的32句励志名言
  • 原文地址：https://www.cnblogs.com/keyi/p/6733749.html
Copyright © 2020-2023  润新知