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. Atcoder ARC-060

    ARC060(2020.7.8) A 背包板子 B 首先感觉这个东西应该不能直接 \(O(1)\) 算出来,那么复杂度应该就是 \(O(\log n), O(\sqrt{n}), O(\sqrt{n} ...

  2. BootStrap基础入门概述总结

    是否还值得学习BootStrap 因为自己还是学生,自己在学习之前就先在网上看了看BootStrap是否在现在依旧流行,是否还值得学习. 以下是网友的一些评价: 20年11月 Bootstrap作为入 ...

  3. 对axios的理解

    axios是基于promise的,可以使用promise api axios的请求方式 axios(config) axios.request(config) axios.get(url [,conf ...

  4. UTF-8与UTF-8(BOM)区别

    感谢原文作者:Teingi 原文链接:https://blog.csdn.net/weixin_40449300/article/details/86567129 在我们通常使用的windows系统中 ...

  5. nginx实现跨域访问并支持(GET, POST,PUT,DELETE, OPTIONS)

    最近有同事提出在使用客户端跨域访问的时候,发现服务器对option请求返回了403,后来查看了网络添加了一段配置,发现option服务返回204了,但是后续的put操作也直接返回了204导致无法使用图 ...

  6. iOS 小技巧总结

    1.获取准确的app启动所需时间 应用启动时间长短对用户第一次体验至关重要,同时系统对应用的启动.恢复等状态的运行时间也有严格要求,在应用超时的情况下系统会直接关闭应用.以下是几个常见场景下系统对Ap ...

  7. DatabaseMetaData

    getColumns public ResultSet getColumns(String catalog, String schemaPattern, String tableNamePattern ...

  8. Docker的数据管理、网络通信和dockerfile

    Docker的数据管理.网络通信和dockerfile 目录 Docker的数据管理.网络通信和dockerfile 一.Docker的数据管理 1. 数据卷 1.1 数据卷定义 1.2 数据卷配置 ...

  9. 简单RSA攻击方式

    RSA攻击方式总结 1.模数分解 1).解题思路 ​ a).找到RSA算法中的公钥(e,n) ​ b).通过n来找到对应的p和q,然后求得φ(n) ​ c).通过gmpy2.invert或者gmpy2 ...

  10. 基于redis5的redis cluster部署

    一.环境规划 #准备六台主机,地址如下 10.0.0.8 ---> master1 10.0.0.18 ---> master2 10.0.0.28 ---> master3 10. ...