jQuery数据表不'；t更改TD文本后更新搜索

在我的dataTable中，我有一个隐藏列，其中包含最近行中数据的当前状态的名称，但当按下输入复选框时，将该隐藏列的文本从以下方式更改：

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

当按下top按钮时，例如：

活动，在dataTable的输入搜索中放置文本“Activo”和table show，结果仅包含在每行的最后一个td中的“Activo”字

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

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

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>

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

名义
描述
ACCIÓN
地位
状态2

Js加载表中的内容

<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>

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

if（response.success==“success”）{
如果（面积=“性能”）{
$（'rBuscarPerfil tbody tr'）。删除（）；
$。每个（响应、功能（索引、记录）{
if（编号（索引））{
变量行=$（“”）；
$（“”）.text（record.NomPerfil）.appendTo（row）；
$（“”）.text（record.DesPerfil）.appendTo（row）；
$（“”）.html（“”）.appendTo（行）；
if（record.EdoPerfil==1）{
$（“”）.html（“”）.appendTo（行）；
css（“backgroundColor”，“#b0f2b1”）；
}否则{
$（“”）.html（“”）.appendTo（行）；
css（“backgroundColor”，“#ffddec”）；
}
$（“”）.text（record.nomStatus）.appendTo（row）；
第行。附录（“#rBuscarPerfil tbody”）；
}
});
}
}
变量oTable=$（'#rBuscarPerfil'）。数据表({
“bJQueryUI”：没错，
“bRetrieve”：没错，
是的，
“aaSorting”：[[0，“desc”]]，
“sPaginationType”：“完整编号”
});
oTable.fnDraw（）；

---

我希望我已经解释过了。

我遇到了与您相同的问题，我通过使用“cell”API对象修复了它。基本上，您必须使用API进行更改

如果使用“oldschool”数据表构造函数，则必须使用

DataTable（）.api（）

，但如果使用新构造函数，它将隐式地成为所有API的

DataTable（）

// 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
    });

这是我的第一个答案，所以我希望它能帮助你

已更新 我在最后实现了

draw（）

调用——它刷新了数据——但也从一开始就提取了数据；因此，如果您在另一个页面，在使用复选框进行更改后，它将返回到DataTable中的第一个页面

我的例子：

<td id="H105" class="locker-bg-selected-td spacer" title="118242"><a class="lnkLocker locker-bg-selected-a cls0" href="javascript:$(`#modalLockStudent`).modal(`show`);$(`#`+$(`#H105`).find(`.span-coverScreen`).text()).fadeOut(5000);void(0);">H105</a><span class="span-student-name" style="display:none">My student 1/span><span id="spanH105" class="span-student-id" style="display:none">0101010</span><span class="span-ada" style="display:none"></span><span class="span-broken" style="display:none"></span><span class="span-reserved" style="display:none"></span><span class="span-serial" style="display:none">A1A1A1</span><span class="span-combo" style="display:none">18-02-32</span><span class="span-coverScreen" style="display:none">coverScreen</span></td>

<script>
        function updateDataTablesSearch(locker, studentId, studentName, coverScreen) {
            if (locker != null && locker != '') {                
                var tableAPI = $("#tbAD1").dataTable().api();
                var cell = tableAPI.cell('#' + locker);

                $(cell.node()).attr('title', studentId);
                $(cell.node()).find('.span-student-id').text(studentId);
                $(cell.node()).find('.span-student-name').text(studentName);
                $(cell.node()).find('.span-coverScreen').text(coverScreen);

                cell.data( 
                    cell.node().innerHTML
                );
                cell.draw();            
            }
        }
</script>

My student 1/span>0101010A118-02-32封面屏幕
函数更新了StatableSearch（locker、studentId、studentName、coverScreen）{
如果（locker！=null&&locker！=“”）{
var tableAPI=$（“#tbAD1”）.dataTable（）.api（）；
var cell=tableAPI.cell（“#”+locker）；
$（cell.node（））.attr（'title'，studentId）；
$（cell.node（））.find（'.span student id'）.text（studentId）；
$（cell.node（））.find（'.span student name'）.text（studentName）；
$（cell.node（））.find（'.span coverScreen'）.text（coverScreen）；
单元格数据（
cell.node（）.innerHTML
);
cell.draw（）；
}
}

你能提供jsfiddle吗？代码太多了，也许我会把最重要的部分放在帖子里，或者等等，我会尝试创建一个jsfiddle添加事件侦听器代码，你可以绑定逻辑来查看编辑过的帖子，请！