table.add.rows() not updating the datatable from AJAX response from Python Flask
table.add.rows() not updating the datatable from AJAX response from Python Flask
TanviP
Posts: 6Questions: 2Answers: 0
I'm trying to refresh the datatable with the response received after AJAX POST call. However it doesn't add the data to datatable but creates empty rows that are the exact same number as in the response of the AJAX call.
I'm new to this and referred to https://datatables.net/reference/api/rows.add() to build the table refresh part
My AJAX response is as follows (using json.dumps in Flask)-
[{"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L1"},{"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L2"},...{"name": "XYZ", "branch": "main", "city": "Tokyo", "state": "P3", "country": "Japan", "pin": "110011", "landmark": "L30"}]
My code snippets are -
Flask
c_data = []
for c in myData:
c_data.append({
'name': c[0],
'branch': c[1],
'city': c[2],
'state': c[3],
'country': c[4],
'pin': c[5],
'landmark': c[6],
})
return json.dumps(c_data)
jQuery
function makeRequest() {
var pageNum = table.hasOwnProperty('page') ? table.page.info().page : 1;
if (pageNum > 0) {
$.ajax({
data: JSON.stringify({ "pageNum": pageNum }),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/my/url",
success: function(data){
console.log(jQuery.type(data));
console.log(data);
table.clear();
table.rows.add(data);
table.draw();
}
})
}
json.dumps(c_data) from Flask is received successfully in data part of success: function(data)
Any help to resolve this would be much appreciated. Thanks in advance!
Answers
Can you post how you declare the DataTable, please.
Colin
Hi Colin, please see below:
You are using Javascript objects (AKA dictionary in Python) so you will need to use
columns.datato define your columns. See the data sources docs and this example. The example usesajaxinstead ofrows.add()but the concepts are the same for your solution.Kevin
@kthorngren I've tried this example but when I add any option to the DataTable initialization other than lengthmenu, the auto pagination doesn't work. What I'm trying to achieve is on click of a page number button, use that number to do some processing in my Flask, and return records that need to be displayed on the datatable. Which is why I'm using separate AJAX POST request, and adding rows received in its success response using rows.add
That would be unexpected, and also a different problem. As Kevin said, to see the data, you need to declare the columns in
columns.dataso DataTables knows where to get the data values. It definitely needs that. Once that's in place and working, we can look at why your paging doesn't work.Colin
@colin If I add the columns option then there's no pagination, and I don't have a page number to click on. The functionality I'm trying to implement is when a page number is clicked. So that's where I'm facing an issue with mapping the data to table
I've even tried
table.columns.adjust().draw()aftertable.rows.add(data)but it still doesn't draw the data.Sounds like you are getting an error. Did you look at the browser's console for errors? Likely a syntax error due to not separating the options with a comma.
Here is an example using your sample data with
rows.add()andcolumns.data:http://live.datatables.net/gimedoxe/1/edit
Kevin