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

首先看一下效果：

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

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

以下是我的代码

html：

 <table  id="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('删除失败');
       }
        
    }