jquery Datatable插件动态绑定数据库表

        最近用jquery+PHP+Mysql做自己的小网站，需要一个前端展示数据库表数据功能，查了很多jquery插件都不支持数据库表字段的动态绑定，必须在前端JS代码中定义好后台数据库表中的字段，这种方案非常不灵活，一旦数据库表结构发生变化，后台PHP和前端js都要更改代码，扩展性很差。

        于是决定自己写一个动态绑定的程序，前端展示用jquery datatable插件，该插件可以将html table作为数据源。思路是后台PHP读取数据表数据，前端jquery ajax抓取数据后用js自动生成html table，然后datatable插件以此html table为数据源。

      服务器端代码：PHP

     

<?php

 

 

// Connect to database
//$conn = @mysql_connect("localhost", "root", "");
include('connStr.php');
if (!$conn)
  die("Error connecting to MySQL: " . mysql_error());

 

if (!mysql_select_db("test", $conn))
  die("Error selecting Head First database: " . mysql_error());

 

$select = 'SELECT *';
$from   = '  FROM messageBoard';

 

$queryResult = @mysql_query($select . $from);
if (!$queryResult)
  die('Error retrieving updated sales from database.');

 

$output=array();
while ($row = mysql_fetch_array($queryResult,MYSQL_ASSOC)) {
  /* $id = $row['id'];
  $user = $row['user'];
  $mess = $row['message']; */
 
  $number = count($row);
 
  $output[]=$row;
 
 
}

 

mysql_close($conn);

 

echo json_encode( $output );
?>

   注意：mysql_fetch_array($queryResult,MYSQL_ASSOC)中需要MYSQL_ASSOC参数，这样取出的数据不带索引号‘id’，否则数据表中每一行都会有0：1：...这样的索引号，这样在前端通过json数据解析出表的字段名是会造成问题。

   前端js代码：ajax读取数据

function getUserdata() {
  
 var urlStr="getMes.php";
 
 $.ajax({url:urlStr,
        type:'POST',
     data:'',
     //contentType:"text/json;charset=utf-8",
     error:function (request,message,err){
      alert(message);
     },
     //dataType:"json",
     success:successRes
 });   
 
}

  根据读取的数据自动生成html table，

function successRes(data,textStatus) {
 
 var keys=[];
 var jsonObject=eval(data);
 for(var p in jsonObject[0])
{
 
   
    keys.push(p);        //解析出列名，如果MYSQL_ASSOC参数此处解析出的不是列名
   
 
}

 

 

 

//draw datatable根据解析出的列名自动绘制html table。用于Jquery datatable插件要求必须有thead部分，因此，需要根据列名绘制thead
var strTbody = ["<table cellpadding='0' cellspacing='0' border='0' class='display' id='example'><thead><tr>"];

 

var numofcol=keys.length;
for(var j = 0; j < numofcol; j++){
      strTbody.push("<td>");
   strTbody.push(keys[j]);
   strTbody.push("</td>");
     }
strTbody.push("</tr></thead>");
strTbody.push("<tbody>");

 

for(var i = 0; i < jsonObject.length; i++){
    strTbody.push("<tr>");
 
     for(var j = 0; j < numofcol; j++){
       strTbody.push("<td>");
   strTbody.push(jsonObject[i][keys[j]]);
   strTbody.push("</td>");
     }
    strTbody.push("</tr>");
   }

 

strTbody.push("</tbody>");

 

strTbody.push("</table>");

 

var obj = document.getElementById("tableDiv");
   obj.innerHTML = strTbody.join("");

}

 

   最后，将该html table作为datatables的数据源：

$('#example').dataTable();

 

 大功告成。欢迎有更好解决方法的高人互相交流！