jQuery DataTables: Update a row / cell after any event without table or page reload

Updating a cell or a whole without reloading the page of the table itself using AJAX is not that hard. However, in lack of proper documentation or tutorials or examples users find difficult to implement this.

1 2 3 4 5

$(document).ready(function() {   var oTable = $('#example').dataTable();   oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell   oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1 ); // Row } );

Example:

var $targetTable = $('#jobs-table').dataTable(); 

// The second parameter will be the row, and the third is the column.
$targetTable.fnUpdate('-', '#job-row-3', 7);

Example2: in js.erb

var indexOfColStatusInDOM = $('#pr-job-status-<%= params[:id] %>').index();
var indexOfColActionInDOM = $('#action-<%= params[:id] %>').index();

var $targetTable = $('#jobs-table').dataTable();
var $targetRow = $('#job-row-<%= params[:id] %>');

$targetTable.fnUpdate('-', $targetRow, indexOfColActionInDOM);
$targetTable.fnUpdate('<%= t(:filled) %>', $targetRow, indexOfColStatusInDOM);

Source:

http://legacy.datatables.net/ref#fnUpdate

http://stackoverflow.com/questions/20862476/datatable-fnupdate-row-with-new-value

Advertisements