How to load data from ajax on button press?

niner

I'm trying to load search results into DataTables control. So after the user inputs some parameter and pressing the 'Search' button, then I would like to see the data loaded in the DataTables control. How do I initiate DataTables to load data through ajax only upon a user triggered event? All the examples I have seen all load data immediately. Thanks.

tjahid

Hi,
Want to achieve the same but couldn't find a working example in dataTables 1.10.

What I am trying to achieve is to create an empty dataTable on (document).ready(function ()). And when I click a button, DataTable gets loaded with the required data.

Anyone ?

tjahid

Hi,

This is how I solved it :

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
});
}