更改 TD 文本后，jQuery 数据表不更新搜索

Question

在我的数据表中，我有一个隐藏列包含最近行中数据的当前状态名称，但是当按下输入复选框时，可以通过以下方式更改该隐藏列的文本:

$("#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");
    }
........
}

当按下顶部按钮时，例如:

Active，在数据表的输入搜索中放置文本“Activo”，表格仅显示每行最后一个 td 中包含“Activo”单词的结果。

Inactivo，在数据表的输入搜索中放置文本，并仅显示每行最后一个 td 中包含“Desactivado”字样的结果。

问题是这样的:搜索仅在打开页面或刷新浏览器时有效，但如果我选中或取消选中每行中的任何复选框，则最后一个 TD 中的文本与最后一行中的文本将正确更改。但该表似乎处于当前状态，并且不会更新其属性，并且搜索不会显示这些更改的结果。

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();

我希望我已经解释过了。

Answer 1

嗯，我遇到了和你一样的问题，我通过使用“cell”API 对象修复了它。基本上你必须使用 API 进行更改。

如果您使用“oldschool”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() 调用 - 它刷新了数据 - 但也从头开始绘制数据；因此，如果您在其他页面，在使用复选框进行更改后，它将返回到数据表中的第一页。