【问题标题】:Load DataTable data through button Click通过按钮加载 DataTable 数据 Click
【发布时间】:2014-12-30 06:46:05
【问题描述】:

我想通过单击按钮来填充 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();
});

【问题讨论】:

    标签: ajax datatable populate


    【解决方案1】:

    解决了!!!

    我的桌子是这样的:

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

    【讨论】:

    • 表未定义显示在 Ajax 响应下
    • @Cyber​​Abhay 定义在 javascript 代码 var Table 的顶部;
    • 我用户版本 1.10.20 并抛出这个:ExtJS:197 Uncaught TypeError: myDataTable.clear is not a function at Object.success (ExtJS:197) at c (VM15 jquery.min.js: 2) 在 Object.fireWith [as resolveWith] (VM15 jquery.min.js:2) at l (VM15 jquery.min.js:2) at XMLHttpRequest. (VM15 jquery.min.js:2)跨度>
    猜你喜欢
    • 2017-08-04
    • 2019-04-06
    • 2013-05-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-23
    • 1970-01-01
    相关资源
    最近更新 更多