如何在按钮单击时动态创建数据表答案

【问题标题】：How create datatables dynamically on button click如何在按钮单击时动态创建数据表
【发布时间】：2014-07-22 15:52:11
【问题描述】：

我想创建 jquery Datatables onclick of button 一个函数将被调用，函数 ajax 将从数据库中获取数据。我通过 url 参数在点击时将某些数据传递给服务器。

下面是我点击按钮时的 ajax 调用。

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

}

function loadData() {

var strUrl = "batch.jsp?patientname=" + patientname
+ "&dobstart=" + dobstart + "&dobend=" + dobend
+ "&startage=" + startage + "&endage=" + endage
+ "&location=" + location + "&account="
+ account;


$.ajax({
url : strUrl,
type : "POST",
dataType: 'json',
success : function(data) {
    formdata += "<table id='patientdata' class='display' cellspacing='0' width='100%'>"
                                        +"<thead>"
                    +"<tr>"
                    +"<th>ID</th>"
                    +"<th>Name</th>"
                    +"<th>Date of Birth</th>"
                    +"<th>Location</th>"
                    +"<th>Email Address</th>"
                    +"</tr>"
                    +"</thead>"
                    +"<tbody>";

$.each(data.patientdata, function(index, item) {
    formdata += "<tr>"
            +"<td>"+item.uid+"</td>"
            +"<td>"+item.name+"</td>"
            +"<td>"+item.dob+"</td>"
            +"<td>"+item.location+"</td>"
            +"<td>"+item.email+"</td>"
            +"</tr>";

  });                   

formdata += "</tbody></table>";
$("#ptdata").html(formdata); // div in html
$('#exampledata').dataTable(); 

},
error : function(thrownError) {
    alert("Error in ajax post call "+thrownError);
}

}); }

我找到了一个代码，但是这里的服务器在加载文档时被调用，但我想在点击按钮时调用它。

下面的代码在加载时调用服务器

// POST data to server
$(document).ready( function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "xhr.php",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
  oSettings.jqXHR = $.ajax( {
    "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": aoData,
    "success": fnCallback
  } );
}
} );
} );

【问题讨论】：

创建表后初始化dataTable。我怀疑如果你的表没有被创建，那是因为当你初始化表时它找不到它
@Rafa，你的意思是说我应该在 $("</tbody></table>").appendTo("#ptdata"); 这一行之后的 loadData 函数中写这个 $('#example').DataTable(); 代码。
是的，我认为应该这样做。当文档准备好时，它将运行$('#example').DataTable();，但由于这是一个动态表，它还没有被创建，因此没有什么可以初始化的。
@Rafa 我对代码进行了一些更改，创建了一个 var formdata 并在创建表后在我的 onclick 按钮函数中附加了值并初始化了$('#example').DataTable()，正如您所说，它对我有用。但是我需要做的事情很少，比如分页，我会这样做。谢谢
很高兴我能帮上忙，我会发布一个汇总的答案，您可以选择作为这个问题的答案。 dataTables 插件的优点是分页变得容易，只需查看此处的选项部分datatables.net/reference/option 并在初始化表时定义它们。

标签： jquery datatables

【解决方案1】：

由于您是动态创建表，因此您需要在创建表后对其进行初始化。可以在此处查看此行为的一些粗略示例，其中表在此处 http://jsfiddle.net/SAXRd/1/ 中看到的 $(document).ready 中初始化，而在此处 http://jsfiddle.net/SAXRd/2/ 中看到您的 onclick 函数。还要记住为表提供唯一的 ID 或为它们提供一个公共类，以便它们都可以正确初始化。

【讨论】：