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

时间:2014-02-02 21:33:22

标签: php mysql ajax datatables jquery-datatables

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

但是,以下代码正在使用[使用文本文件]

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

如何让它发挥作用?

3 个答案:

答案 0 :(得分:1)

在你的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"
       ...
    ],
 ]
*/

答案 1 :(得分:0)

你是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的结果是一个对象

答案 2 :(得分:0)

在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表进行数据显示。这可以帮助您使用数据表的不同功能。