如何使用从 mysql 检索到的数据填充 Jquery 数据表？

Question

我正在尝试使用数据库中的数据填充某些按钮单击时的数据表。

但是下面的代码工作[使用文本文件]

-----Javascript:-----

$('#tblData').dataTable( {
    "bProcessing": true,
    "sAjaxSource": 'data.txt'
} );

-----data.txt-----

{
"aaData": [
 [
   "row 1 col 1 data",
   "row 1 col 2 data",
   "row 1 col 3 data",
   "row 1 col 4 data"
 ],
 [
   "row 2 col 1 data",
   "row 2 col 2 data",
   "row 2 col 3 data",
   "row 2 col 4 data"
 ],
 [
   "row 3 col 1 data",
   "row 3 col 2 data",
   "row 3 col 3 data",
   "row 3 col 4 data"
 ]
 ]
}

如何从 php 传递这些数据??
以下代码不工作 [使用 php/mysql]

-----Javascript-----

$('#tblData').dataTable( {
    "bProcessing": true,
    "sAjaxSource": 'response.php'
} );  


------response.php------

include_once("config.php");
$dataArr = array();
$query = "SELECT data1,data2,data3,data4 from tbl_data";
$result = $conn->query($query);
$result->data_seek(0);
while($row = $result->fetch_array(MYSQLI_ASSOC)){
$ dataArr [] = $row;   // ?? What to do here?
}
echo json_encode($dataArr);  

如何让它工作？

Answer 1

您对数据进行 JSON 编码的方式是问题所在。只需执行 console.log() 即可帮助您开始工作。不过你也可以试试这个，

 PHP Side
 $result = mysql_query("SELECT data1,data2,data3,data4 from tbl_data");          //query
 $array = $conn->query($result);                          //fetch result    
 echo json_encode($array);

 HTML side,
 $(function () 
{

$.ajax({                                      
  url: 'response.php',                        
  data: "",                        

  dataType: 'json',                     
  success: function(data)          
  {
    var id = data[0];  //first attribute            
    var vname = data[1];           //second attribute
    $('#tblData').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html
  } 
});

});

它从文本文件工作的原因是因为它的纯文本..但是数据库查询 frim PHP 的结果是一个对象

Answer 2

在您的 response.php 中，围绕 while 循环部分，这应该可以工作 -

$dataArr['aaData'] = Array();
while($row = $res->fetch_assoc()){
    $r = Array();
    foreach($row as $key=>$value){
        $r[] = "$key $value";
    }
    $dataArr['aaData'][] = $r;
} 
header('Content-Type: application/json');
echo json_encode($dataArr);

/*
The output will be of the form, 
{
"aaData": [
 [
    [
       "colname data"
       ...
    ],
 ]
*/

Answer 3

在 jquery 数据表中显示来自服务器端的动态数据可以这样做

在客户端

oTable = $('#tblData').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "response",
                "fnServerParams": function ( aoData ) {
                        aoData.push( { "name": "more_data", "value": "my_value" } );
                }
        });   

在发球端你需要做的事情

$output = array(
          "sEcho"=>intval($_GET['sEcho']),
          "iTotalRecords"=>$iTotal, // total number of records 
          "iTotalDisplayRecords"=>$iFilteredTotal, // if filtered data used then tot after filter
          "aaData"=>array()
        );     

while($row = $result->fetch_array(MYSQLI_ASSOC)){
  $output["aaData"][] = $row ;
}

echo json_encode( $output );

我正在构建一个开源CRM www.sqcrm.com，您可以查看代码，对于数据显示我使用了Jquery Data table。这可以帮助您使用数据表的不同功能。