使用搜索和排序功能在 php 呈现的表上启用 jQuery 数据表答案

【问题标题】：Enable jQuery datatable on php rendered table with search and sort functions使用搜索和排序功能在 php 呈现的表上启用 jQuery 数据表
【发布时间】：2018-03-22 02:06:57
【问题描述】：

我的 html 上有一个选项卡面板，用于渲染表格。

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

<div role="tabpanel" class="tab-pane" id="manualProcess">
<div class="container" id="annotationTable" class="display nowrap" cellspacing="0" width="100%">
</div>
</div>

我正在通过 mysql 的 php 脚本渲染表格。单击选项卡面板会触发函数 getManual()。

function getManual() {
  var folder = $('#workingDir').val();
  $.post('manualAnnotation.php', {'folder': folder}, function(data) {
    $('#annotationTable').html(data).show();
  })
}

而我的呈现表格的php如下：

$result = mysqli_query($connect,$sql)or die(mysqli_error());

echo "<div class='col-md-5'><table class='dataTable' cellspacing='0' id='manTab'>";
echo "<thead><tr><th>Select</th><th>Image</th><th>Location</th><th>Brand</th><th>Run</th></tr></thead>";

while($row = mysqli_fetch_array($result)) {
    $ID = $row['ID'];
    $Image = $row['Image'];
    $Location = $row['Location'];
    $Brand = $row['Brand'];
    echo "<tbody><form><tr>
    <td><div class='radio' style='padding:0px;margin:0px'><label><input type='radio' value='$ID' id='manualTab' name='manualTab'></label></div></td>
    <td>".$Image."</td>
    <td>".$Location."</td>
    <td>".$Brand."</td>
    <td><a href='#' onclick='runManual()'>RUN</a></td>
    </tr></tbody></form>";
} 

echo "</table></div>";
mysqli_close($connect);

我正在尝试在表 id“manTab”上启用 jQuery dataTable。在我的索引页面上，我添加了以下代码：

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

虽然这会呈现表格，但未启用数据表的功能，例如搜索、排序或分页。

【问题讨论】：

@plonknimbuzz 我试过了，但是得到一个错误，表明 annotationTable 是一个 div 而不是一个表。
是的。我以前没有读过你的 php。我想我知道问题所在。但我尝试先构建小提琴以确保我是正确的

标签： php jquery datatable

【解决方案1】：

您尝试转换尚未完成渲染（来自请求）的表。

function getManual() {
  var folder = $('#workingDir').val();
  $.post('manualAnnotation.php', {'folder': folder}, function(data) {
    $('#annotationTable').html(data).show();
   $('#manTab').DataTable(); //place here
  });
}

如果您的表格中的行数很少，上述方法将起作用。但如果你有一千个或更多。您需要使用回调/承诺等到您的表格完成呈现。

function getManual() {
  var folder = $('#workingDir').val();
  $.post('manualAnnotation.php', {'folder': folder}, function(data) {
    $('#annotationTable').html(data).show();
  }).done(function(){
    $('#manTab').DataTable(); //place here
  });
}

【讨论】：

谢谢一百万......我确实有 100 行......并且 .done 函数（）对我来说是一个新的学习......再次感谢你。
启用 css 时，排序或搜索不起作用....我必须在 mantab 数据表函数中添加列定义吗？

【解决方案2】：

您可以像这样根据配置定位单个组件。

$(document).ready(function() {

    $('#example').DataTable( {

        "dom": '<"top"i>rt<"bottom"flp><"clear">'

    } );

} );

查看official Documentation了解更多详情

l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element

【讨论】：

这是我第一次使用数据表...你能解释一下吗？我只想在表格中添加搜索和排序功能。