Refreshing Datatable data without reloading the whole page
14,931
Solution 1
You can use fnDraw()
to force the datatable to re-query the datasource. Try this:
// store a reference to the datatable
var $dataTable = $("#myTable").dataTable({ /* Your settings */ });
// in the AJAX success:
success: function(data) {
$dataTable.fnDraw();
},
Have a read of the fnDraw
entry in the documentation.
Solution 2
var $dataTable = $("#myTable").dataTable({ /* Your settings */ });
var oSettings = $dataTable.fnSettings();
var page = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength);
$dataTable.fnPageChange(page);
Author by
Alphy
Updated on June 28, 2022Comments
-
Alphy almost 2 years
I am using codeigniter to load data on datatables, on the data table each row has a link that when clicked data is sent elsewhere. The data in that particular row should disappear and only links that have not been clicked remain. I have managed to do that with AJAXbut on success i am forced to reload the page on jQuery timeout
sample:
//Table headers here <tbody class="tablebody"> <?php foreach ($worksheets as $sheets) : ?> <tr> <td><?php echo $sheets->filename ?></td> <td class="bold assign"> <?php echo $sheets->nqcl_number ?> <?php echo anchor('assign/assing_reviewer/' . $sheets->nqcl_number, 'Assign') ?> <a id="inline" href="#data">Assign1</a> <input type="hidden" id="labref_no" value="<?php echo $sheets->nqcl_number; ?>" /> </td> <td><?php echo $sheets->uploaded_by ?></td> <td><?php echo $sheets->datetime_uploaded ?></td> <td></td> </tr> <?php endforeach; ?> </tbody>
I would like that on AJAX success, the row of the datatables where the link was is dynamically removed from the table without page refresh.
$.ajax({ type: "POST", url: "<?php echo base_url(); ?>assign/sendSamplesFolder/" + labref, data: data1, success: function(data) { var content = $('.tablebody'); $('div.success').slideDown('slow').animate({opacity: 1.0}, 2000).slideUp('slow'); $.fancybox.close(); //Reload the table data dynamically in the mean time i'm refreshing the page setTimeout(function() { window.location.href='<?php echo base_url();?>Uploaded_Worksheets'; }, 3000); return true; }, error: function(data) { $('div.error').slideDown('slow').animate({opacity: 1.0}, 5000).slideUp('slow'); $.fancybox.close(); return false; } });
I have tried this but it loads two same pages. what's the work around?
content.load(url);
-
Garr Godfrey almost 8 yearsthis is more what I think I need. doing any fnUpdate seems to cause pagination issues.