Jquery 在通过ajax调用打开的引导模式中为DataTable呈现JSON

使用DataTables 1.10.18、Bootstrap 4和jQuery 3.2.1

我的应用程序包含一个包含锚定的页面，例如：

<a data-toggle="modal" href="/foo.json" data-target="#affectedSubstances">Modal 1</a>

<a data-toggle="modal" href="/bar.json" data-target="#affectedSubstances">Modal 2</a>

我为

#affectedmaterials

所做的标记只是一个空模式，即

.modal body

没有内容，我正在将加载的JSON数据写入其中

上面只是将原始JSON字符串写入

.modal body

中

（1）的代码执行来自

.load（）

的ajax请求。此时，我不确定是否最好使用

$.get（）

编写它，然后我可以使用

.done（response）

回调。我之所以这样想，是因为我需要等到ajax响应完成后，才能初始化表。这似乎对问题至关重要。因此，我可以轻松地从（1）中删除我的代码，并发出一个普通的ajax请求，如下所示：

$.get($(this).attr("href")).done(function(response) {
    console.log(response);
});

我现在只是在控制台中获取JSON，而不是模式打开。这是意料之中的

根据（1）和（2），我知道可以为表请求JSON。但是我不知道如何/在哪里初始化DataTable并传入这个JSON？在我的应用程序的其他部分中，我所做的工作相当于：

$('#affectedSubstances .modal-body').DataTable({
      processing: true,
      serverSide: true,
      searching: false,
      ajax: {
          url: '/foo.json'
      }
});

这不起作用，因为

.modal body

中没有

元素。此外，这依赖于传递

url:

属性，在本例中，该属性需要是动态的，因为它是用户单击的链接的

href

我不知道该往哪里走，但我觉得我已经把需要的东西的各个部分放在一起了

最后一个问题是，因为我使用的是

serverSide:true

——并且知道可能返回的行数可能大于我希望在模式中显示的行数——我需要确保对分页的调用，例如：

 /foo.json?page=2
 /foo.json?page=3
 /foo.json?page=4

---

。。。仍然写入我在模式中初始化的数据表。我不知道DataTables是否会自动处理这个问题，因为它知道初始化它的元素。这就是它在应用程序的其余部分中的工作方式（尽管其他表都不在模式中，所以要意识到它在这里是不同的）。

您只能在

因此，我们需要在单击时在模式中添加

（假设您希望动态创建一个表），如果您在每个模式中添加静态表，事情会变得更简单

从ajax调用获取数据

加载数据表

这里是一些想法的工作小提琴

$（'body'）。在（'click'，'data toggle=“modal”]'上，函数（）{
var url=$（this.attr（“url”）；
var tableid=$（this.attr（“数据目标”）.replace（“#”），”；
var tableBody='名字姓氏职业电子邮件地址'；
$（“#”+tableid）.find（“.modal body”）.empty（）；
$（“#”+tableid.find（“.modal body”）.append（tableBody）；
populateDataTable（数据，tableid+“_table”）；
}); 
函数populateDataTable（数据，tableId）{
$（'.+tableId）.DataTable（）.clear（）；
var length=Object.keys（data.customers）.length；
对于（变量i=1；i

带分页的参与

Datatable将向ajax调用添加一些参数，以便您可以从后端相应地处理服务器端分页

在分页情况下，最后两个步骤将成为一个步骤

通过示例代码和实时演示可能有助于了解更多详细信息

 /foo.json?page=2
 /foo.json?page=3
 /foo.json?page=4

$('body').on('click', '[data-toggle="modal"]', function(){

    var url = $(this).attr("url");
        var tableid = $(this).attr("data-target").replace("#", "");
    var tableBody = '<table class="'+tableid+'_table"  class="display" cellspacing="0" width="100%"> <thead> <tr>  <th>First Name</th>  <th>Last Name</th>          <th>Occupation</th>          <th>Email Address</th>        </tr>      </thead>    </table>';

    $("#"+tableid).find(".modal-body").empty();
        $("#"+tableid).find(".modal-body").append(tableBody);

        populateDataTable(data, tableid+"_table");

}); 


 function populateDataTable(data, tableId) {
    $('.'+tableId).DataTable().clear();
    var length = Object.keys(data.customers).length;
    for(var i = 1; i < length+1; i++) {
      var customer = data.customers['customer'+i];
       $('.'+tableId).dataTable().fnAddData( [
        customer.first_name,
        customer.last_name,
        customer.occupation,
        customer.email_address
      ]);
    }
  }

});