jQuery的數據表不更新TD

的改變文字在我的dataTable後的搜索，我有一個隱藏的列有包含最接近行中的數據的當前狀態，但按輸入複選框時的名稱，更改隱藏列的文本從這樣：jQuery的數據表不更新TD

$("#rBuscarPerfil").on('click','input[type="checkbox"]',function() { 
    if($(this).is(':checked')) { 
     $(this).closest('tr').find('td:last').html("Activo"); 
    } else { 
     $(this).closest('tr').find('td:last').html("Desactivado"); 
    } 
........ 
}

當按下頂部的按鈕，例如：

活躍，在輸入搜索DataTable的放置文本「ACTIVO」和表只顯示結果已經包含在過去的TD每行的「Activo」字樣。

Inactivo，放置文本輸入搜索的DataTable，並僅顯示結果有包含在每一行，「Desactivado」字的最後一個TD。

問題是這樣的：搜索工作，只有當打開頁面或刷新瀏覽器，但如果我選中或清除每行中的任何複選框，去年TD文本的最後一行在文本中，正確的改變。但似乎該表處於當前狀態，並且不更新其屬性，並且搜索不會顯示這些更改的結果。

enter image description here

HTML代碼表

<table cellspacing="1" id="rBuscarPerfil" class="tableResultsSearch" name="rBuscarPerfil"> 
<thead> 
    <tr> 
     <th>NOMBRE</th> 
     <th>DESCRIPCIÓN</th> 
     <th>ACCIÓN</th> 
     <th>STATUS</th> 
     <th style="display:none;">STATUS2</th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 
</table>

JS來加載內容表

if(response.success == "success") { 
if(area == "perfil") { 
    $('#rBuscarPerfil tbody tr').remove(); 
    $.each(response, function (index,record){ 
     if(valNumber(index)) { 
      var row = $("<tr class='"+record.IdPerfil+"'/>"); 
      $("<td nombre='"+record.NomPerfil+"'/>").text(record.NomPerfil).appendTo(row); 
      $("<td />").text(record.DesPerfil).appendTo(row); 
      $("<td />").html("<img src='media/icons/edit_item.png' class='bModifyProfile' cve='"+record.DesPerfil+"' alt='Editar' title='Editar'></img><img src='media/icons/delete_item.png' class='bDeleteProfile' cve='"+record.IdPerfil+"' alt='Eliminar' title='Eliminar'></img>").appendTo(row); 

      if (record.EdoPerfil == 1) { 
       $("<td />").html("<input type='checkbox' checked/>").appendTo(row); 
       row.css("backgroundColor","#b0f2b1"); 
      } else { 
       $("<td />").html("<input type='checkbox' />").appendTo(row); 
       row.css("backgroundColor","#ffddec"); 
      } 

      $("<td style='display:none;' />").text(record.nomStatus).appendTo(row); 
      row.appendTo("#rBuscarPerfil tbody"); 
     } 
    }); 
} 
} 

var oTable = $('#rBuscarPerfil').dataTable({ 
    "bJQueryUI": true, 
    "bRetrieve" : true, 
    "bDestroy" : true, 
    "aaSorting": [[ 0, "desc" ]], 
    "sPaginationType" : "full_numbers" 
}); 

oTable.fnDraw();

我希望我已經解釋。

來源

2013-03-15 SoldierCorp

你能提供的jsfiddle？ – Dom 2013-03-15 15:10:41

這是太多的代碼，也許我會把最重要的部分在帖子中，或等待，我會嘗試創建一個jsfiddle – SoldierCorp 2013-03-15 15:12:30

添加事件監聽器代碼，你綁定的邏輯 – kidwon 2013-03-15 15:13:07

嗯，我有同樣的問題，因爲你和我通過使用「細胞」 API對象固定它。基本上你必須使用API進行更改。

如果使用「老校友」的DataTable的構造函數，你必須使用dataTable().api() ，但如果您使用的是新的構造，它變得含蓄DataTable()與所有的API

// 1. Get the referenced table with its API 
    var tableAPI = $("#rBuscarPerfil").dataTable().api(); 

// 2. Get the row nodes, because you have to apply the changes to the plugin data 
    var nodes = tableAPI.rows().nodes(); 

// 3. Let's do the magic! 
    $('input[type="checkbox"]', nodes).on('click','input[type="checkbox"]', function() 
    { 
    // Let's Store the reference 
     var checkBox = this; 

    // Could you convert it to a valid DataTable cell, please? 
     var cell  = tableAPI.cell($(checkBox, nodes).closest("tr").find("td:last")); 
    // Thanks! 

    // Finally change the sweet and tasty data 
     cell.data( 
      $(checkBox).is(":checked") ? "Activo" : "Desactivado" 
     ).draw(); // Don't forget to call this beauty 
    });

PS。是我的第一個答案，所以我希望它對你有所幫助。

修訂嗯，我意識到電影結尾的draw()呼叫 - 它刷新數據 - ，也吸引從一開始的數據;所以，如果你是在其他頁面，那麼在您與checboxes的變化後，將返回到DataTable中的第一頁。

來源

2016-08-14 20:36:50

jQuery的數據表不更新TD

回答

相關問題