最近用jquery+PHP+Mysql做自己的小网站,需要一个前端展示数据库表数据功能,查了很多jquery插件都不支持数据库表字段的动态绑定,必须在前端JS代码中定义好后台数据库表中的字段,这种方案非常不灵活,一旦数据库表结构发生变化,后台PHP和前端js都要更改代码,扩展性很差。
于是决定自己写一个动态绑定的程序,前端展示用jquery datatable插件,该插件可以将html table作为数据源。思路是后台PHP读取数据表数据,前端jquery ajax抓取数据后用js自动生成html table,然后datatable插件以此html table为数据源。
服务器端代码:PHP
//$conn = @mysql_connect("localhost", "root", "");
include('connStr.php');
if (!$conn)
die("Error connecting to MySQL: " . mysql_error());
die("Error selecting Head First database: " . mysql_error());
$from = ' FROM messageBoard';
if (!$queryResult)
die('Error retrieving updated sales from database.');
while ($row = mysql_fetch_array($queryResult,MYSQL_ASSOC)) {
/* $id = $row['id'];
$user = $row['user'];
$mess = $row['message']; */
$number = count($row);
$output[]=$row;
}
?>
注意: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,
var keys=[];
var jsonObject=eval(data);
for(var p in jsonObject[0])
{
keys.push(p); //解析出列名,如果MYSQL_ASSOC参数此处解析出的不是列名
}
var strTbody = ["<table cellpadding='0' cellspacing='0' border='0' class='display' id='example'><thead><tr>"];
for(var j = 0; j < numofcol; j++){
strTbody.push("<td>");
strTbody.push(keys[j]);
strTbody.push("</td>");
}
strTbody.push("</tr></thead>");
strTbody.push("<tbody>");
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>");
}
obj.innerHTML = strTbody.join("");