I want to populate DataTable through a button click. Initially the dataTable should be empty:
var searchText = $("#textBox").val();
Table = $("#customerTable").dataTable({
data:[],
"columns": [
{"data": "Id" },
{ "data": "Name" },
{ "data": "City" },
{ "data": "Country" }
]
//"serverSide": true
});
and the button click :
$("#SearchButton").on("click", function (event) {
$.ajax({
url: "/LoadCustomers",
type: "post"
});
Table.rows.add(result).draw();
});
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
});
}