What the the exact version number of DataTables that is shipped with NSBAppStudio 8.5.4.0?
Some of the functions available are not documented on the DataTables site… the build() function for example.
Thanks for any help…
Datatables is implemented as a wrapper in AppStudio. However, you can use the “wrapped” library with all the native documented calls. I’m assuming you have a problem. I had several issues with initialization as done by AppStudio, build() being one of them, especially when I was adding some of the additional feature libraries. What’s up?
Thanks for the quick response.
Firstly, I am a complete newbie to AppStudio but have been a programmer for about 40 years…
In the final analysis, I want to grab data incrementally from an ajax source (by page number).
The only point that I have been successful in replacing the default data is during app startup in the Main() function (I am using Javascript). This for me is not acceptable as I will need to refresh/rebuild the table on demand.
How can I achieve this or how can I leverage the “wrapped” library?
Couple quick questions: Are you going to use any of the add on libraries, like select, I use select a lot and it’s not a simple drop in for AppStudio but it’s not bad. Here’s some initialization and setup I currently use for a simple table. I came up with it over a year ago, so I may have missed something.
initialization in Main()
BreadCrumbsCols = [
{title: ""},
{title: "", visible: false}
];
BreadCrumbsDataTable.settings.columns = BreadCrumbsCols;
BreadCrumbsDataTable.settings.data = BreadCrumbsData;
BreadCrumbsDataTable.settings.searching = false;
BreadCrumbsDataTable.settings.ordering = false;
BreadCrumbsDataTable.settings.paging = false;
BreadCrumbsDataTable.settings.scroller = false;
BreadCrumbsDataTable.settings.scrollCollapse = true;
BreadCrumbsDataTable.build();
To display the datatable
function DrawBreadCrumbs() {
// simplified to show the important step - setup the array
for (xi = BCData.length; xi > -1; xi--) {
BreadCrumbsData[xi] = [BCData[xi][0], 'some other data'];
};
BreadCrumbsDataTable.style.display = ''; // important - must be displayed before build
BreadCrumbsDataTable.build();
BreadCrumbsDataTable.style.width ='100%' // this corrects an issue with responsive objects
};
I have example of select and responsive add-ons as well. But this is my simplist implementation. BreadCrumbsData is an array. They have additional fun little things.
I found playing with the examples at datatables web site while viewing with chrome inspector provided lots of interesting information that was not really obvious. Check the element definitions and their JS code.
…so you are saying that this function will redraw the table with the new data in the BreadCrumbsData array?
correct. It provides for the size (length) of the array to be changed to any size. The array width (2nd dimension) must correspond to the tables columns property definition, eg, column count must match and must be correct data type - character or numeric mainly. Adding titles gives the header. Scroller is also nice to turn on. The search looks too weird for my use. Ordering can be accomplished in the columndefs. Here’s an idea or two: I just copied the definition code. Most have select add-on, but the other properties are the same.
ChoiceCols = [
{className: 'select-checkbox'},
{title: "Choice Key", visible: false},
{title: "Choice"}
];
DestroyDataTable(ChoiceDataTable);
setTimeout(function(){
CreateDataTable(ChoiceDataTable, {
data: ChoiceData,
info: false,
lengthChange: true,
ordering: true,
order: [[2, 'asc']],
paging: true,
// scrollY: 200,
scrollX: 300,
scroller: true,
scrollCollapse: true,
searching: false,
columns: ChoiceCols,
select: 'single',
/*responsive: {
details: false
},*/
columnDefs: [ { "orderable": false, "targets": 0 },
{ "orderable": false, "targets": 1 }]
});
}, 500);
ObsCols = [
{title: "Obs Key", visible: false},
{title: "Journal Entry", orderData: 2},
{title: "Date / Time", visible: false}
];
ObsDataTable.settings.autoWidth = false;
ObsDataTable.settings.columns = ObsCols;
ObsDataTable.settings.data = ObsData;
ObsDataTable.settings.searching = false;
ObsDataTable.settings.ordering = true;
ObsDataTable.settings.order = [[2, 'asc']];
ObsDataTable.settings.paging = true;
// ObsDataTable.settings.scrollY = 200;
ObsDataTable.settings.scroller = true;
// ObsDataTable.settings.responsive = {
// details: {
// display: $.fn.dataTable.Responsive.display.childRowImmediate
// }
// }
// these commented out were for responsive mode - I had issues and have not completed that task yet.
ObsDataTable.settings.scrollCollapse = true;
ObsDataTable.build();
this one has no select column. Note the ordering of one column is really the invisible column order.
ObsCols = [
{title: "Obs Key", visible: false},
{title: "Journal Entry", orderData: 2},
{title: "Date / Time", visible: false}
];
ObsDataTable.settings.autoWidth = false;
ObsDataTable.settings.columns = ObsCols;
ObsDataTable.settings.data = ObsData;
ObsDataTable.settings.searching = false;
ObsDataTable.settings.ordering = true;
ObsDataTable.settings.order = [[2, 'asc']];
ObsDataTable.settings.paging = true;
// ObsDataTable.settings.scrollY = 200;
ObsDataTable.settings.scroller = true;
// ObsDataTable.settings.responsive = {
// details: {
// display: $.fn.dataTable.Responsive.display.childRowImmediate
// }
// }
ObsDataTable.settings.scrollCollapse = true;
ObsDataTable.build();
There is also a data tables sample in AppStudio. It’s in the BootStrap controls. And I hope you are using Javascript for this project. AppStudio compiles to Javascript, and you need to know javascript to be able to effectively debug your code. It was a major hurdle for me almost 2 years ago when I sold everything, retired and started this app project. I originally was going to use basic, but realized that was not a good solution. My first projects in basic had several parts of Javascript code inserted to get things done, which is kool you can do that in appstudio basic.
When you get to ajax, definitely use the AppStudio wrapper, it handles the promises for you. Again, see the sample. And search this discussion board, it is full of valuable information.
oops - I left these out - and they are critical to understanding what I cut. I said it was a year - it’s coming back. The Destroy is the key to reinitializing. 
function DestroyDataTable(table) {
if (!$.fn.DataTable.isDataTable('#' + table.id)) return;
$('#' + table.id).DataTable().destroy(); // remove table
$('#' + table.id).empty(); // this needs to be here - completely cleanup the table
$('#' + table.id).off('click', 'td'); // need to kill event listener
};
function CreateDataTable(table, settings) {
table.settings = settings;
table.build();
$('#' + table.id).DataTable( ).on( 'select', function ( e, dt, type, indexes ) {
if (table.id == 'ChoiceDataTable') {
// this is where I put some code so when the table item is selected
}
if (table.id == 'ReportsWeeksDataTable') {
CurrentReportIndex = indexes[0];
ReportsButton.disabled = false;
}
} );
$('#' + table.id).DataTable( ).on( 'deselect', function ( e, dt, type, indexes ) {
if (table.id == 'ChoiceDataTable') {
// on deselect of the table item
}
if (table.id == 'ReportsWeeksDataTable') {
CurrentReportIndex = -1;
ReportsButton.disabled = true;
}
} );
};