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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s