Question

我有数据表排序和过滤器的问题，基本上所有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); 
  ?>

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>

现在我可以看到表格，但我无法排序或搜索。如果我在搜索框中写了一些东西，表格是空的。排序也是如此。它说：表中没有数据。我以为它正在发生，因为我正在检索数据。有什么建议吗？非常感谢，Mor

Answer 1

我发现的问题是，您必须使用DataTable的fnAddData函数在HTML表格中添加数据。否则，它不会添加即时获取的数据。我使用HTML中的硬编码数据进行了测试，但是每当我尝试通过AJAX从其他来源获取数据时，它都会显示＆＃34;没有找到数据＆＃34;什么的。

我在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);

Answer 2

你需要在加载datatables 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>

Answer 3

将此语句添加到javascript上的数据表定义

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

jquery DataTable搜索和排序不起作用

3 个答案: