【发布时间】：2020-08-02 20:58:12
【问题描述】：
我正在尝试将来自 DataTables.net 的搜索框与我的数据连接起来。我让 mySQL 数据库通过 PHP 连接它，并在支持 AdminLTE 和 DataTables.net 的页面上呈现它。
我使用本教程作为学习资料来完成我的项目：https://codinginfinite.com/getting-started-web-application-php-mysql-tutorials/
现在我已经成功地将我的数据从 SQL 服务器加载到 html 数据表中，但现在我找不到如何将表中的数据连接到搜索框（或排序和分页功能）的解决方案。每次我尝试搜索或排序我的数据时，我都会得到一个空白的数据表。分页无法正常工作，表格总是以完整的行数显示。
有人可以帮忙吗？
- 这是我成功加载表格（在 id="tablica" 中）的 php 页面的代码。这段代码的末尾是 ajax json 脚本，用于从 mySQL 数据库获取数据。
<?php
$content = '<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Popis</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="tablica" class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Naziv</th>
<th>Autori</th>
<th>Referenca</th>
<th>Datum u</th>
<th>Datum a</th>
<th>Pripada</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>';
$header = '<h1> Popis <small>Ovdje se nalazi lista.</small> </h1>';
include('../master.php');
?>
<!-- page script -->
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../api/porodica/read.php",
dataType: 'json',
success: function(data) {
var response="";
for(var user in data){
response += "<tr>"+
"<td>"+data[user].id_p+"</td>"+
"<td>"+data[user].naziv_p+"</td>"+
"<td>"+data[user].autor+"</td>"+
"<td>"+data[user].ref+"</td>"+
"<td>"+data[user].red_id+"</td>"+
"<td>"+data[user].datum_u+"</td>"+
"<td>"+data[user].datum_a+"</td>"+
"<td><a href='update.php?id="+data[user].id_p+"'>Edit</a> | <a href='#' onClick=Remove('"+data[user].id_p+"')>Remove</a></td>"+
"</tr>";
}
$(response).appendTo($("#tablica"));
}
});
});
</script>
- 这是我的 master.php 文件的结尾。我包含了所有必要的 css 和 js 文件，以便 DataTables 工作。
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="../bower_components/datatables.net-bs/js/app.min.js"></script>
<script>
$(function () {
$('#tablica').DataTable({
"pageLength": 10,
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": false,
"autoWidth": false
});
});
</script>
【问题讨论】：
-
目前，DataTables 认为您的表是空的。您需要让 DataTables 代表您处理 JSON。因此，无需构建 HTML 字符串并将它们添加到 DOM，您需要将
ajax调用放在 DataTables 配置代码中，让 DataTables 为您完成所有工作。添加到 DOM 的数据对 DataTables 不直接可见。请参阅各种示例here。一旦 DataTables 可以看到您的数据，它就可以对其进行排序和过滤。 -
如果你在那之后仍然卡住，然后编辑你的问题，以显示你的 JSON 的结构（和一些示例数据）。这将有助于提供更具体的指导。
-
我设法解决了这个问题！感谢您的提示和时间！我没有改变数据插入 (DOM) 的方法，但我宁愿在 DataTables 初始化之前强制 ajax 运行，它仍然像魅力一样工作！
-
很高兴你解决了它。这是一种公平的方法——您当然可以为已经包含数据的 HTML 数据初始化 DataTables。您可能会发现这种方法有局限性 - 取决于您需要对表执行什么操作，以及它的数据如何更新。
标签： php jquery ajax datatables