CODEWITHSUNDEEP
javascriptjqueryarraysdatatables
Homam
Homam

Reputation: 706

how to update a row in datatables without table redraw?

I have dataTables v1.9.4 populated from a javascript array and i have checkbox column, which if it is :checked then the whole row should update every 5 seconds, the problem is that i have a large fnRowCallback function which is not execute after row update thus all my row structure colapses. here is my update code: 

function updateRow(){
    newRowData = $.data(document.body, 'updatedData');
    var newRow = [];
    newRow.push(1, 1);
    for (var title in newRowData[0]){
        newRow.push(newRowData[0][title]);
    }
    oTable.fnUpdate( newRow, updateIndex, false, true);
};

and this my fnRowCallback : 

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                //make 3state button and indicator for relay mask & status
                $('td.relay', nRow).each(function(){
                    relayStatus = $(this).text();
                    $(this).html('<div class="hidden-value">' + relayStatus + '</div><div></div>');
                    if(relayStatus == 1){
                        $(this).children('div:last').addClass('relmas1');
                    }
                    if(relayStatus == 0){
                        $(this).children('div:last').addClass('relmas0');
                    }
                    if(relayStatus == -1){
                        $(this).children('div:last').addClass('relmas-1');
                    }
                });
                //makes update checkboxes
                var clientID = $('td.clientid', nRow).text();
                $('td.update', nRow).html('<input type="checkbox" data-clientid="' + clientID + '" />');
                //makes volumes
                var cuVol = parseInt($('td.volume', nRow).text(), 10)
                $('td.volume', nRow).html('<div class="volume-container"><div class="volume-tmp">' + cuVol + '</div><div class="volume-slider"></div></div>')
                $('td.volume div.volume-slider', nRow).slider({
                    value: cuVol,
                    range: "min",
                    orientation: "horizontal",
                    slide: function( event, ui ) {
                        cuVol = ui.value;
                        $(this).siblings('div.volume-tmp').text(ui.value);
                    }
                });
            },

the problem is : how to redraw a single selected row with fnRowCallback without redraw the whole table and keep its checked state after redraw
EDIT :
I double checked my code and see that my code in being updated corectly but the problem is that my code is load in table in the way it is recieved via ajax not in the way i reorderd my table columns

Upvotes: 8

Views: 17898

Answers (1)

Ori Refael
Ori Refael

Reputation: 3018

You can use fnUpdate. Basically it works by row index and all values of the row must be inserted (can't enter 2 values when you have 4 columns for example)

Here is a link to the API of the method : jQuery DataTable fnUpdate

i think it triggers the row callback, but im not sure for it.

Upvotes: 3

Related Questions