通过按钮单击加载DataTable数据

时间:2014-11-03 15:15:53

标签: ajax datatable populate

我想通过点击按钮填充DataTable。最初,dataTable应为空:

var searchText = $("#textBox").val();

    Table = $("#customerTable").dataTable({
        data:[],
        "columns": [
                    {"data": "Id"   },
                    { "data": "Name" },
                    { "data": "City" },
                    { "data": "Country" }
        ]        
        //"serverSide": true
    });

并点击按钮:

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

$.ajax({
            url: "/LoadCustomers",
            type: "post"
        });
Table.rows.add(result).draw();
});

1 个答案:

答案 0 :(得分:7)

解决了!!!

我的表格如下:

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

按钮单击处理程序:

$("#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
            });
}