通過按鈕加載DataTable數據點擊

Question

我想通過點擊按鈕填充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(); 
}); 

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

Answer 2

$(document).ready(function() { 
 
      Table = $("#datatable").DataTable({ 
 
      data:[], 
 
      columns: [ 
 
       { data: "IAVDate" }, 
 
       { data: "ShiftID" }, 
 
       { data: "UserID" }, 
 
       { data: "IAV" }, 
 
       { data: "Type" }, 
 
       { data: "IAV Value"} 
 
      ], 
 
      rowCallback: function (row, data) {}, 
 
       filter: false, 
 
       info: false, 
 
       ordering: false, 
 
       processing: true, 
 
       retrieve: true 
 
      }); 
 

 
      
 
     start = jQuery("#start").val(); 
 
     end = jQuery("#end").val(); 
 
      $("#generate").on("click", function (event) { 
 
      alert('result'); 
 
        $.ajax({ 
 
         url: "<?php echo base_url(); ?>Report/IAV_sale", 
 
         type: "post", 
 
        "data": {"start":start,"end":end}, 
 
        }).done(function (result) { 
 

 
         Table.clear().draw(); 
 
         Table.rows.add(result).draw(); 
 
         }).fail(function (jqXHR, textStatus, errorThrown) { 
 
          // needs to implement if it fails 
 
        }); 
 
        });  
 
});

哎，我沒有得到通過上述更新我的數據表代碼，

我的回覆{「data」：[{「IAVDate」：「2017-03-17 07:08:32」，「ShiftID」：「30」，「UserID」：「111」，「IAV」：「45248022418 「，」Type「：」cash「，」IAV Value「：」1400「}，{」IAVDate「：」2017-03-17 07:09:49「，」ShiftID「：」30「，」UserID「： 「111」，「IAV」：「63094881690」，「類型」：「現金」，「IAV值」：「20」}，{「IAVDate」：「2017-03-17 07:12:14」，「ShiftID 「：」30「，」用戶ID「：」111「，」IAV「：」55841613411「，」類型「：」卡「，」IAV值「：」0「}，{」IAVDate「 17 07:12:16「，」ShiftID「：」30「，」用戶ID「：」111「，」IAV「：」27197239869「，」類型「：」現金「，」IAV值「：」0「 {「IAVDate」：「2017-03-17 07:19:43」，「ShiftID」：「30」，「用戶ID」：「111」，「IAV」：「82469287727」，「類型」：「現金」， 「IAV Value」：「10」}，{「IAVDate」：「2017-03-17 07:20:33」，「ShiftID」：「30」，「UserID」：「111」，「IAV」：「22158170425 「，」Type「：」cash「，」IAV Value「：」200「}，{」IAVDate「：」2017-03-17 07:20:44「，」ShiftID「：」30「，」UserID「： 「111」，「IAV」：「91852461457」，「類型」：「現金」，「IAV值」：「50」}，{「IAVDate」：「2017-03-17 07:20:50」，「ShiftID 「：」30「，」UserID「：」111「，」IAV「：」3906686807「，」類型「：」現金「，」IAV值「：」20「}，{」IAVDate「 ：「2017-03-17 07:20:52」，「ShiftID」：「30」，「用戶ID」：「111」，「IAV」：「28281616952」，「類型」：「現金」，「IAV值」 ：「200」}，{「IAVDate」：「2017-03-17 07:22:18」，「ShiftID」：「30」，「用戶ID」：「111」，「IAV」：「20432041716」，「 「：」cash「，」IAV Value「：」100「}，{」IAVDate「：」2017-03-17 07:22:21「，」ShiftID「：」30「，」UserID「：」111「 「IAV」：「43137123170」，「類型」：「現金」，「IAV值」：「50」}，{「IAVDate」：「2017-03-17 07:22:26」，「ShiftID」：「30 「，」UserID「：」111「，」IAV「：」99290115936「，」類型「：」現金「，」IAV值「：」5「}，{」IAVDate「：」2017-03-17 07:23 ：14「，」ShiftID「：」30「，」UserID「：」111「，」IAV「：」69687310655「，」類型「：」卡「，」IAV值「：」700「}，{」IAVDate「 「2017-03-17 07:24:21」，「ShiftID」：「30」，「用戶ID」：「111」，「IAV」：「5706858910」，「類型」：「卡片」，「IAV值」 ：「700」}，{「IAVDate」：「2017-03-17 07:25:44」，「ShiftID」：「30」，「UserID」：「111」，「IAV」：「25842193589」 「：」現金「，」IAV值「：」47「}]}