Load data in datatable from ajax through button click

tjahid

Hi, I want to populate data in a datatable through a button click event. My code looks like :

$("#customerTable").dataTable({
"ajax": {
url: "customer/LoadCustomers",
dataType: "json",
data: { searchText: searchText },
dataSrc: ""
}
});

I want to load the table without any data on (document).ready(function () {}); . With a button click i want to populate the table created above:

$("#customerSearchButton").on("click", function (event) {

//populate the table with data (available in url: "customer/LoadCustomers",)
});

tjahid

Solved !!!

My table looks like this :

Table = $("#customerTable").DataTable({
data:[],
columns: [
{ "data": "CompanyId" },
{ "data": "CompanyName" },
{ "data": "City" },
{ "data": "Country" }
],
rowCallback: function (row, data) {},
filter: false,
info: false,
ordering: false,
processing: true,
retrieve: true
});

Button Click handler:

$("#customerSearchButton").on("click", function (event) {
$.ajax({
url: "",
type: "post",
data: { searchText: searchText }
}).done(function (result) {
Table.clear().draw();
Table.rows.add(result).draw();
}).fail(function (jqXHR, textStatus, errorThrown) {
// needs to implement if it fails
});
}