Refreshing data after last pagination page has displayed
Refreshing data after last pagination page has displayed
Hi All,
Having fixed part of my script with the help of yous guys, many thanks for that. I now have another issue which
I have been working on for days.
My data is loaded into a dataTables table and loops through all the pages in a continuous loop loading the row from top to bottom, perfect.
What I need the script to do is at the end or the beginning of each loop refresh the data by performing a "table.ajax.reload()".
I have tried this in my code in different location but the results have either stopped the script from running or produced results that get struck on the first page or completely missed a page out. I have tried to create a test case but I am struggling getting the data into a test table. Is there anyway the data can be refreshed/reloaded after the last page of data has been displayed.
Many thanks in advance for any time you can spare.
My script as is:
var degree = '\u2103';
var airlineimage = '../../';
var pageInfo;
var endInt;
var currentInt;
var currentpage;
var datareload;
var datarefresh;
$(document).ready(function() {
table = $('#fidsTable').DataTable({
createdRow: function(row, data, dataIndex) {
$('td:eq(0)', row).css('padding-left', '15px');
$('td:eq(1)', row).css('padding-top', '5px', 'padding-bottom', '5px', 'max-height', '10px');
$('td:eq(2)', row).css('color', 'yellow');
$('td:eq(3)', row).css('color', 'yellow');
$('td:eq(3)', row).css('margin-left', '-50px');
},
ajax: {
url: 'get_fids.php',
dataSrc: '',
},
pageLength: 10,
lengthChange: false,
responsive: true,
ordering: false,
autoWidth: false,
paging: true,
searching: false,
orderable: false,
info: true,
pagingType: "numbers",
dom: '<"top"i>rt<"clear">',
language: {
"emptyTable": "There are no flights for <?php echo $date; ?>",
"info": "Page No: _PAGE_ of _PAGES_",
},
columnDefs: [{
'max-width': '10%',
'targets': 2
}],
columns: [{
data: "ScheduleTime",
width: '10%'
},
{
data: "Image",
width: '10%',
render: function(data, type) {
return '<img class="responsive" src="' + airlineimage + '' + data + '"/>';
}
},
{
data: "AirportName",
width: '20%'
},
{
data: "Temp",
width: '10%'
},
{
data: "Flight",
width: '22%'
},
{
data: "RemarksWithTime",
width: '27%'
},
],
rowCallback: function(row, data) {
$('td', row).eq(0).addClass('flightheadertime');
$('td', row).eq(2).addClass('flightdatadepart');
$('td', row).eq(3).addClass('flightdatastatus');
$('td', row).eq(4).addClass('flightdataflightno');
$('td', row).eq(5).addClass('flightdatastatus');
$('td', row).eq(3).addClass('flightdatatemp');
},
-
initComplete: function(settings, json) {
// Set the first page load
$("table tbody tr").hide();
$("table tbody tr").each(function(index) {
$(this).delay(index * 100).show(1000);
});
// Get the page info, so we know what the last is
var pageInfo = table.page.info();
datareload = pageInfo.pages * 6000;
console.log("REFRESH 1", datareload);
// Set the ending interval to the last page
endInt = pageInfo.pages,
// Current page
currentInt = 0,
// Start an interval to go to the "next" page every 3 seconds
interval = setInterval(function() {
// "Next" ...
table.page(currentInt).draw('page');
$("table tbody tr").hide();
$("table tbody tr").each(function(index) {
$(this).delay(index * 100).show(1000);
});
// Increment the current page int
currentInt++;
console.log("ENDINT", endInt);
console.log("CURRENTINT", currentInt);
// If were on the last page, reset the currentInt to the first page #
if (currentInt === endInt) //{
currentInt = 0;
},
6000);
}
});
});
:
Replies
Hi All, Please disregard this post.
Bytec