1. 下载地址 https://www.layui.com/
  2. 点击实例，找到layui适合模板

2.

新建html将代码复制到对应模板，修改对应样式路径。

5.修改对应参数（url,field）

   追加以下参数：

   ,page: true

    ,limit:5

    ,limits:[3,5,8]

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Layui</title>

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="__STATIC__/layui/css/layui.css"  media="all">

  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>

<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">

  <div class="layui-btn-container">

    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>

    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>

    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>

  </div>

</script>

<script type="text/html" id="barDemo">

  <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>

<script src="__STATIC__/layui/layui.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>

  layui.use('table', function(){

    var table = layui.table;

    table.render({

      elem: '#test'

      ,url:'/homework/homework/layuiList'//****接口地址需修改 ****

      // ,url:'{:url('/homework/homework/layuiList')}'

      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板

      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可

        title: '提示'

        ,layEvent: 'LAYTABLE_TIPS'

        ,icon: 'layui-icon-tips'

      }]

      ,title: '用户数据表'

      ,cols: [[

        {type: 'checkbox', fixed: 'left'}

        ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}

        ,{field:'name', title:'用户名', width:120, edit: 'text'}

        ,{field:'cate', title:'分类', width:80, edit: 'text', sort: true}

        ,{field:'put', title:'状态', width:100}

        ,{field:'reserve', title:'商品库存'}

        ,{field:'price', title:'本店售价', width:80, sort: true}

        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}

      ]]

      ,page: true

      ,limit:5

      ,limits:[3,5,8]

    });

    //头工具栏事件

    table.on('toolbar(test)', function(obj){

      var checkStatus = table.checkStatus(obj.config.id);

      switch(obj.event){

        case 'getCheckData':

          var data = checkStatus.data;

          layer.alert(JSON.stringify(data));

          break;

        case 'getCheckLength':

          var data = checkStatus.data;

          layer.msg('选中了：'+ data.length + ' 个');

          break;

        case 'isAll':

          layer.msg(checkStatus.isAll ? '全选': '未全选');

          break;

              //自定义头工具栏右侧图标 - 提示

        case 'LAYTABLE_TIPS':

          layer.alert('这是工具栏右侧自定义的一个图标按钮');

          break;

      };

    });

    //监听行工具事件

    table.on('tool(test)', function(obj){

      var data = obj.data;

      //console.log(obj)

      if(obj.event === 'del'){

        layer.confirm('真的删除行么', function(index){

          obj.del();

          layer.close(index);

        });

      } else if(obj.event === 'edit'){

        layer.prompt({

          formType: 2

          ,value: data.email

        }, function(value, index){

          obj.update({

            email: value

          });

          layer.close(index);

        });

      }

    });

  });

</script>

</body>

</html>

控制器代码：

//数据接口  对应 ,url:'/homework/homework/layuiList'//****接口地址需修改 ****

    public function layuiList()

    {

        //接受参数

        $page=input('page')?input('page'):1;//当前页

        $limit=input('limit')?input('limit'):5;//每页截取的数据

        //查询数据库

        $data = HomeworkModel::layList($page,$limit);

        //数据库总条数

        $count=HomeworkModel::layuiCount();

        $jsonData = [

            'code' => 0,

            'message' => 'success',

            'data' => $data,

            'count'=>$count,

        ];

        return json($jsonData);

    }

模型代码：

    public static function layList($page,$limit){

//        * @param mixed $page     页数

//        * @param mixed $limit 每页数量

        return self::page($page,$limit)->select();

    }

    //总条数

    public static function layuiCount(){

        return self::count();

    }

layui 数据表格的使用（分页+总条数）的更多相关文章

  1. 使用webapi绑定layui数据表格完整增删查改记录

    因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...

  2. LayUI——数据表格使用

    Layui数据表格的实际项目使用 Layui的数据表格可谓是在后台管理的页面中经常用到的工具了 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮 ...

  3. NHibernate使用ICriteria分页并返回数据库记录总条数

    最近在使用NHibernate,发现进行分页查询无法得到数据库记录的总条数,在网上找了很久没找到具体的实现方法,找到的资料都说得不是很清楚,研究了很久终于写出了这样一个方法. NHibernate下分 ...

  4. 分页过滤SQL求总条数SQL正则

    public static void main(String[] args) throws Exception { String queryForScanUsers_SQL = "selec ...

  5. oracle count 百万级 分页查询记要总数、总条数优化

    oracle count 百万级 分页查询记录总数.总条数优化 oracle count 百万级 查询记录总数.总条数优化 最近做一个项目时,做分页时,发现分页查询速度很慢,分页我做的是两次查询,一次 ...

  6. 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句，那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行，什么时候被执行，在 return 前还是后? js获取某个日期

    腾讯云图片鉴黄集成到C#   官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...

  7. 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

    关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

  8. Layui数据表格模型

    视图模型 package com.meiyou.model; import org.springframework.context.annotation.Bean; import java.io.Se ...

  9. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

随机推荐

  1. 使用Docker快速搭建Halo个人博客到阿里云服务器上[附加主题和使用域名访问]

    一.前言 小编买了一个服务器也是一直想整个网站,一直在摸索,看了能够快速搭建博客系统的教程.总结了有以下几种方式,大家按照自己喜欢的去搭建: halo wordpress hexo vuepress ...

  2. 业务4P分析实践

    原创不易,求分享.求一键三连 前言 假期继续思考BI未来的方向,其实常规的BI规划也不是不能出,比如公司BI看板建设.数据指标体系建设.业务线UE模型数据监控等,但这种不会超出预期的东西自然也能算技术 ...

  3. 使用JMX Exporter监控Rainbond上的Java应用

    场景 Prometheus 社区开发了 JMX Exporter 用于导出 JVM 的监控指标,以便使用 Prometheus 来采集监控数据.当您的 Java 应用部署在Rainbond上后 可通过 ...

  4. swwager的使用

    最近弄swwager文档,被搞得恼火,故记录一下 先展示一下现有的页面,此页面由swwager自动生成 配置步骤: 一:导入swwager的依赖 <!-- =================== ...

  5. java中构造函数和一般函数的区别

    构造方法 特点: 1.方法名称和类名相同 2.不用定义返回值类型 3.不可以写return语句 作用: 给对象初始化 构造方法的细节: 当一个类中没有定义构造函数时,系统会默认添加一个无参的构造方法. ...

  6. Tomcat下 session 持久化问题(重启服务器session 仍然存在)

    感谢大佬:https://www.iteye.com/blog/xiaolongfeixiang-560800 关于在线人数统计,大都使用SessionListener监听器实现. SessionLi ...

  7. 异步回调实现- Guava Retryer

    为什么要使用重试利器Retryer 在实际开发中我们经常会遇到需要轮询查询一个接果,实现轮询的方式有很多种,我们经常要写许多代码,有时还会怕写出的代码有bug,如果已经有轮子了,我们就没必要重复造轮子 ...

  8. android中listView下拉刷新

    Android的ListView是应用最广的一个组件,功能强大,扩展性灵活(不局限于ListView本身一个类),前面的文章有介绍分组,拖拽,3D立体,游标,圆角,而今天我们要介绍的是另外一个扩展Li ...

  9. 配置samba共享，实现/www目录共享

    一.samba服务器 1.安装samba包 # yum -y install samba 2.创建用户组 # groupadd -r admins # useradd -s /sbin/nologin ...

  10. notepad++颜色属性解释

    Global Styles Indent guideline style  缩进参考线的颜色Brace highlight style 鼠标指针在框架左右时框架的颜色(如css中{}   js中的() ...