Question

我创建了一个数据表，当点击一行时，该行将突出显示。

$("#example tbody").click(function(event) {
  $(eTable.fnSettings().aoData).each(function (){
     $(this.nTr).removeClass('row_selected');
  });

 $(event.target.parentNode).addClass('row_selected');

});

表格中的数据将自动刷新

function refreshTable(table){
  eTable.fnReloadAjax(null, null, true);    
}           

function tableRefresher() {
    refreshTable(eTable);
    tid = setTimeout(tableRefresher, 1000); // repeat myself
}

刷新表格后，所选行不再突出显示。

如何在刷新后如何保持选择不变？

谢谢！

Answer 1

对于任何有兴趣的人，

这或多或少是我解决问题的方法

首先将隐藏的选定行id存储在变量selectedRowId

中

$('#example tbody tr').live('click', function () {
    var data = eTable.fnGetData(this);
    selectedRowId = data[4];
});

刷新表格

refreshTable(eTable,'getAlerts');

function refreshTable(table, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    //table = $(tableId).dataTable();
    oSettings = table.fnSettings();
    table.fnClearTable(this);
    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
    setSelectedRow();
  });
}

刷新后重新选择行

function setSelectedRow(){
    $(eTable.fnSettings().aoData).each(function (){
        var data = eTable.fnGetData(this.nTr);
        if(selectedRowId == data[4]){
            $(this.nTr).addClass('row_selected');   
        }   
    });
}

Answer 2

最简单的方法是让您的$("#example tbody").click()事件也存储一个包含所选行值的Cookie。

然后在ajax调用成功返回后，使用refreshTable(table)函数，读取cookie并重新添加'row_selected'类。

所以 - ＆gt;表加载，用户选择一行，行索引存储在cookie中，表刷新，cookie读取，行重新选择。

魔术！

jQuery数据表在刷新后保持选择

2 个答案: