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搜索和排序不工作

回答

相關問題