zoukankan      html  css  js  c++  java
  • tp5+layui实现分页

    layui和thinkphp5自己在百度上下载

    html代码
        <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>分页</title>
      <link rel="stylesheet" href="layui-v2.2.5/layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
    
    	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>数据分页</legend>
    </fieldset>
     <table class="layui-hide" id="test" lay-size="sm"></table>
     <script src="layui-v2.2.5/layui/layui.js"></script>
    <script>
    	layui.use('table', function(){
      var table = layui.table;
      
    	table.render({
        elem: '#test'
        ,url:'pagedata'
        ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
          layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
          //,curr: 5 //设定初始在第 5 页
          ,limit:5 //一页显示多少条
          ,limits:[5,10,15]//每页条数的选择项
          ,groups: 2 //只显示 2 个连续页码
          ,first: "首页" //不显示首页
          ,last: "尾页" //不显示尾页
          
        }
        ,cols: [[
          {field:'id', 80, title: 'ID', sort: true}
          ,{field:'username', 100, title: '用户名'}
          ,{field:'password', 100, title: '密码'}
          ,{field:'age', 80, title: '年龄',sort: true}
         
        ]]
        
      });
    });
    </script>
    
    
    
    </body>
    </html>
    

    php代码

     /**
         分页
        */
        public function pagedata(){
            //获取总条数
           $list = User::all(); 
           $count=count($list);
           //获取每页显示的条数
           $limit= Request::instance()->param('limit');
           //获取当前页数
           $page= Request::instance()->param('page');
           //计算出从那条开始查询
           $tol=($page-1)*$limit+1;
           // 查询出当前页数显示的数据
           $list = User::where("id",">=","$tol")->limit("$limit")->select()->toArray();
           //返回数据
           return ["code"=>"0","msg"=>"","count"=>$count,"data"=>$list];
        }
    
    

    效果图

    犯了一个错误,不应该把密码查出来的,本人太难,不想改了

  • 相关阅读:
    html页面3秒后自动跳转的方法有哪些
    web前端教程之javascript创建对象的方法
    想学好web前端,需要看哪些书籍
    码农只能干到30岁的说法可信吗?
    不管你以后写不写JS,都应该学会这种思考方式
    Python基础知识之排序法
    input和textarea修改placeholder颜色和字号
    关于IE和Firefox兼容性问题及解决办法
    vue-cli构建vue项目
    js 小数取整的函数
  • 原文地址:https://www.cnblogs.com/wentutu/p/8763405.html
Copyright © 2011-2022 走看看