layui+tp5实现table分页展示

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42942555/article/details/86573879

layui提供了很多现成的模板,今天总结一下layui表格的分页展示。
1.前端页面:
先引入必要的layui.js和css文件。可去官网下载:https://www.layui.com/。
代码如下:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>用户展示</title>
 <link rel="stylesheet" type="text/css" href="__PUBLIC__/js/layui-v2.4.5/layui/css/layui.css">
<script type="text/javascript" src="__PUBLIC__/js/layui-v2.4.5/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/layer.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.0.min.js"></script>
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
 
<table class="layui-hide" id="demo" lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 
<div class="layui-tab layui-tab-brief" lay-filter="demo">

  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
    
      <div class="layui-carousel" id="test1">
      </div>
    </div>
    <div class="layui-tab-item">
      <div id="laydateDemo"></div>
    </div>
    <div class="layui-tab-item">
      <div id="pageDemo"></div>
    </div>
 
    <div class="layui-tab-item">
      <div id="sliderDemo" style="margin: 50px 20px;"></div>
    </div>
  </div>
</div>
<script>
layui.config({
  version: '1545041465480' //为了更新 js 缓存,可忽略
});
 
layui.use([ 'laypage', 'layer', 'table',   'element', 'slider'], function(){
  var laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,element = layui.element //元素操作
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +':'+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,url: 'showUser' //数据接口
    ,title: '用户表'
    ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
    	      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    	      //,curr: 5 //设定初始在第 5 页
    	      ,limit:2 //一页显示多少条
    	      ,limits:[2,4,6]//每页条数的选择项
    	      ,groups: 2 //只显示 2 个连续页码
    	      ,first: "首页" //不显示首页
    	      ,last: "尾页" //不显示尾页
    	      
    	    }
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:50, sort: true}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'realname', title: '真实姓名', width: 100, sort: true, totalRow: true}
      ,{field:'sex', title: '性别', width: 60
          ,templet: function(d){
        	  return (d.sex == "1") ? "男": "女";
          }
        }

      ,{field: 'dept', title: '所在部门', width: 100, sort: true, totalRow: true}
      ,{field: 'role', title: '当前职位', width:100} 
      ,{field: 'phone', title: '电话', width: 120}
      ,{field: 'email', title: '邮箱', width: 150}
      ,{field: 'ctime', title: '入职时间', width: 105, sort: true, totalRow: true}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  

});
</script>
</body>
</html>        
        

2.后台
在tp5 Controller层需要通过Mode实例化对象连接数据库查询表中的数据,然后以layui table的特定数组格式返回给前台,通过渲染实现数据的分页。
代码如下:

 public function showUser(){
        
   //获取总条数
       $list = Users::all(); 
       $count=count($list);
       
       //获取每页显示的条数
       $limit= Request::instance()->param('limit');
       //获取当前页数
       $page= Request::instance()->param('page');
     //计算出从那条开始查询
       $tol=($page-1)*$limit;
       // 查询出当前页数显示的数据
       $list = db('users')->limit($tol,$limit)->select();
       //返回数据
       $arr=array();
       $arr['code']=0;
       $arr['msg']="";
       $arr['count']=$count;
       $arr['data'] = $list;

       $arr_json=json_encode($arr);
        echo  $arr_json;

    
    }

访问controller 层的showUser方法可以看到数组格式的数据:
在这里插入图片描述
虽然中文格式乱码了,但是不用担心,只要你数据库设置的编码格式是utf-8并且前台也是中文编码就没问题。需要特别注意的是返回的数据格式必须要让table支持才可以,不然就会报接口错误。默认格式如下:

默认接受的数据格式
{
  code: 0,
  msg: "",
  count: 1000,
  data: []
} 

后台已经得到数据,需要写一个方法先返回view层页面通过接口访问controller层方法获得数据才可以渲染:

 public function returnShowUser()
    {
        //         return $this->fetch();
         
        return view('showUser');
    }

然后输入地址:localhost/index.php/admin/index/returnShowUser 就可以看到成功分页了!
在这里插入图片描述
好了,就写到这里。如果有疑问可直接回复!

展开阅读全文

没有更多推荐了,返回首页