jQuery Datatable doesn't update search after change text of TD

Question

In my dataTable, I have a hidden column has contain the name of current Status of the data in closest row but when press the input checkbox, change text of that hidden column from this way:

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

And when press the buttons of top, for example:

Active, in the input search of dataTable placed text "Activo" and table show only results has contain in the last td of each row, "Activo" word.

Inactivo, placed text in the input search of dataTable and display only results has contain in the last td of each row, "Desactivado" word.

The problem is this: The search works only when open the page or refresh browser but if I check or uncheck any checkbox in each row, the text in last TD the text in the last row, change correctly. But it seems that the table is in a current state and does not update its attributes and the search does not show results with those changes.

enter image description here

Html code table

<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 to load content in 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();

I hope I have explained.

It's too much code, maybe I'll put the most important parts in the post, or wait, i'll try create a jsfiddle — SoldierCorp

Jeancarlo Fontalvo Jeancarlo Fontalvo · Accepted Answer · 2016-08-14T20:36:50

Well I had the same problem as you and I fixed it by using the "cell" API object. Basically you have to make the changes with the API.

If you use the "oldschool" DataTable constructor you have to use dataTable().api() , but if you're using the new constructor, it becomes implicitly DataTable() with all the 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. Is my first answer so I hope it helped you.

UPDATED Well I realized about the draw() call at the end -- it refresh the data --, but also draws the data from the begining; so if you are in other page, after you make the change with the checboxes it will return you to the first page in the DataTable.

jQuery Datatable doesn't update search after change text of TD

2 Answers