Editing a Datatable Column get restored to it's original value when I do a Global Search....

@DasDeva

In a datatable, if i search something and edit a row cell (change a textbox value or check/uncheck checkbox) , and if I clear out the search, the edited column value is getting reverted back to the original value. Also, I a edit a row cell and do a Search, again the edited column value is getting replaced to the original value.

I guess search reads the data from Cache. I am not sure how to change the data in the chache....

Any help is much appreciated...

allan

You can use rows().invalidate() to invalidate the cache. However, if you are searching inside a live DOM element such as an input element, it is more difficult than simply invalidating since DataTables will only read the HTML, not the value of the input.

Allan

@DasDeva

Hi allan, Thanks for your Reply!!

I do tried with the rows().invalidate(). I used the below codes once the column data is changed.

var table = $('#tblReassginChannels').dataTable();

$('#tblReassginChannels tbody #'+id+' td:eq(8)').html('<input type="checkbox" name="vehicle" value="Car" checked>');
table.row($('#tblReassginChannels tbody #'+id)).invalidate();

But still I am facing the issue.

@DasDeva

This is my code to load the datatable during page load.

function LoadDataTableChannel()
{
$('#tblReassginChannels').dataTable( {

    "bLengthChange": false,
   // "bFilter": false,
    "autoWidth": false,
     "fnInitComplete": function () {
        $('#tblReassginChannels').show();
    },

     "order": [[ 0, "asc" ]],  // , [1, "asc"]
     "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 1, 2, 3,4,7,8,9,10,11,12,13,14,15,16,17,18,19] },
      { "bSearchable": false, "aTargets": [ 0,1,9,10,11,12,13,14,15,16,17,18,19] }

   ],

     "bPaginate": false,


      "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;




        api.column(0, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {

                var GroupedClassName = $(rows).eq(i).find("td.ChannelGroupedTrs").text();

                var strChannelParrent = $(rows).eq(i).find("td.ClsParentChannel").text();

                var Clonetrs = $("tr."+GroupedClassName).clone();

                $(Clonetrs).removeClass(GroupedClassName);
                $(Clonetrs).removeClass("odd");
                $(Clonetrs).removeClass("even");



                $(rows).eq( i ).before(
                '<tr style="height:25px!important;"><td  colspan="2">'+
                 '<table border="1" width="100%" style="padding:0px !important">' +
                   '<tr style="background-color:#DCE6F2;">' +
                '<td style="width:30px; font-weight:bold"><button id='+GroupedClassName+'  value="plus" type="button" style="background-color:#DCE6F2;" onclick="javascript:toggleReportChannel(this)"  class="btn btn-default btn-sm"><span id="spn_'+GroupedClassName+'" class="glyphicon glyphicon-plus"></span></button> '+strChannelParrent+'</td>'+
                  // '<td style="width:30px; font-weight:bold"><img src="../../SiteAssets/plus.gif" style="height:15px;width;15px;cursor:pointer;" onclick="javascript:toggleReportChannel(this)" />Parent Channel:'+strChannelParrent+'</td>'+
                   //'<td style="width:100px;"><b>Primary Contact</b></td>' +
                  // '<td style="width:180px;"></b> '+strPrimaryContact+'</b></td>' +
                   '<td class="GetClass" style="display:none;">'+GroupedClassName+'</td>'+
                   '</tr>'+
                   '<tr class="TrCls_'+GroupedClassName+'">'+
                   '<td colspan="3"><table width="100%" border="1" class="tbl_'+GroupedClassName+'"><table class="table table-bordered"><tr style="background-color:#D9D9D9;" id="ClonedTrs'+GroupedClassName+'">'+
                   '<th style="width:300px" >Channel</th>'+
                   '<th style="width:400px" >Current Primary Contact</th>'+
                    '<th style="width:400px" >Primary Contact at Start Of Survey</th>'+
                    '<th style="width:150px" >Current Channel Status</th>'+
                   '<th style="width:400px" >AssignedTo</th>'+
                   '<th style="width:150pxpx" >Survey Status</th>'+
                    '<th style="width:200pxpx" >Survey DueDate</th>'+
                   '<th >Reassign?</th>'+

                   '</tr></table></td>'+
                   "</tr>"+
                   '</table>'+
                 '</td></tr>'
                );


                var ClsHide = ".TrCls_"+GroupedClassName;
                $(ClsHide).hide();

                $(Clonetrs).insertAfter("tr#ClonedTrs"+GroupedClassName);

                $("tr."+GroupedClassName).remove();


                last = group;
            }
        } );            

    }


} );

//$("tr[class^='TrCls_'],tr[class*=' TrCls_']").hide();

$("#tblReassginChannels_filter").before("<div class='GridHeading'>Channel Owners</div>");

}

When any column cell is changed, i have the below code to for invalidate

var table = $('#tblReassginChannels').dataTable();

$('#tblReassginChannels tbody #'+id+' td:eq(8)').html('<input type="checkbox" name="vehicle" value="Car" checked>');
table.row($('#tblReassginChannels tbody #'+id)).invalidate();

Still i am facing this issue..... Any help is much appreciated ....

allan

Okay, so it is live DOM searching. I'm not sure that there is a good way of doing this in DataTables to be honest.

You could possibly try using the live DOM sorting plug-ins which do interface with the search, and will refresh when the row is invalidated, but its far from optimised, or even throughly tested.

This is one of the areas where I know DataTables needs work.

Allan

@DasDeva

Thanks allan... I will take a look in live DOM sorting plug ins