Load data in datatable from ajax through button click
Load data in datatable from ajax through button click
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",)
});
Answers
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
});
}