Datatables:通过DOM数据源中的名称引用列

Datatables: referencing columns by names from a DOM datasource

本文关键字：引用 通过 DOM 数据源 Datatables      更新时间：2023-09-26

现在我有以下html表：

<table id="datatable">
    <thead>
        <th>fruits</th>
        <th>vegs</th>
    </thead>
    <tbody>
        <tr>
            <td>apple</td>
            <td>potato</td>
        </tr>
        <tr>
            <td>apple</td>
            <td>carrot</td>
        </tr>
    </tbody>
</table>

我想用这样的名字引用这些列：

<script type="text/javascript">
$(document).ready(function() {  
    /* Init the table */
    var oTable = $('#datatable').dataTable( );
    //get by sTitle
    console.log(oTable);
    var row = oTable.fnGetData(1)
    console.log(row['vegs']);//should return 'carrot'
} );
</script>

当数据源是DOM时，是否有javascript函数fnGetData()来返回对象而不是数组？

这还没有经过测试，但可能有效：

$(function() {
    // Get an array of the column titles
    var colTitles = $.map($('#datatable th'), function() {
        return this.text();
    }).get();
    var oTable = $('#datatable').dataTable();
    var row = oTable.fnGetData(1);
    console.log(row[colTitles.indexOf('vegs')]);
});

所以，我研究了一下，发现datatable插件在处理列方面不是很聪明——它们总是需要用整数访问的数组。唯一处理列及其属性的是aoColumns对象——感谢@JustinRobel在初始化后找到了访问该对象的fnSettings方法。如果你还没有经历过这种情况，那么你就被$table.find("thead th")卡住了。

然而，现在很容易将表作为对象数组：

var table = $mytable.dataTable(​…);
var cols = table.fnSettings().aoColumns,
    rows = table.fnGetData();
var result = $.map(rows, function(row) {
    var object = {};
    for (var i=row.length-1; i>=0; i--)
        // running backwards will overwrite a double property name with the first occurence
        object[cols[i].sTitle] = row[i]; // maybe use sName, if set
    return object;
});
result[1]["vegs"]; // "carrot"

在查看了ShatyUT的答案和fbas的答案后，我想出了这个：

$(function() {
   var oTable = $('#datatable').dataTable( );
   var oSettings = oTable.fnSettings();  // you can find all sorts of goodies in the Settings
   var colTitles = $.map(oSettings.aoColumns, function(node) {
    return node.sTitle;
   });
   var row = oTable.fnGetData(1);
   console.log(row[colTitles.indexOf('vegs')]);
} );

但必须有更好的方法。。。

相关文章：