datatable中如何处理ajax返回后台数据的问题
这段时间刚开始学JS做网页,是个小白,遇到了很多问题,感谢这些问题很多都可以从CSDN上找到答案,我是边学边做,既痛苦也有成就感,乐在其中吧。
说说最近遇到datatable的一些问题,一开始我只会用PHP来嵌套写datatable的,这样写的好处是简单易理解,坏处也很明显,就是无法使用datatable的刷新功能,但我对ajax的处理又不会。这里记录下来给像我一样的小白一个参考。
第一种情况:datatable加载时加载数据
<?php
//$result='{"succeed":"1","data":[["1","\u5b89\u5168\u5e26","#1","\u4f38\u5c55\u957f\u5ea6\uff085m\uff09","\u4e2a\u4eba\u9632\u62a4\u7528\u54c1","\u6cb3\u5317\u4f73\u5174\u7535\u529b\u8bbe\u5907\u6709\u9650\u516c\u53f8","2017-08-01 00:00:00",null,"1.0","\u7f8a\u89d2\u4f9b\u7535\u6240","2019-04-21 00:00:00","\u4e00\u5e74","2020-04-20 00:00:00","YJ040301"]]}';
$sql="select * from 工器具 where 借用人='$bcode'";
$re=mysql_query($sql);
$result=array();
$result["succeed"] = "1";
$i=0;
while($arr = mysql_fetch_row($re)){
foreach ($arr as $key => $value) {
//把键/值取出放到result数组的data下
$result["data"][$i][$key] = $value;
};
$i+=1;
};
//echo "<pre>";
echo json_encode($result) ;
?>
从PHP返回的数据中,要含有“data”对象,因此,在用PHP回传数据的时候,要注意这一点。(小白要注意,我的data数据没有使用键对,例如:“id”:“1”,只使用了键值“1”。)
前端js:
$('.table-sort').dataTable({
"lengthMenu":false,//显示数量选择
"bFilter": false,//过滤功能
"bPaginate": false,//翻页信息
"bInfo": false,//数量信息
"aaSorting": [[ 1, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
{"orderable":false,"aTargets":[0,8,9]}// 制定列不参与排序
],
ajax:{
url: 'appapi.php',
data:{"act":"initajax","bcode":user},
dataSrc:function(result) {
return result['data']; //注意这里,处理后端返回的数据
},
//success: function(rs){ },
error:function() {
console.log(data.msg);
},
},
columns:[ //控制列显示
{"data": 0},
{"data": 1},
{"data": 2},
{"data": 3},
{"data": 4},
{"data": 5},
{"data": 6},
{"data": 7},
{"data": 8},
{"data": 9},
{"data": 10},
{"data": 11},
{"data": 12},
{"data": 13},
{"data": 14},
],
});
第二种情况:向datatable添加行数据
上面说明白了datatable初始加载时载入数据的情况。那么,如果单独向datatable添加一行数据呢?先看后端代码:
<?php
//$result='{"["1", "安全带", "#1", "伸展长度(5m)", "个人防护用品", "河北佳兴电力设备有限公司", "2017-08-01 00:00:00", null, "1.0", "羊角供电所",…]}';
$sql="select * from 工器具 where 扫描码='$bcode'";
$re=mysql_query($sql);
$arr = mysql_fetch_row($re);
$result=array();
//$result["succeed"] = "1";
foreach ($arr as $key => $value) {
//把键/值取出放到result数组的data下
$result[$key] = $value;
};
//echo "<pre>";
echo json_encode($result) ;
break;
?>
注意,这里返回的JOSN数据与第一种情况的不一样,这里在PHP中虽然使用了json_encode来转换为josn对象,但这个JSON数据只是json字符串对象,前端js拿到这个数据后,仍然需要使JSON.parse()来转换为键值对对象。
前端代码:
$('#search_input').bind('keyup', function(event) {
if (event.keyCode == "13") {
//回车执行查询
//$('#search_button').click();
var bcode=$('#search_input').val();
alert(bcode);
$.ajax({
type: 'post',
url: 'appapi.php',
//dataType: 'json',
data:{"act":"in_out","bcode":bcode},
success: function(rs){
data=JSON.parse(rs);//转换
var addtr = $("<tr class='text-c' bgcolor='DeepSkyBlue' >"+
"<td>"+data[0]+"</td>"+
"<td>"+data[1]+"</td>"+
"<td>"+data[2]+"</td>"+
"<td>"+data[3]+"</td>"+
"<td>"+data[4]+"</td>"+
"<td>"+data[5]+"</td>"+
"<td>"+data[6]+"</td>"+
"<td>"+data[7]+"</td>"+
"<td>"+data[8]+"</td>"+
"<td>"+data[9]+"</td>"+
"<td>"+data[10]+"</td>"+
"<td>"+data[11]+"</td>"+
"<td>"+data[12]+"</td>"+
"<td>"+data[13]+"</td>"+
"<td>"+data[14]+"</td>"+
"</tr>");
var tr=$('.table').children('tbody');
addtr.prependTo(tr); //添加在前面第一行,如使用appendTo则添加在后面一行
error:function() {
console.log(data.msg);
},
});
};
});
实属小白,如有错漏,万望指出。