Mixing nested tables, localStorage and ajaxSource
Mixing nested tables, localStorage and ajaxSource
idealien
Posts: 7Questions: 0Answers: 0
The scenario I'm working with can have AJAX store the JSON for retrieval but no server side processing options. My test data is already starting to become size-able that I would like to build an approach that mixes localStorage and initial ajax load to populate it.
Is my understanding - that you cannot use both aaData and sAjaxSource with sAjaxDataProp on the same table - correct?
I'm thinking of building a pre-DT function to check localStorage and retrieve + populate when it is empty such that DT could always assume localStorage. Does that seem wise and/or examples already out there anyone is aware of.
Is my understanding - that you cannot use both aaData and sAjaxSource with sAjaxDataProp on the same table - correct?
I'm thinking of building a pre-DT function to check localStorage and retrieve + populate when it is empty such that DT could always assume localStorage. Does that seem wise and/or examples already out there anyone is aware of.
This discussion has been closed.
Replies
Sample JSON
[code]
{
"id": "493",
"title": "B1 - Governance Change Session 1/3",
"panel": "B1",
"date": "Friday Apr 8, 2014",
"startTime": "09:00",
"endTime": "10:00",
"room": "Bondar",
"building": "River",
"papers": [
{
"id": "1010", "title": "The first paper",
"paperLink": "http://irspm2014.com/sppa/public/conferences/1/pdfs/GuidelinesforPanelChairs2014.pdf",
"abstract": "This could be up to a 1/2 page of content escaped properly for presentation. If the meta data is properly populated on each paper (which it currently is not), this is why it will be important to have the JSON cached on initial page load of the scheduling application and only re-request in cases where there has been a version update.",
"authors": ["2000", "2001", "2002"]
},{
"id": "1011", "title": "The second paper",
"paperLink": "http://irspm2014.com/sppa/public/conferences/1/pdfs/GuidelinesforPanelChairs2014.pdf",
"abstract": "This could be up to a 1/2 page of content escaped properly for presentation.",
"authors": ["2003"]
}
]
}
[/code]
And the mRender which uses it:
[code]
function fnRenderItineraryDetail(data, type, row) {
sOut = "";
sOut += '';
sOut += '';
sOut += '' + row["startTime"] + ' - ' + row["endTime"] + '
';
sOut += row["room"] + "
" + row["building"];
sOut += '';
sOut += '';
sOut += 'x';
sOut += '' + row["title"] + '';
sOut += 'Presentation Paper(s):';
sOut += '';
$.each(row["papers"], function() {
sOut += '' + this.title + '
';
$.each(this.authors, function() {
sOut += this.name + ', ' + this.affiliation + ', ' + this.country + '
';
});
});
sOut += '';
sOut += '';
sOut += '';
return sOut;
}
[/code]
You can see that authors is just an array of IDs - to data which is stored as a separate part of the same JSON but not within scope of that tables' sAjaxSource / sAjaxDataProp.
How would you instantiate a nested table that is pre-filtered to the set of IDs? mRender doesn't have a callback?
Example of the author data:
[code]
"authors": [
{ "id": "2000", "name": "Jamie ", "affiliation": "University", "Country": "Canada"}
]
[/code]
Given that there could be 500 of these tables if everything is expanded or in view, I'm thinking that something more jQuery based around .each and retrieval of filtered data from the localStorage is going to be the more sensible scale for memory / performance reasons.
Please let me know if you see any glaring concerns in this implementation.
Page Load detect localStorage and/or Ajax
[code]
var storage, fail, uid;
try {
uid = new Date;
( storage = window.localStorage).setItem(uid, uid);
fail = storage.getItem(uid) != uid;
storage.removeItem(uid);
fail && ( storage = false);
} catch(e) {
}
if (storage) {
//Turn on if you are making changes to JSON that you want to pull fresh every page reload
var debugRefresh = true;
if (!localStorage.getItem('irspm2014_schedule') || debugRefresh == true) {
$.get("ajaxdata/presentations_multiple.txt", function(data) {
console.log("New source data requested for irspm2014_schedule");
//console.log(data);
var a = JSON.parse(data);
buildLocalStorage('irspm2014_schedule', a.conferenceData.presentations);
buildLocalStorage('irspm2014_authors', a.conferenceData.authors);
buildLocalStorage('irspm2014_panels', a.conferenceData.panels);
});
}
window.lsPresentations = JSON.parse(localStorage.getItem('irspm2014_schedule'));
window.lsAuthors = JSON.parse(localStorage.getItem('irspm2014_authors'));
window.lsPanels = JSON.parse(localStorage.getItem('irspm2014_panels'));
} else {
$("#localStorageFailure").show();
}
[/code]
Build Local Storage
[code]
function buildLocalStorage(id, src){
console.log("buildLocalStorage: " + id);
// Loop over the array, removing any nulls from previous deletes on init
for (var i = src.length - 1; i >= 0; i--) {
if (src[i] === null) {
src.splice(i, 1);
}
}
localStorage.setItem(id, JSON.stringify(src));
}
[/code]
A subset from the previous mRender function which now compares the array of author IDs in lsPresentation to get their corresponding data from lsAuthors to build presentation.
[code]
$.each(row["papers"], function() {
sOut += '' + this.title + '
';
sOut += "";
authorIDs = this.authors;
var authors = _.filter(lsAuthors, function (item) {
return authorIDs.indexOf(item.id) !== -1;
});
$.each(authors, function() {
sOut += '' + this.name + ', ' + this.affiliation + ', ' + this.country + '';
});
sOut += '';
});
[/code]
Similar to debugRefresh check - I should be able to add a last updated parameter to the AJAX and JSON to do a comparative refresh IF there need to be changes brought down to client. But thankfully this dataset is going to be quite static.