Jquery Datatables過濾器（如'where'子句）同一頁上的每個表相同的JS數據

我想在同一頁上的多個表之間共享相同的數據源（JSON Javascript變量），每個過濾器都像這樣：Jquery Datatables過濾器（如'where'子句）同一頁上的每個表相同的JS數據

包括從數據源只有數據，其中柱的「id」 ==表HTML屬性的「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>" 
       } 
      } 
     ] 

    })

謝謝您的閱讀，亞歷

來源

2015-10-06 alzambo

你可以試試我的yadcf插件，嘗試使用[initMultipleTables]（https://github.com/vedmack/yadcf/blob/master/jquery.dataTables.yadcf.js#L328），看看[它的行動] （http://yadcf-showcase.appspot.com/dom_multi_columns_tables_1.10.html） – Daniel

我想我明白你在哪裏前進。比方說，你有這樣的多個表，用「HTML屬性‘ID’」：

<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; 
}

演示 - >http://jsfiddle.net/wbod677n/

這是原則。這當然不是你想要做的，用你想要的值代替data-id（或者你稱之爲屬性的東西），所以它對應於共享JSON中的任何值。

來源

2015-10-06 11:00:54 davidkonrad

SOLUTION

使用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" } 
     ]   
    }); 
});

DEMO

見this jsFiddle代碼和演示。

來源

2015-10-06 11:19:51

Jquery Datatables過濾器（如'where'子句）同一頁上的每個表相同的JS數據

回答

相關問題