Question

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

Answer 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

当您执行添加或删除行的操作时，更改表的排序，过滤或分页特征时，您需要DataTables更新显示以反映这些更改。此功能是为此目的而提供的。

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>

Answer 2

我在这里有个例子

HTML

 ....
      <body>
            <table id="table_id" class="display"></table>

            <button id="customerSearchButton">CLICK AQUI - WACHIN (RECARGAR)</button>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    </body>
    ...

JS

<script>
      $(document).ready(function() {

        let table = $("#table_id").DataTable({
          columns: [{ data: "id" }, { data: "name" }, { data: "email" }],
          rowCallback: function(row, data) {},
          filter: true,
          info: false,
          ordering: false,
          processing: true,
          retrieve: true
        });
        $("#customerSearchButton").on("click", function(event) {
          $.ajax({
            url: "https://jsonplaceholder.typicode.com/comments?postId=1",
            type: "get"
          })
            .done(function(result) {
              console.log(result);
              table.clear().draw();
              table.rows.add(result).draw();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
              // needs to implement if it fails
            });
        });
      });
    </script>

Answer 3

下面的代码解决了我的目的，即在按钮单击而不是页面加载时加载数据。我创建了ID为“ eventlistview”的按钮，并单击此按钮重新初始化了数据表。

// global variable
var grid;
jQuery(document).ready(function ($) {
 //initialise blank datatable on page load
  grid = $('#grd').DataTable({
           "processing": false, // control the processing indicator.
           paging: false,
            searching: false,
            info: false,
          // you can load data here also as per requirement
         });
});

jQuery(document).ready(function ($) {
  jQuery('#eventlistview').click(function () {
     // destroy datatable
     $("#grd").dataTable().fnDestroy()
     //reinitialise datatable
      $("#grd").dataTable({
          "processing": false, // control the processing indicator.
          "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
          "ajax": {"url": "",
                    "type": "GET",
                   },
          "language": {"emptyTable": "No data found."
                      },
           columns: [{ "data": "TitleTxt" },
                      {"data": "StartDate"},
                      {"data": "EndDate"},
                    ],
           "order": [[0, "asc"]]            
                    });          
    });
});

https://stackoverflow.com/a/58976439/5685144

希望它对您也有帮助。

如何在按钮单击时加载DataTables数据

3 个答案: