How to render data after Button Ajax Call?
How to render data after Button Ajax Call?
ilazycoder
Posts: 12Questions: 2Answers: 0
I have made custom buttons (Collection Dropdown Buttons) using the rules of DataTable. Buttons are created successfully. With Every custom button I want to call an Ajax to get data from Database. After that I want to plot these data in my datatable without refreshing the page.
buttons: [
{
text: 'This Week',
action: function ( e, dt, node, config ) {
$.ajax({
url: "{{ route('finance-this-week') }}",
method: 'GET',
dataType: "json",
success: function(data) {
columns: [
{ 'data': 'id' },
{ 'data': 'invoiceNumber' },
{ 'data': 'customerId' },
{ 'data': 'actions' }
]
}, error: function(data) {
console.log(data);
}
})
}
}
]
This is my try. Data is not plotting in DataTable.
But data is coming perfectly.
Data are array of object:
[
{
"id": 95,
"invoiceNumber": "202000135",
"userID": 3,
"invoiceStatus": 0,
"productName": "Orange",
}
]
This discussion has been closed.
Replies
Instead of using
in your success function use
row.add()withdraw(). For example:$('#myTable').DataTable().row.add( data ).draw( false );.Kevin
This error is showing!!!
Did you follow the troubleshooting steps in the link in the error?
http://datatables.net/tn/4
My guess is your original data structure is different than the data in the button's ajax response.
Or maybe you need to use JSON.parse().
Or if you are returning more than one row you will need to use
rows.add().If you still need help please post a link to your page or a test case so we can take a look at what is going on.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Thank you for your answer.
I gave my Data Sample on my post. Will I need to use
$.each()?You have an array of data. Use
rows.add(). This will add one or more rows that are in an array.Kevin
http://live.datatables.net/xuyaheva/1/
I have added it in live.datatables.net
I don't know why js is not working!! Also button I have added is not working!! Please see it.
Testing with these two demo data. But not working!! Giving me error!!
You still haven't answered Kevin's question:
I have read that.
Parameter is a string
Similar type of problem of this point. But I am testing with real data. Where no 0...
In the test case you are initializing Datatables with this:
$('.datatable-Finance:not(.ajaxTable)').DataTable({ buttons: dtButtons });And using DOM sourced data. You haven't defined
columns.datawhich means Datatables expects the data to be in array format, ie, an array containing arrays. But you are adding object structured data.Use this in your Datatables init code:
Kevin
After Added this, giving me this error:
Uncaught TypeError: Cannot read property 'style' of undefined
Your JSON record has five items, but you only define four columns. They should match.
Still this error is coming in console.
And also showing the previous error:
But data is coming.
I don't want to show all data on table!!
Console Error!
I fixed your test case. I added the buttons libraries. I added the
domoption to display the buttons. Click 'Select Date to Filter' thenThis Week. The table populates with therows.add(). I also commented out the ajax call since it fails due to the URL.http://live.datatables.net/xuyaheva/2/edit
If this doesn't help then we will need more complete information to offer further help.
Please either post a link to your page, update the test case to replicate the issue or you can try using the Debugger to collect information for the developers to look at.
Also, have you tried JSON.parse() in your
successfunction as I suggested above?Kevin