利用layui数据表格实现异步获取数据

首先看一下效果：

前端的话可以参考layui官方文档：https://www.layui.com/doc/modules/code.html

下面代码中已经包含数据分页、数据操作等。必须将后台数据转化为json数据才能被layui表格接受。

以下是我的代码

html：

 <tableid="test" lay-filter="test" lay-data="{id: 'test'}" ></table>//头部工具栏<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button type="button" class="layui-btn layui-btn-sm"lay-event="addData">新增<span class="glyphicon glyphicon-plus"></span></button><button class="layui-btn layui-btn-sm" lay-event="getCheckData">提交选中行</button><button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格</button><button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="dels">删除选中行</button></div></script>//自增序号<script type="text/html" id="zizeng">{{d.LAY_TABLE_INDEX+1}} </script>//操作栏 <script type="text/html" id="barDemo"><a class="download" style=" text-decoration: none"><i class="layui-icon layui-icon-download-circle toolbars"lay-event="find" title="下载附件" ></i></a><a style=" text-decoration: none"><i class="layui-icon layui-icon-edit toolbars"lay-event="edit" title="编辑" ></i> </a><a style=" text-decoration: none"><i class="layui-icon layui-icon-ok toolbars"lay-event="confirm" title="确认" ></i> </a><a style=" text-decoration: none"><i class="layui-icon layui-icon-delete" lay-event="del" title="删除" ></i> </a></script>//自定义模板<script type="text/html" id="status">{{# if(d.status ==0){ }}待提交{{#}else{}}<div style = "color:red;">(经修改),待提交</div>{{#} }}</script><script type="text/html" id="enclosure">{{# if(d.enclosure ==null){ }}<button class="layui-btn layui-btn-danger layui-btn-xs">无</button>{{#}else{}}<button class="layui-btn layui-btn-success layui-btn-xs" >有</button>{{#} }}</script>

js:

<script>layui.use('table', function(){var table = layui.table;table.render({ even: false //开启隔行背景,size: 'sm' //小尺寸的表格,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板,minheight:"800px",elem: '#test',page:true,limit:10,height:450,url:"{:url('getDataList')}",where: {jx_name: "71",status:"0"},parseData: function(res){ //res 即为原始返回的数据// console.log(res.data)return {"code": 0, //解析接口状态"msg": "刷新页面试试", //解析提示文本"count": res.total, //解析数据长度"data": res.data//解析数据列表};},cols: [[ {type: 'checkbox', fixed: 'left'},{field:'zizeng', title:'序号', width:50, unresize: true,fixed:'left', type:'numbers'},{field:'pt_id', title:'id', hide:true,type:'space'},{field:'jx_name', title:'奖励项目', width:120, sort: true },{field:'xm_name', title:'项目名称', width:120, sort: true },{field:'unit', title:'授奖/立项单位', width:150, sort: true},{field:'level', title:'级别/类别', width:110, sort: true},{field:'level2', title:'获奖/立项等级', width:140, sort: true},{field:'points1', title:'指导业绩点', width:110, sort: true},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:130}]] });//监听头部工具栏事件table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'addData':var pro = $(".layui-this").val();var fun = 1;var id = 0;layer.open({type: 2,title: '项目添加',shadeClose: true,shade: false,maxmin: true, //开启最大化最小化按钮area: ['840px', '700px'],content:['getAddData'+"?pro="+pro +"&&fun="+fun +"&&id="+id],end: function(){table.reload('test');}});break;case 'getCheckData':var data = checkStatus.data;if(data==''){layer.alert("未选择数据");}else{layer.confirm('真的提交选中数据吗', function(index){layer.close(index);$.ajax({type: "post",url: "{:url('confirmList')}",dataType: "json",data:{"ids":data},async: false,success: function (data) {layer.msg("提交成功");table.reload('test');}});})}break; case 'dels':var data = checkStatus.data;if(data==''){layer.alert("未选择数据");}else{layer.confirm('真的删除选中数据吗', function(index){layer.close(index);$.ajax({type: "post",url: "{:url('delList')}",dataType: "json",data:{"ids":data},async: false,success: function (data) {layer.msg("提交成功");table.reload('test');}});})}break;case 'refresh':table.reload('test');break;};});//监听行工具事件table.on('tool(test)', function(obj){var data = obj.data;//console.log(obj)if(obj.event === 'del'){layer.confirm('真的删除行么', function(index){//console.log(data.pt_id);layer.close(index);$.ajax({type: "post",url: "{:url('del')}",dataType: "json",data:{"id":data.pt_id},async: false,success: function (data) {layer.msg("删除成功");table.reload('test');}});});}else if(obj.event === 'edit'){var id=data.pt_id;var pro = $(".layui-this").val();var fun = 2;layui.use('layer',function(){var layer = layui.layer;layer.open({type:2,title:"项目修改",shade:0.8,area:['840px','700px'],content:['getAddData'+"?pro="+pro +"&&fun="+fun +"&&id="+id],end: function(){table.reload('test');}}); }) }else if(obj.event === 'find'){var id=data.pt_id;var enclosure=data.enclosure;if(enclosure==null){layer.alert("没有附件");}else{$.ajax({type: "post",url: "{:url('lookUp')}",dataType: "json",data:{"id":id},async: false,success: function (data) {var url = ("../../"+data);$(".download").attr("href",url);$(".download").attr("download",enclosure);}});}}else if(obj.event==='confirm'){layer.confirm('真的提交行么', function(index){//console.log(data.pt_id);layer.close(index);$.ajax({type: "post",url: "{:url('confirm')}",dataType: "json",data:{"id":data.pt_id},async: false,success: function (data) {layer.msg("提交成功");table.reload('test');}});});}})});</script>

php后台,这里放列表方法和删除方法，其他均可参照：

public function lists(){$notice = Db::name('notice')->where('type',7)->select();$this->assign('notice',$notice);$project=Db::name('project')->select();$this->assign('project',$project);return $this->fetch('lists');}public function getDataList($jx_name,$status){$jx_name = !empty($jx_name) ? $jx_name: '';$username = session('name');$page=input("get.page")?input("get.page"):1;$page=intval($page);$limit=input("get.limit")?input("get.limit"):1;$limit=intval($limit);$start=$limit*($page-1);$map=[];if($status=='0'){$map['status'] = ['in',"[0,5]"]; }else{$map['status'] = ['in',"[1,6]"];}if($jx_name){$map['jx_name'] = ['=',$jx_name];}else{ }$list = Db::name('practice_teaching')->alias('p')->join('project pro','pro.id=p.jx_name')->where('u_id',$username)->where($map)->order('jx_name')->order('xm_name')->limit($start,$limit)->select(); }$count = Db::name('practice_teaching')->where('u_id',$username)->where($map)->count();$data["total"]=$count;$data["msg"] = "";$data["code"] = 0;$data["data"] = $list;// $total = sizeof($list);$rs=json($data); return $rs;} public function del($id){$res=db('practice_teaching')->where('pt_id',$id)->find();if($res['enclosure'] != NULL) {//有附件，先删除附件$path=ROOT_PATH . 'public' . DS . 'uploads'.DS.$res['enclosure']; unlink($path); } $del = db('practice_teaching')->delete($id); if($del) {$this->success('删除成功'); }else {$this->error('删除失败'); }}