Question

我想创建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);
}

}）; }

我找到了一个代码，但是这里的服务器在文档准备就绪时调用了，但我想在按钮的onclick期间调用它。

在负载下调用服务器的代码

// 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
  } );
}
} );
} );

Answer 1

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

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

1 个答案: