How to render data after Button Ajax Call?

ilazycoder

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",
}
]

kthorngren

Instead of using

                columns: [
                    { 'data': 'id' },
                    { 'data': 'invoiceNumber' },
                    { 'data': 'customerId' },
                    { 'data': 'actions' }
                ]

in your success function use row.add() with draw(). For example:
$('#myTable').DataTable().row.add( data ).draw( false );.

Kevin

ilazycoder

! > DataTables warning: table id=FinanceTable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

This error is showing!!!

kthorngren

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

ilazycoder

Thank you for your answer.

I gave my Data Sample on my post. Will I need to use $.each()?

kthorngren

You have an array of data. Use rows.add(). This will add one or more rows that are in an array.

Kevin

ilazycoder

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!!

DataTables warning: table id=FinanceTable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

tangerine

You still haven't answered Kevin's question:

Did you follow the troubleshooting steps in the link in the error?
http://datatables.net/tn/4

ilazycoder

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...

$.ajax({
    url: "{{ route('finance-this-week') }}",
    method: 'GET',
    success: function(data) {
    $('#FinanceTable').DataTable().rows.add( [{
         "id":       "1",
          "invoiceNumber":   "34343434343434",
     }, {
          "id": "2",
           "invoiceNumber": "34343434"
     }] ).draw();
 }});

kthorngren

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.data which 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:

columns: [
    { 'data': 'id' },
    { 'data': 'invoiceNumber' },
    { 'data': 'customerId' },
    { 'data': 'actions' }
]

Kevin

ilazycoder

After Added this, giving me this error:

Uncaught TypeError: Cannot read property 'style' of undefined

$('.datatable-Finance:not(.ajaxTable)').DataTable({ 
            buttons: dtButtons,
            columns: [
                { 'data': 'id' },
                { 'data': 'invoiceNumber' },
                { 'data': 'customerId' },
                { 'data': 'actions' }
});

tangerine

Your JSON record has five items, but you only define four columns. They should match.

ilazycoder

Still this error is coming in console.

Uncaught TypeError: Cannot read property 'style' of undefined

And also showing the previous error:

DataTables warning: table id=FinanceTable - Requested unknown parameter '0' for row 0, column 0

But data is coming.
I don't want to show all data on table!!

Console Error!

kthorngren

I fixed your test case. I added the buttons libraries. I added the dom option to display the buttons. Click 'Select Date to Filter' then This Week. The table populates with the rows.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 success function as I suggested above?

Kevin