vue - jquery datatables使用



如何加载按钮点击DataTables数据 (1)

我正在使用这个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();
             })
       });

看下面的代码。

添加行 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>





datatables