2017-06-22 88 views
1

我有一個DataTable(15年1月10日)Datatables。保持選定的行提交後

<script th:inline="javascript"> 

$(document).ready(function() { 
    $('#deviceEventTable').dataTable({ 
     "order": [[ 0, "desc" ]], 
     "bLengthChange": false, 
     "bStateSave": true, 
     "pageLength": 20, 
    }); 

    $('#deviceEventTable tbody').on('click', 'td', function() {   
     $(this).closest("tr").toggleClass('selected'); 
    }); 

}); 

</script> 

一個Thymeleaf模板我也有這個表中定義

<tr th:each="deviceEvent : ${deviceEvents}" onclick="javascript:document.getElementById('deviceEventFormId').submit();" > 

將有可能保持他選擇行提交後?

+1

可以創建一個隱藏的輸入來存儲行?從代碼提交該行到隱藏的輸入...也許?只是想出來的框。 –

回答

1

爲什麼不使用select的擴展?使跟蹤選定行變得更容易。然後,你可以存儲行每次選擇的選擇或取消選擇由:

table.on('select.dt deselect.dt', function() { 
    localStorage.setItem('DataTables_selected', table.rows({ selected: true }).toArray()) 
}) 

使用initComplete回調還原選定狀態時,表被初始化:

var table = $('#example').DataTable({ 
    select: true, 
    stateSave: true, 
    initComplete: function() { 
    var api = this.api(); 
    var selected = localStorage.getItem('DataTables_selected').split(','); 
    selected.forEach(function(s) { 
     api.row(s).select(); 
    }) 
    } 
}) 

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

儘量選擇一些行,然後單擊運行(重新加載)或URL複製到另一個瀏覽器選項卡。