javascript jquery DataTable 搜索和排序不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24581217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery DataTable search and sort is not working
提问by Mor
I have an issues with datatable sorting and filter basically all the JS function not working. I've already include the JS files. some details: I'm connecting to the database to retrieve data in json. The php file:('district.php')
我有数据表排序和过滤的问题，基本上所有 JS 功能都不起作用。我已经包含了 JS 文件。一些细节：我正在连接到数据库以检索 json 中的数据。php文件:('district.php')
<?php
include_once('db.php');
$db = mysql_select_db('mor_app',$con);
if(!$db){ die('Database selection failed '.mysql_error()); }
$sql = 'SELECT *FROM users';
$result = mysql_query($sql,$con);
$data = array();
while($row = mysql_fetch_array($result)){
$row_data = array(
'id' => $row['id'],
'date' => $row['date'],
'username' => $row['username'],
'Q1' => $row['Q1'] );
array_push($data, $row_data); }
echo json_encode($data);
?>
the html file:
html文件：
<!DOCTYPE html>
<html>
<head>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<table id="table_id" class="display">
<caption>Try</caption>
<thead> <tr>
<th>ID</th>
<th>Date</th>
<th>user name</th>
<th>Q1</th> </tr>
</thead>
<tbody id="tablebody">
</tbody>
</table>
<script>
$(function() {
var url = 'district.php';
$.getJSON(url, function(data) {
$.each(data, function(index, data) {
$('#tablebody').append('<tr>');
$('#tablebody').append('<td>'+data.id+'</td>');
$('#tablebody').append('<td>'+data.date+'</td>');
$('#tablebody').append('<td>'+data.username+'</td>');
$('#tablebody').append('<td>'+data.Q1+'</td>');
$('#tablebody').append('</tr>');
});
});
});
$('#table_id').DataTable();
</script>
</body>
</html>
now I can see the table but I just can't sorting or searching. if I write something in the search box the table is empty. the same happen with sorting. it say: No data available in table. I thought it's happening because I'm retrieving data. any suggestion? Thank a lot, Mor
现在我可以看到表格，但我无法排序或搜索。如果我在搜索框中写一些东西，表格就是空的。排序也是如此。它说：表中没有可用数据。我认为这是因为我正在检索数据。有什么建议吗？非常感谢，莫
采纳答案by late_riser
The problem I found is, you have to use DataTable's fnAddDatafunction to add data in your HTML table. Otherwise, it is not adding your data which is being fetched on the fly. I tested with hard coded data in HTML which works fine, but whenever I tried to get data from other source through AJAX, it shows "no data found" or something.
我发现的问题是，您必须使用 DataTable 的fnAddData函数在 HTML 表中添加数据。否则，它不会添加正在运行的数据。我用 HTML 中的硬编码数据进行了测试，效果很好，但是每当我尝试通过 AJAX 从其他来源获取数据时，它都会显示“未找到数据”或其他内容。
I found the solution in another stack overflow question.
我在另一个堆栈溢出问题中找到了解决方案。
I used AJAX for your solution, but the main catch is to use fnAddData.
我将 AJAX 用于您的解决方案，但主要问题是使用fnAddData.
Here is the solution (took help from above link) which works fine:
这是解决方案（从上面的链接中获得帮助），它工作正常：
<script>
$('#table_id').DataTable();
$(document).ready(function() {
$.ajax({
type: "POST",
url: "district.php",
data: {data : ""},
cache: false,
success: function(result){
data = JSON.parse(result);
$.each(data, function(index, data) {
//!!!--Here is the main catch------>fnAddData
$('#table_id').dataTable().fnAddData( [
data.id,
data.date,
data.username,
data.Q1 ]
);
});
}
});
});
</script>
IMPORTANT: My answer considers that your PHP code is correctly returning data. I made some dummy array as suggested in the comments. My php file returns like this:
重要提示：我的回答认为您的 PHP 代码正确返回了数据。我按照评论中的建议制作了一些虚拟数组。我的 php 文件返回如下：
$data = array();
$row_data = array( 'id' => 1, 'date' => "2014-01-01", 'username' => "mou", 'Q1' => "muhahaha" );
array_push($data, $row_data);
$row_data = array( 'id' => 9, 'date' => "2013-02-02", 'username' => "sadi", 'Q1' => "hii" );
array_push($data, $row_data);
echo json_encode($data);
回答by user4861236
add this statement to datatable definition on javascript
将此语句添加到 javascript 上的数据表定义
$('#table_id').DataTable({"sAjaxDataProp":"",});
回答by John Shipp
You need to load jQuery BEFORE you load the datatables jQuery plugin:
您需要在加载数据表 jQuery 插件之前加载 jQuery：
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
