Displaying frequently changing data in a data table - javascript

I am using data tables to display dynamic data which keeps changing, the data is stored in an array and the array length keeps changing(might increase or decrease). I have set an interval of 1000 milliseconds to keep the data table updated. But since I am using paging, whenever I go to a different page rather from page 1, I am redirected back to page 1 automatically when the data table gets refreshed every 1000 milliseconds (one second). Is there any way which can help me to prevent this? I don't think we can stop the reloading of data table when data gets updated, but I am looking for ideas/hacks one can do to prevent this issue. One simple alternative is to use a button which when clicked refreshes the table rather than auto-refreshing with some interval.
fun1 = setInterval(() => {
if (names.length >= 0 ) {
var namesArray = names.map((device) => {
return Object.keys(device).map((key) => {
return device[key]
});
});
if (Table != undefined) {
Table.destroy();
}
Table = $('#ID1').DataTable({
destroy: true,
data: namesArray,
paging: true,
searching: false,
oLanguage: {
"sEmptyTable": " "
},
ordering: false,
info: false,
columns: [
{ title: "Name" },
{ title: "Age" },
],
});
}
}, 1000);
}

Related

Can I save a state in amchart graph?

I was task to add additional feature that can save its state after a user toggle the legend items when he logged out and the state should be the same when he logged in. Is it possible to do it in amchart?
AmCharts doesn't provide any built-in solutions to save/load chart state, so you need to write your own custom code. As #Abhijit mentioned, you can use localStorage to accomplish this. I already provided a sample solution in our support forum using the legend events but here it is again for you and anyone else who is looking:
AmCharts.makeChart("...", {
// ...
graphs: [{
// ...
//get hidden value from localStorage. needs to cast stored string "1" or "0" to a number, then casted to a boolean if a value exists
hidden:
localStorage.carsHidden !== undefined
? !!+localStorage.carsHidden
: false,
},
// repeat
],
legend: {
// ...
listeners: [
{
event: "showItem",
method: saveState
},
{
event: "hideItem",
method: saveState
}
]
}
});
function saveState(e) {
localStorage[e.dataItem.valueField + "Hidden"] =
e.type === "hideItem" ? 1 : 0;
}
Demo

jQuery datatables exporting data to Excel

I am trying to export directly from the datatable to Excel.
Starting with the ajax call:
displayRecords();
function displayRecords()
{
$.ajax({
url: 'process/getRecords.php',
type: 'POST',
data: '',
dataType: 'html',
success: function(data, textStatus, jqXHR)
{
var jsonObject = $.parseJSON(data);
var table = $('#resultsTable').DataTable({
{
"data": jsonObject,
"columns": [
{"data": "JOB_REFERENCE"},
{"data": "VOYAGE_REFERENCE"},
// few more columns
],
"iDisplayLength": 25,
"scrollY": 500,
"scrollX": true,
"bDestroy": true,
"paging": true,
"stateSave": true
}
},
error: function(jqHHR, textStatus, errorThrown)
{
console.log('fail: '+ errorThrown);
}
});
// button click to export results
var tableresults = $('#resultsTable').dataTable();
$("#btnExport").on('click', function(e)
{
e.preventDefault();
window.open('data:application/vnd.ms-excel,' +
encodeURIComponent(table[0].outerHTML));
});
}
Using all of the above, I can successfully export the results from the datatable. I can even use the filter search to drill down to a smaller data set, and export the results.
I was using the following fiddle: http://jsfiddle.net/donpayne/jzdjdo3z/
The problem I am having lies with the Show Entries dropdown of the datatable. Typically, the dropdown is set to 10. Whether you filter the search down or not, if the total record count is greater than the Show Entries dropdown, the Excel sheet will only return the total amount set in the dropdown.
You can test what I am talking about in the fiddle. Set the Show Entries dropdown to 10, then export to Excel. If you'll notice, there are 58 total records in that table. The Excel sheet will only return 10 records.
I need the to return all the records. If I have 2000 records, and the Show Entries dropdown is set to 10, I need the exported Excel sheet to include all 2000 records.
The same if I filter the search down to about 56 records; when I export to excel, I should have a total of 56 records on that spreadsheet, regardless of what the Show Entries dropdown is set to.
As stated, I referenced the code from the fiddle and altered it to fit my datatable.
I think the best thing to do is to remove the paging, then do the export, then turn the paging back on once it's done.
I made a couple minor changes:
$(function ()
{
var table = $('#example').DataTable();
$("#btnExport").click(function(e)
{
table.page.len( -1 ).draw();
window.open('data:application/vnd.ms-excel,' +
encodeURIComponent($('#example').parent().html()));
setTimeout(function(){
table.page.len(10).draw();
}, 1000)
});
});
Updated fiddle: http://jsfiddle.net/jzdjdo3z/176/
Page Length docs: https://datatables.net/reference/api/page.len()
Paging option docs: https://datatables.net/reference/option/paging
I'm not sure why initializing with dataTables vs DataTables made a difference, but it did. So keep an eye out for that.

jQuery TableSorter not sorting after <td> update database update using Ajax?

I am implementing a rating system, where users can rank up/down entries. Each entry has a rank, initially rank is 0. I have this information stored in a database and then I print this table on a page and I use the jQuery tablesorter class, so all entries are sorted by rank.
When a user ranks up/down an entry I update the rank in the database and then I display the updated rank using ajax. Each entry has a up and down button.
I have the tablesorter initialized:
$(function() {
$('#list_sort').tablesorter({
sortList: [[0,0]], // allow sorting on the ranking column only
headers: {
1: {
sorter: false
},
2: {
sorter: false
},
3: {
sorter: false
}
}
})
});
The up and down button has a onClick event and that calls a function which updates the database, and then using ajax the ranking is updated but I want to sort it after it is updated.
I tried several methods including:
$('#list_sort').trigger("update");
and
lastSortList = $("#list_sort")[0].config.sortList;
$("#list_sort").trigger("#list_sort", [lastSortList]);
$('#list_sort').tablesorter();
but nothing seems to work. Any help is appreciated.
I have a solution of this but I don't think this is a good solution. I used
setTimeout function after the user ranks and the database is updated and it works.
setTimeout(function() {
$('#list_sort').tablesorter({
sortList: [[0,1]],
headers: {
1: {
sorter: false
},
2: {
sorter: false
},
3: {
sorter: false
}
}
})
}, 50);

Display grand total in the footer so that value remains same on page change for load once true

I am implementing JQGrid and sending the datatype as JSON. Also, I've set loadonce as true, and I am able to get the footer summary correctly in the footer.
However, on page navigation, the total value changes according to the row data in each page. My requirement is to display the grand total of all the records of the particular column so that the footer value remains same on page change.
I am using the following code to get the footer summary:
var grid=$("#mygrid");
sum = grid.jqGrid('getCol','amount',false,'sum');
grid.jqGrid('footerData','set',{ID:'Total:',amount:sum});
You can use userDataOnFooter option to achieve your goal. First you set this option to true while initializing:
$("#mygrid").jqGrid({
...
footerrow : true,
userDataOnFooter : true,
});
After that you can send the values for footer row in your response, JSON should look something like this:
{
total: x,
page: y,
records: z,
rows : [
{ id: "1", cell: ["value11", "value12", "value13"] },
{ id: "2", cell: ["value21", "value22", "value23"] },
...
],
userdata: { ID: "Total:", amount: <sum counted on server side> }
}
There is also live example available on jqGrid Demos page, you should choose "New in Version 3.5" and then "Summary Footer Row".

how to save a SlickGrid column order (js)?

I have two grids in my application.
var columns1 = [
{
name: "Address",
field: "address"
id: "address",
sortable: true
}
]
var columns2 = [
{
{
name: "Rating, in %",
field: "rating"
id: "rating_percent",
resizable: false
}
]
They are absolutely independent from each other. Also, I have some grid events descriptions in another js file.
grid.onColumnsReordered.subscribe(function (e, args) {
_this.updateHeaderRow();
// here
});
When user changes the columns order, then I want to save this order. Should I change (overwrite) the DOM elements, I mean column1 and column2?
So question: how can I save the columns order?
njr101's answer (using store.js) is great, but note: store.js cannot store functions (i.e. for editors, formatters), so once you store.get() the columns, you'll need to add the functions back, using your original stock "columns" array:
if (store.get('gridColumns')) {
grid.setColumns(store.get('gridColumns')); // Restore settings if available
grid.getColumns().forEach(function(ch) { // Re-create editor and formatter functions
var result = $.grep(columns, function(e){ return e.id == ch.id; });
if (result[0]) {
ch.editor = result[0].editor;
ch.formatter = result[0].formatter;
}
});
}
I have done this before and the easiest way I found was to store the columns in local storage. I use the store.js library which makes this pretty simple.
grid.onColumnsReordered.subscribe(function (e, args) {
store.set('gridColumns', grid.getColumns());
});
When you want to restore the columns (e.g. when the user returns to the page) you can just call:
grid.setColumns(store.get('gridColumns'));

Categories