Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 628
Homam Avatar asked Jan 19 '13 06:01

Homam


People also ask

How many rows can DataTables handle?

The maximum number of rows that a DataTable can store is 16,777,216.

Is DataTables an API?

DataTables has an extensive API which can be used to access the data contained in a table and otherwise manipulate the table after the table initialisation has completed. The DataTables API is designed to reflect the structure of the data in the table and how you will typically interact with the table through the API.

Is DataTables a plugin?

This repository contains a collection of plug-ins for the jQuery DataTables table enhancer. These plug-ins are feature enhancing for the DataTables library, adding extra options to core functionality such as additional sort algorithms, API methods and pagination controls.


1 Answers

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.

like image 80
Ori Refael Avatar answered Nov 11 '22 00:11

Ori Refael