Call datatable on button click

[bigup401]

I want to click button and then call the data table to be displayed but its not working
when i check browser network and console everything is ok no error reported. and the call is executed without any error reported. but the data is not being displayed

$(document).ready(function () {
    $("#button").click(function () {
            $.ajax({
                url: "file_url",
                type: "GET"
            }).done(function (result) {
                table.clear().draw();
                table.rows.add(result).draw();
            })
        
    });
	});

var table = $("#tableD").DataTable({
        "deferRender": true,
		"responsive": true,
		"pagingType": "simple",
		"stripeClasses": [],
		"lengthMenu": [
			[20, 25, 50, -1],
			[20, 25, 50, "All"]
		],
		"bLengthChange": false,
		sDom: "ltipr",
		oLanguage: {
			sEmptyTable: '<span>empty</span>',
		},
		responsive: {
			details: {
				display: $.fn.DataTable.Responsive.display.modal({}),
				renderer: $.fn.DataTable.Responsive.renderer.tableAll({
					tableClass: "table",
				}),
			},
		},
		"processing": true,
		rowCallback: function(row, data) {

		},

	});


<button type="button" id="button">Click me</button>
<table id="tableD" class="table-striped table-bordered table-responsive" data-info="false" data-ordering="false">
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
</table>

[rpg_digital]

I’m not familiar with DataTable, can I ask is this config e.g.

DataTable({
  deferRender: true,
  responsive: true,
  pagingType: "simple",
  stripeClasses: [],
  ...etc

something you carefully constructed or is it copied and pasted from elsewhere?

I see for instance that sDom: "ltipr" is a legacy setting.

It seems a quite a complex setup, compared to some of the examples in their documentation.

With regards the responsive config, details, display etc I did find this page.
https://datatables.net/extensions/responsive/examples/display-types/modal.html

It lists the JS and CSS files needed for that to work.
JS

https://cdn.datatables.net/2.0.7/js/dataTables.js
https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js
https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js

CSS

https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.css
https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css

Do you have some sample data to test this out e.g. from file_url or are you able to put a codepen together? Without experience of DataTables and some source data it is hard to figure what is what.

[lunchtimeres]

Here are a few things you can check:

1. Ensure that the “result” data returned from your AJAX call is in the correct format for DataTables. DataTables expects an array of arrays or an array of objects for its data source.
2. Check if the DataTable initialization is happening correctly. Make sure there are no errors in the console related to DataTable initialization.
3. Verify that the table element “#tableD” is correctly targeted and accessible in your HTML.
4. Double-check that your AJAX call is successfully retrieving data from the specified “file_url”. You can console log the “result” inside the .done() function to see if it’s returning the expected data.
5. Ensure that the DataTable is properly redrawn after adding data. You’re already calling draw() after adding rows, which should update the table.

[bigup401]

I got my problem fixed by following this

$(document).ready(function () {
$("#load-dt").click(function () {
    if ($(".table-responsive").hasClass("hidden")) {
      $(".table-responsive").removeClass("hidden");
      $.ajax({
        url: "https://api.srv3r.com/table/",
        type: "GET"
      }).done(function (result) {
        animal_table.clear().draw();
        animal_table.rows.add(result).draw();
      });
    }
  });
});

let animal_table = $("#animals-table").DataTable({
  pageLength: 20,
  lengthMenu: [20, 30, 50, 75, 100],
  order: [],
  paging: true,
  searching: true,
  info: true,
  data: [],
  columns: [
    { data: "id" },
    { data: "guid" },
    { data: "name" },
    { data: "status" }
  ]
});

.hidden {
  display: none;
}

<div class="container">
  <div class="card">
    <div class="card-body">
      <div class="text-center">
        <button type="button" class="btn mb-1 btn-primary" id="load-dt">Click to load DataTable</button>
      </div>
      <div class="table-responsive hidden">
        <table id="animals-table" class="table table-striped table-bordered" style="width: 100%">
          <thead>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

the problem is that, the json message is structured differently to the one i want to use. which cause it not to display

it works with

data: [],
  columns: [
    { data: "id" },
    { data: "guid" },
    { data: "name" },
    { data: "status" }
  ]

json file

{
	"0": {
		"id": 1,
		"guid": "66c7f39e-f357-4aaa-a193-0e33da800dd5",
		"name": "Paddy heron (unidentified)",
		"status": 1
	}
}

now my file is json array

{
	"data": [
		[
			"413000",
			"Inilan",
			"tawfuamewh",
			"Jvnts",
			"27",
			0
		]
	]
}

and i dont want to define any columns
so i done this

data: []

but not working