Question

我想在同一页面上的多个表之间共享相同的数据源（JSON Javascript变量），每个表都按如下方式进行过滤：

仅包含来自数据源的数据，其中列'id'== table html attribute'id'

如果没有实现AJAX次调用，是否可以从数据表函数中实时过滤掉JS源数据（能够访问外部数据属性）？

这是我的实际代码：

var $tabella = $('table.tabellaDanno').DataTable({      
        "data": dannoRelazioneJs,
        "info": false,
        "paging": false,
        "searching": false,
        "columns": [
            {
                "data": "descrizione",
                "render": function(data) {
                    return "<div contentEditable=\"true\">" + data + "</div>";
                }
            },
            {"data": "um"},
            {"data": "quantita"},
            {"data": "costoUnitario"},
            {"data": "totaleNuovo"},
            {"data": "statoUso"},
            {"data": "totaleUso"},
            {
                "data": null,
                "render": function(data) {
                    return "<a class=\"btn btn-danger\" name=\"eliminaRigaDanno\" title=\"Elimina Danno\" id=\""+data.id+"\"><span class=\"glyphicon glyphicon-minus-sign\"></span></a>"
                }
            }
        ]

    })

感谢您的阅读，亚历

Answer 1

<强>解

使用custom filters使用您自己的规则过滤数据。

DataTables提供了一种API方法来添加您自己的搜索功能$.fn.dataTable.ext.search。这是一个函数数组（将它们推到它上面），它将在表绘制时运行，以查看是否应包含特定行。

请注意，尽管数据是对象数组，但自定义过滤函数数据内部由数组表示，因此在下面的示例中，使用data[0]检索列ID。如果您的ID位于第一个以外的列中，请使用适当的从零开始的索引。

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var api = new $.fn.dataTable.Api( settings );        

        // Table ID
        var tableId = api.table().node().id;

        // Column ID
        var colId = data[0];

        return ((tableId === colId) ? true : false);
    }
);

$(document).ready(function (){        
    var data = [
        { "id": "table1","name": "Tiger Nixon","position": "System Architect","salary": "$320,800","start_date": "2011\/04\/25","office": "Edinburgh","extn": "5421"},
        { "id": "table2","name": "Garrett Winters","position": "Accountant","salary": "$170,750","start_date": "2011\/07\/25","office": "Tokyo","extn": "8422" }
    ];

    var table = $(".dt").DataTable({
        data: data,
        columns: [
            { "data": "id" },           
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]        
    });
});

<强>样本

请参阅this jsFiddle以获取代码和演示。

Answer 2

我想我明白你要去哪里。假设您有多个这样的表格，其中包含＆＃34; html属性＆＃39; id＆＃39; ＆＃34; ：

<table data-id="1"></table>
<table data-id="2"></table>

和共享的JSON变量

var data = [
    { "id" : 1, "someOtherValue" : "joe" },
    { "id" : 1, "someOtherValue" : "ben" },
    { "id" : 2, "someOtherValue" : "gary" },
    { "id" : 2, "someOtherValue" : "peter" },
    { "id" : 2, "someOtherValue" : "john" },
    { "id" : 1, "someOtherValue" : "fritz" },
    { "id" : 1, "someOtherValue" : "carl" }
]

然后您可以像这样一次初始化所有表

$("table").each(function() {
    $table = $(this);
    $table.DataTable({
        data : dataFilter($table.data('id')),
        columns : [
            { data : 'id', title : 'id' },
            { data : 'someOtherValue', title : 'A value' }
        ]
    })
})

将此功能用作dataFilter()：

function dataFilter(val) {
    var result = [], i;
    for (i=0;i<data.length;i++) {
        if (data[i].id == val) result.push(data[i]);
    }
    return result;
}

演示 - ＆gt;的 http://jsfiddle.net/wbod677n/

这就是原则。这当然不完全是你想要做的，用你想到的值替换data-id（或者你称之为属性的东西），因此它对应于共享JSON中的值。

Jquery Datatables过滤器（比如'where'子句）对同一页面上的每个表都有相同的JS数据

2 个答案: