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. 【转】使用Docx.Core创建word表格

    原文地址:https://www.cnblogs.com/qs315/p/13533765.html 使用Docx.Core创建word表格 下载DocxCore Nuget包 当前版本 1.0.7 ...

  2. Android动态加载布局之LayoutInflater【转】

    万分感谢大佬:https://www.jianshu.com/p/6a235ba5ee17 深入了解View<一>之Android LayoutInfalter原理分析 下文为:Layou ...

  3. Linux添加用户组和添加用户

    1.用户组 添加组:groupadd 组名 [root@Server-n93yom ~]# groupadd dev [root@Server-n93yom ~]# cat /etc/group | ...

  4. swift语言学习博文精选

    初探swift语言的学习笔记九(OC与Swift混编) Objective-C 与 Swift 混编之路 Swift项目兼容Objective-c问题汇总

  5. Junit4进行参数化测试

    @RunWith, 当类被@RunWith注解修饰,或者类继承了一个被该注解修饰的类,JUnit将会使用这个注解所指明的运行器(runner)来运行测试,而不是JUnit默认的运行器. 要进行参数化测 ...

  6. Mac 配置Apache Php编译ssl错误解决

    终端 Php编译错误解决 //错误信息 unable to connect to ssl://gateway.sandbox.push.apple.com:2195 (Unknown error) i ...

  7. IO复习

    /* 字节流 输入字节流: ---------| InputStream 所有输入字节流的基类. 抽象类 ------------| FileInputStream 读取文件的输入字节流 ------ ...

  8. Springboot+Redisson自定义注解一次解决重复提交问题（含源码）

    前言   项目中经常会出现重复提交的问题,而接口幂等性也一直以来是做任何项目都要关注的疑难点,网上可以查到非常多的方案,我归纳了几点如下:   1).数据库层面,对责任字段设置唯一索引,这是最直接有效 ...

  9. python基础语法_闭包详解

    https://www.cnblogs.com/Lin-Yi/p/7305364.html 闭包有啥用??!! 很多伙伴很糊涂,闭包有啥用啊??还这么难懂!  3.1装饰器!!!装饰器是做什么的??其 ...

  10. Kubernetes家族容器小管家Pod在线答疑?

    Kubernetes家族容器小管家Pod在线答疑 不知道学习k8s的小伙伴们有没有跟我一样的疑问? k8s为什么不是直接运行容器,而是让Pod介入? Pod又是什么?为什么在应用容器化如此普遍的情况下 ...