jquery DataTable搜索和排序不工作

我有一个数据表排序和过滤问题基本上所有的JS功能不工作。我已经包含了JS文件。一些细节：我连接到数据库以检索json中的数据。 PHP文件:('district.php'）jquery DataTable搜索和排序不工作

<?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); 
    ?>

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>

现在我可以看到表，但我不能排序或搜索。如果我在搜索框中写了一些东西，表格就是空的。排序也一样。它说：表中没有可用的数据。我认为这是因为我正在检索数据。任何建议？感谢了很多，铁道部

来源

2014-07-04 Mor

我发现的是，你必须使用DataTable的fnAddData功能，在你的HTML表中添加数据的问题。否则，它不会添加您即时获取的数据。我用HTML中的硬编码数据进行了测试，可以正常工作，但每当我尝试通过AJAX从其他源获取数据时，它都会显示“找不到数据”或其他东西。

我在another stack overflow question找到了解决方案。

我为您的解决方案使用了AJAX，但主要的问题是使用fnAddData。

这里是解决方案（从了上面的链接帮助）的正常工作：

<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>

重要提示：我的回答认为你的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);

来源

2014-07-04 23:49:56

非常感谢！它现在正在工作！ :) – Mor

你是最受欢迎的！ :) –

你需要下载的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>

来源

2014-07-04 22:29:37

现在我得到一个错误味精：数据表警告：表ID =例子 - AJAX错误。有关此错误的更多信息，请参阅http://datatable.net/tn/7。 – Mor

，现在我根本看不到数据。 – Mor

你确定district.php正在返回干净的JSON吗？尝试用下面的代码替换district.php中的代码来做一个简单的测试：'$ data = array（）; $ row_data = array（ 'id'=> 8， 'date'=>“2014-01-01”， 'username'=>“john”， 'Q1'=>“asdf”）; array_push（$ data，$ row_data）; echo json_encode（$ data）;' –

这个语句添加到数据表中定义JavaScript的

$('#table_id').DataTable({"sAjaxDataProp":"",});

来源

2015-05-04 07:05:20 user4861236

jquery DataTable搜索和排序不工作

回答

相关问题