jquery-datatables - jQuery DataTables - 了解数据是如何输入的，mRender/mData..？

Question

我正在努力掌握 jQuery 数据表(v1.10.1，通过 CDN)以及当前版本中使用的约定。各种文档充其量在“完整”示例中令人困惑/缺乏，在最坏的情况下相互冲突。

1. 请解释当前 (v1.10.1) 关于定义字段内容的最佳做法。我看到很多关于 columns/mData/mRender/mDataProp 等的信息，我对每个信息的含义和/或何时应该使用它们感到负担过重(请参阅下面的“研究”部分以获取示例)。

2. 其次，关于使用日期和“set”/“display”/“filter”/“sort”(假设这是采用 mData/mRender 的方法)，我的立场是什么？

示例

编辑:这是 fiddle 中一些数据的示例:

var massData = [
  { "Column1": "test1", "Timestamp": "Sun Jul 27 2014 14:42:20 GMT+0100 (GMT Standard Time)", "Date": "18/10/2012" }, 
  { "Column1": "test2", "Timestamp": "Mon Jul 28 2014 14:42:20 GMT+0100 (GMT Standard Time)", "Date": "18/10/2016" }, 
  { "Column1": "test3", "Timestamp": "Wed Jul 22 2014 14:42:20 GMT+0100 (GMT Standard Time)", "Date": "18/01/2012" }
];

var keys = ["Column1", "Timestamp", "Date"];
var columns = [];
for (var keyIndex = 0; keyIndex < keys.length; keyIndex++) {
    columns.push({
        "title": keys[keyIndex],
        "data": keys[keyIndex],
        "defaultContent": ""
    });
}


$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

$('#example').dataTable({
    "data": massData,
        "deferRender": true,
        "scrollY": 400,
        "scrollX": true,

        "columns": columns
});

http://jsfiddle.net/2M97f/

研究

1. 我看到 this question它有使用 mRender 的代码，尽管我的理解是过滤/排序将使用实际数据

2. 我看到 this example和 this documentation它使用 aoColumnDefs、aTargets 和 mData..？

3. This question回复了“使用呈现的文本进行过滤”，但使用了 aoColumnDefs、mDataProp 和“renderDate()”函数，但没有使用 mRender

4. mRender 的文档和 mData建议 mRender 依赖于 mData..

5. 其他文档建议弃用 fnRender/bUseRendered

Answer 1

首先，您正在查看以前版本的示例(基于匈牙利表示法，这些示例很明显)因此，任何使用 mData 的示例现在都可以使用，但一旦遗留支持被删除，可能会变得不可用。虽然它们可以让您了解前进的方向，但在旧 API 中找到方法然后期望它们在 1.10 中按原样工作是很危险的。有一个 version converter document这对理解新旧之间的等价物有很大帮助。

我的偏好是使用 this example它使用“列”定义轻松指定数据字段。您还可以快速轻松地为其中的每一列定义内容，例如可搜索、标题、可见等。有关其他信息，请参阅 API。

因此，我的代码中的示例数据表如下所示:

$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'keyoffield1', title:'name title', visible:'false' },
        { data: 'keyoffield2', title:'position title' },
        { data: 'keyoffield3', title:'salary title here' },
        { data: 'keyoffield4', title:'office title here' }
    ]
} );

至于排序，它被设置为识别开箱即用的日期字段，如您在示例中所见(单击标题以更改排序)但是，如果您想设置默认排序，例如 asc， desc 等，这很容易用 columns.sort 完成，正如您将在 API 中看到的那样。有一个 simple plugin增强对可能未按照 DataTables 构建使用的方式格式化的字段的排序。

fnRender 不见了，closest equivalents are explained here .如果您忽略这些示例以及删除它时发生的提示，就很容易看出 Allan 如何继续使用新方法，例如 column.render。