Unable to construct DataTable using data retrieved from Parse.com - javascript

In my project I'm using Parse.com as server and database, and DataTable plugin to create a table showing the data returned. There's no problem when I use a predefined json file, but when I try to construct a local json file using the data returned from Parse.com I get an error. It seems no matter what I do, the table creation process is run first and only afterwards the json object is created.
JSfiddle with the relevant code is here. Please note that due to the large amount of code I did not provide a working sample, but only the relevant part.
function getDataFromParse(){
console.log("test function run");
var loc_json={
"data":[]
};
//get data from parse
var parseTable = Parse.Object.extend("parseTable");
var tableObj = new parseTable();
var query = new Parse.Query(parseTable);
var count=0;
query.descending("createdAt");
query.find({
success: function(resultArr){
console.log("retreiving data from parse");
for(var i=0;i<resultArr.length;i++){
query.get(resultArr[i].id,{
success: function(tableObj){
var ret_phone = tableObj.get("phone");
var ret_first = tableObj.get("firstName");
var ret_last = tableObj.get("lastName");
var ret_status = tableObj.get("redemption_status");
var ret_vipCode = tableObj.get("vipCode");
loc_json.data.push([count,ret_first +" "+ret_last,ret_phone,tableObj.get("createdAt"),ret_vipCode]); //construction of local json
count++;
console.log("finished fetching data for "+ret_first+" "+ret_last);
},
error: function(object, error) {
console.log("could not do something "+error.message);
}
});
}
console.log("success function end");
},
error: function(error){
console.log(error.message);
}
});
console.log("trying to return json");
return loc_json;
}
var rows_selected = [];
console.log("table creation");
var table = $('#example').DataTable({
ajax: getDataFromParse(), // ajax: 'https://api.myjson.com/bins/4qr1g', THIS WORKS!!
columns: [
{},
{ data: 1},
{ data: 2 },
{ data: 3 }
],
'columnDefs': [{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox">';
}
}],
'order': [1, 'asc'],
'rowCallback': function(row, data, dataIndex){
// Get row ID
$('input.editor-active', row).prop( 'checked', data[3] == 1 )
var rowId = data[0];
// If row ID is in the list of selected row IDs
if($.inArray(rowId, rows_selected) !== -1){
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
console.log("table trying to create itself");
}
}
});

SOLUTION
Remove ajax option from DataTables initialization options.
Call getDataFromParse() after initializing the DataTable
In the success handler for each query, replace this line:
loc_json.data.push([count, ret_first + " " + ret_last, ret_phone, tableObj.get("createdAt"), ret_vipCode]);
with the line below to add a new row to the table.
$('#example').DataTable()
.row.add([
count,
ret_first + " " + ret_last,
ret_phone,
tableObj.get("createdAt"),
ret_vipCode
])
.draw(false);
DEMO
See this jsFiddle for code and demonstration.
NOTES
The drawback of this solution is that a new row would be added once each query finishes successfully. Not sure if it is possible with Parse.com to handle event when all queries are completed.
Your example uses jQuery DataTables 1.9 but you're using option names and API from 1.10. You need to upgrade your jQuery DataTables library.
You're supplying data to jQuery DataTables using ajax option were in fact you should be using data option instead.
Remove code after // FOR TESTING ONLY as it was needed for demonstration only in jQuery DataTables - Row selection using checkboxes article and is not needed for production.

Related

jQuery Datatables with Dynamic Data

I have a simple messaging system and I am retrieving the messages from the DB using jQuery/AJAX and appending to a table. I wanted pagination for the messages so I opted to use the DataTables plugin (https://datatables.net/).
I am having trouble using this with my dynamically generated data. I also have functions such as "delete message" which would then delete the message and then retrieve the messages again (refresh the table). I am getting the error "cannot re-initialise DataTable".
This is my code so far:
function getmessages(){
$.ajax({
type: "POST",
url: "modules/ajaxgetmessages.php",
dataType: 'json',
cache: false,
})
.success(function(response) {
if(!response.errors && response.result) {
$("#tbodymessagelist").html('');
$.each(response.result, function( index, value) {
var messagesubject = value[3];
var messagecontent = value[4];
var messagetime = value[5];
var sendername = value[2];
var readstatus = value[7];
var messageid = value[8];
if (readstatus==0){
messageheader += '<tr><td><input type="checkbox" class="inboxcheckbox input-chk"></td><td class="sendername"><b>'+sendername+'</b></td><td class="messagesubject"><b>'+messagesubject+'</b></td><td><b>'+messagetime+'</b></td><td class="messageid" style="display:none">'+messageid+'</td><td class="readstatus" style="display:none">'+readstatus+'</td><td class="messagecontent" style="display:none"><b>'+messagecontent+'</b></td></tr>';
} else {
messageheader += '<tr><td><input type="checkbox" class="inboxcheckbox input-chk"></td><td class="sendername">'+sendername+'</td><td class="messagesubject">'+messagesubject+'</td><td>'+messagetime+'</td><td class="messageid" style="display:none">'+messageid+'</td><td class="readstatus" style="display:none">'+readstatus+'</td><td class="messagecontent" style="display:none"><b>'+messagecontent+'</b></td></tr>';
}
});
$("#tbodymessagelist").html(messageheader);
$('#tblinbox').DataTable({
"paging": true,
"ordering": false,
"info": false
});
} else {
$.each(response.errors, function( index, value) {
$('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
});
}
});
}
So how can I essentially, make changes to my table after message deletion or other functions and then "refresh" the table? It also shows Showing 0 to 0 of 0 entries in the footer even though there are entries there.
You must destroy datatable berfore create new instance;
`
$('#tblinbox').DataTable.destroy();
$('#tblinbox').empty();

jQuery - Add row to datatable without reloading/refreshing

I'm trying add data to DB and show these data in same page using ajax and jQuery datatable without reloading or refreshing page. My code is saving and retrieving data to/from database. But updated data list is not showing in datatable without typing in search box or clicking on table header. Facing same problem while loading page.
Here is my code
//show data page onload
$(document).ready(function() {
catTable = $('#cat_table').DataTable( {
columns: [
{ title: "Name" },
{ title: "Level" },
{ title: "Create Date" },
{ title: "Status" }
]
});
get_cat_list();
});
//save new entry and refresh data list
$.ajax({
url: 'category_save.php',
type: 'POST',
data:{name: name,level: level},
success: function (data) {
get_cat_list();
},
error: function (data) {
alert(data);
}
});
//function to retrieve data from database
function get_cat_list() {
catTable.clear();
$.ajax({
url: 'get_category_list.php',
dataType: 'JSON',
success: function (data) {
$.each(data, function() {
catTable.row.add([
this.name,
this.level,
this.create_date,
this.status
] );
});
}
});
}
The solution is here - for DataTable server side data source enabled
.draw() will cause your entire datatable to reload, say you set it to show 100 rows, after called .row().add().draw() > datatable will reload the 100 rows again from the server
I wasted an hour trying to find any solution for this very old question, even on DataTable official support there is no good solution suggested ...
My solution is
1- call .row().add()
2- do not call .draw()
3- your row must have an Id identifier to use it as a selector (check the rowId setting of the datatable)
4- after calling .row().add(), the datatable will have the row added to it's local data
5- we need to get this row from datatable object and transform it to HTML using the builtin method .node()
6- we gonna prepend the result HTML to the table :)
All that can be done in two lines of code
var rowData = someRowCreatedByAnAjaxRequest;
myDataTableObject.row.add(rowData);
$("#myTable-dt tbody").prepend(myDataTableObject.row(`tr#${rowData.Id}`).node().outerHTML)
Thanks ☺
From the documentation,
This method will add the data to the table internally, but does not
visually update the tables display to account for this new data.
In order to have the table's display updated, use the draw() method, which can be called simply as a chained method of the row.add() method's returned object.
So you success method would look something like this,
$.each(data, function() {
catTable.row.add([
this.name,
this.level,
this.create_date,
this.status
]).draw();
});

Data tables ajax post user selected parameters and reload table data

I'm using Angular Data Tables (0.5.2) with DataTables 1.10.12 to load a Data Table instance. In the UI I provide a DatePicker (start and end date) for the user to select in order to limit the data by a date range. When the user click a submit button, my plan is to send a Data Tables ajax request back to the server to perform a new query including the start and end dates.
I have the Data Tables ajax.reload() working in the code below, however, I cannot get the start and end date values added to the ajax form post. I've tried several different configurations but none have worked. Can anyone suggest a working solution to simply invoke an ajax request with custom parameters to the server so that it can reprocess the request and send back updated results to Data Tables? Thanks!
//HTML
<table datatable="" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="table table-striped table-bordered table-hover dataTable"></table>
//CONTROLLER
function dashboardDownloadsCtrl($scope, dataService, DTOptionsBuilder, DTColumnBuilder, DTInstanceFactory, DTRenderer) {
var vm = this;
vm.dtInstance = {};
vm.dtOptions = DTOptionsBuilder.newOptions()
.withDOM('<"html5buttons"B>lTfgitp')
.withOption('ajax', {
type: 'POST',
dataSrc: 'data',
url: dataService.dashboard.downloads.route
})
.withOption('fnPreDrawCallback', function () { console.log('loading..') })
.withOption('fnDrawCallback', function () { console.log('stop loading..') })
.withOption('processing', true)
.withOption('serverSide', true)
.withOption('responsive', true)
.withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('RowNum').notVisible(),
DTColumnBuilder.newColumn('first_name').withTitle('First name'),
DTColumnBuilder.newColumn('last_name').withTitle('Last name')
];
}
// Directive submit button click
$('button.applyBtn').click(function () {
var $el = $(this);
var startDate = $('.daterangepicker_start_input input').val();
var endDate = $('.daterangepicker_end_input input').val();
//get reference to controller
var dtVm = scope.$parent.vm;
var dtInstance = dtVm.dtInstance.DataTable;
// add start and end date picker values to ajax data source and call reload
dtVm.dtOptions.ajax.data = function(d) {
d.datepicker_start_date = startDate;
d.datepicker_end_date = endDate;
};
var resetPaging = true;
dtInstance.ajax.reload(function(json){
console.log('callback');}, resetPaging);
});
I got it working by simply adding the data method initialization. Apparently, this has to be set before you update the field values in the Ajax reload callback.
.withOption('ajax', {
type: 'POST',
dataSrc: 'data',
url: dataService.dashboard.downloads.route,
data: function (d) {
d.datepicker_start_date = $('.daterangepicker_start_input input').val();
d.datepicker_end_date = $('.daterangepicker_end_input input').val();
}
})

Generate HTML code from data stored in csv, xml or json

What I have: a csv (can be converted to xml or maybe to json) file that has many rows, each row contains several columns that store data about some profile.
What I need to do: to generate an html page that corresponds to each row automatically given the html elements' layout. Since I may have hundreds of rows and all pages got identical html elements (I mean, like an imdb or facebook profile) except the unique profile data shown to users, a small change to the layout of a page later would require days of stupid manual work.
Is there some kind of framework that can do what I seek to do? Thank you!
The process
You need three steps :
1) Use Ajax to fetch data from your server and turn it into an array. You could do this eg. with the following jQuery :
$.ajax({
type: "GET",
url: "data.csv",
success: CSVToHTMLTable
});
2) Once you have get your file, you need to parse it. Json and XML support are native in JavaScript. An easy & reliable way to do it for a CSV file, would be to use a library like Papa Parse :
var data = Papa.parse(data).data;
3) You need to define a function to transform your array into an HTML table. Here's how you could do this with jQuery :
function arrayToTable(tableData) {
var table = $('<table></table>');
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
row.append($('<td>'+cellData+'</td>'));
});
table.append(row);
});
return table;
}
Putting everything together
Here's how you can put everything together :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
function arrayToTable(tableData) {
var table = $('<table></table>');
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
row.append($('<td>'+cellData+'</td>'));
});
table.append(row);
});
return table;
}
$.ajax({
type: "GET",
url: "http://localhost/test/data.csv",
success: function (data) {
$('body').append(arrayToTable(Papa.parse(data).data));
}
});
</script>
I'd suggest json2html if you can convert your csv to json.

After DataTable reload most functions returns null

I am getting a weird error after reloading dataTable, most functions returns null. I tried table.fnDestroy and then table.datatable() but no luck.
var oTable = $('#sample_table').dataTable();
var nRow = $(this).parents('tr')[0];
var aData = oTable.fnGetData(nRow); //works
After table reload
var nRow = $(this).parents('tr')[0];
var aData = oTable.fnGetData(nRow); //returns null
Here is a test case showing the issue : JSFiddle
Any Ideas?
Thanks.
DataTables keeps track of the data internally, so it is unaware of external changes made to the table elements. Use the provided API to reload data into DataTables.
I would initialize DataTables with some options that specify how to render the Edit column using the mRender callback:
var oTable = $('#sample_editable_1').dataTable({
"aoColumnDefs": [{
"aTargets": [4],
"mRender": function (data, type, full) {
return '<a class="edit" href="javascript:;">Edit</a>';
}
}]
});
Now in your reload callback, instead of replacing the body of the table you can use fnClearTable and fnAddData:
$('body').on('click', '#reload', function () {
//this is where ajax will be added
var theData = ['New', 'New', 'New', 'New', null];
var theTable = $('#sample_editable_1').dataTable();
theTable.fnClearTable();
theTable.fnAddData(theData);
});

Categories