bootstrap - jquery datatable columns checkbox



如何加載按鈕點擊DataTables數據 (1)

看下面的代碼。

添加行 API

向表中添加新數據是能夠動態控制DataTable內容的核心,並且這種方法提供了完成這一功能的能力。 它會一次添加一行 - 添加多行,要么多次調用此方法,要么使用此方法的複數對象

var table = $('#example').DataTable();

table.row.add( {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    } ).draw();

清除 API

在執行添加或刪除行等操作時,如果要更改表的排序,過濾或分頁特性,則需要DataTable更新顯示以反映這些更改。 這個功能是為此目的而提供的。

var table = $('#example').DataTable();

table
    .clear()
    .draw();

請參閱文檔DRAW

$(document).ready(function() {
  var table = $('#example').DataTable();

  $("#add").on('click', function() {
    table.row.add([
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "54",
      "2011/04/25",
      "$3,120",
    ]).draw();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<input type="button" name="add" id="add" value="addrow" />

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>

  </tbody>
</table>

我正在使用這個dataTable代碼來加載表數據。

var table = $('#fileInfoTable').DataTable({
   "sAjaxSource": "api/file/loadAll",
   "sAjaxDataProp": "",
   "order": [[0, "asc"]],
   "aoColumns": [{
      "mData": "fileId"
   }, {
      "mData": "fileName"
   }, {
      "mData": "sentDate"
   }, {
      "mData": "direction"
   }, {
      "mData": "interfaceType"
   }, {
      "mData": "buisnessLine"
   }, {
      "mData": "vaultName"
   }, {
      "mData": "manageCompony"
   }, {
      "mData": "lastActivity"
   }, {
      "mData": "lastActivityStatus"
   }, {
      "mData": "feedbackName"
   }, {
      "mData": "feedbackDate"
   }, {
      "mData": "processDate"
   }, {
      "mData": "eventsAmount"
   }, {
      "mData": "goodEventsAmount"
   }, {
      "mData": "sourceId"
   }]
});

它工作正常,如果我加載頁面加載,但我需要能夠加載數據通過單擊按鈕,而不是頁面加載。 我該怎麼做 ?

編輯:現在我使用下面的代碼,我可以看到警報,但表是未定義的編輯:現在我使用下面的代碼,我可以看到警報,但表未定義

編輯:現在我使用下面的代碼,我可以看到警報,但表是未定義的

$(document).ready(function() {
             var table = $('#fileInfoTable').DataTable({
                    data : [],
                    "order" : [ [ 0, "asc" ] ],
                    "aoColumns" : [ {
                           "mData" : "fileId"
                    }, {
                           "mData" : "fileName"
                    }, {
                           "mData" : "sentDate"
                    }, {
                           "mData" : "direction"
                    }, {
                           "mData" : "interfaceType"
                    }, {
                           "mData" : "buisnessLine"
                    }, {
                           "mData" : "vaultName"
                    }, {
                           "mData" : "manageCompony"
                    }, {
                           "mData" : "lastActivity"
                    }, {
                           "mData" : "lastActivityStatus"
                    }, {
                           "mData" : "feedbackName"
                    }, {
                           "mData" : "feedbackDate"
                    }, {
                           "mData" : "processDate"
                    }, {
                           "mData" : "eventsAmount"
                    }, {
                           "mData" : "goodEventsAmount"
                    }, {
                          "mData" : "sourceId"
                    } ]
             })

             $("#loadData").on('click', function() {
                    alert("ppp:" + table.name);
                    table.ajax.url("api/file/loadAll").load();
             })
       });




datatables