如何設置fiter和訂單數據到DataTables單元

我有一個DataTable和我set a cells value through its object。如何設置fiter和訂單數據到DataTables單元

我不想通過jQuery的，因爲other problems found here

我怎樣才能設置該單元格的過濾和排序不同的值喜歡的話可以在加載orthogonal data實現直接設置單元格的值，或當你使用HTML5 data-... attributes

這裏是爲了更好地理解該問題的代碼片段 - 點擊通過速度進行排序後運行它

$(document).ready(function() { 
 
    var dt = $('#example').DataTable({}); 
 
    
 
    //this is not enough as the change doesn't reflect on sorting and filtering 
 
    dt.cell($("#obj2_speed")).data(9 + 'km/h') ; 
 
    
 
    //this doesn't work like I would like to 
 
    /*dt.cell($("#obj1_speed")).data({ 
 
    "_": 7 + 'km/h', 
 
    "sort": 7, 
 
    "filter": 'seven' 
 
    });*/ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 

 
<table id="example" class="display" width="100%" cellspacing="0"> 
 
    <thead> 
 
    <tr> 
 
     <th>Object</th> 
 
     <th>Speed</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>object 1</td> 
 
     <td id="obj1_speed" data-sort="80" data-filter="eighty">80km/h</td> 
 
    </tr> 
 
    <tr> 
 
     <td>object 2</td> 
 
     <td id="obj2_speed" data-sort="8" data-filter="eight">8km/h</td> 
 
    </tr> 
 
    <tr> 
 
     <td>object 3</td> 
 
     <td id="obj3_speed" data-sort="90" data-filter="ninety">90km/h</th> 
 
    </tr> 
 
    </tbody> 
 
</table>

我用例以上聽起來是這樣的：

我最初從數據庫中加載的數據表，但後來我不得不做這需要更新DataTable的不同部分重複Ajax請求，而那些更新需要反映在它內部。

說我保持我的瀏覽器打開我的頁面，顯示我的DataTable按速度排序。 5秒後，ajax請求/響應進入並更新單元的速度。我希望更新後的行可以向上或向下移動，因爲我正在按照速度排序。我已經實現了這個目標，但是由於「8km/h」是一個字符串並且在「80km/h」和「90km/h」下無法正確排序，所以給出了一些小缺點。

來源

2017-04-27 Bogdan

@davidkonrad是的，感謝您的注意 - 將立即編輯 – Bogdan

使用服務器端腳本像PHP或Rails這樣的語言。

果然，您可以將無限數量的數據存儲在JSON中，但事實仍然是將大量數據解析爲JSON仍然很困難。

這就是數據庫的用武之地。

您可以鍵入所有這些信息到表中，如果你想，但它會更容易使用on Rails的類似Ruby來創建新的對象，然後加載它們從服務器進入。

將數據庫中對象/記錄的速度保存在其自己的列中，並在查詢中使用條件語句ORDER_BY 'speed'。隱藏表（How to hide columns in HTML table?）中的ID列，然後當您執行AJAX請求時，按照ID列對錶進行排序（我以前從未使用過JavaScript數據表，但這適用於常規HTML5表格：Sorting HTML table with JavaScript）。

來源

2017-04-27 08:26:25 ihodonald

您好像不理解我的用例。我已經使用了一個數據庫，這是我的JavaScript DataTable的實際來源，但我試圖減少細節的數量，以便暴露的問題是可以理解的。 – Bogdan

哦。那麼在那種情況下，我只會使用AJAX請求。我從來沒有使用JavaScript的數據表。 – ihodonald

我編輯了我的答案，以便它適合您的用例。對不起，我幫不了你。我喜歡你的想法！你在正確的軌道上。 – ihodonald

我通過動態更新data-order etc屬性真正掙扎。它似乎並不工作。我原以爲直接node()訪問與invalidate()相結合就可以做到這一點，但我猜你根本無法動態更改HTML5屬性並強制dataTables重新索引。看到這裏我嘗試 - >http://jsfiddle.net/m9ymz187/

然而，你的問題的更新提示，您可以通過使用自定義排序插件採取了更容易的方法：

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "speed-pre": function (a) { 
    return parseFloat(a.match(/[+-]?\d+(\.\d+)?/)) 
    } 
}); 

var table = $('#example').DataTable({ 
    columnDefs : [ 
    { targets: 0, type: 'speed' } 
    ] 
})

現在你可以改變他們的cell()內容，draw()他們仍然得到正確的順序。查看演示 - >http://jsfiddle.net/wmxz20ae/

該演示以2秒爲間隔插入隨機speed+km/h，表格排序更新很好。所以使用「插件」，你的dt.cell(<selector>).data(newData)，然後draw()。

來源

2017-04-27 10:02:25 davidkonrad

感謝您的反饋和解決方法 – Bogdan

如何設置fiter和訂單數據到DataTables單元

回答

相關問題