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. where子句和having子句区别

    感谢大佬:https://blog.csdn.net/XiaopinOo/article/details/78305008 where子句和having子句的区别: 1.where  不能放在grou ...

  2. VC 获取多个mac地址

    转载请注明来源:https://www.cnblogs.com/hookjc/ #include <IPHlpApi.h>#include <iostream>#pragma ...

  3. linux内存不足时，为了防止报错，可以使用swap

    1. 创建分区文件, 大小 2G dd if=/dev/zero of=/swapfile bs=1k count=2048000 2. 生成 swap 文件系统 mkswap /swapfile 3 ...

  4. 关于Java多线程-interrupt()、interrupted()、isInterrupted()解释

    多线程先明白一个术语"中断状态",中断状态为true,线程中断. interrupt():就是通知中止线程的,使"中断状态"为true. isInterrupt ...

  5. PL/SQL批量执行SQL脚本文件

    1.选择File > New > Command Windows(命令窗口) 2.输入 @ 符号,之后敲击回车键.从本地选择执行的 SQL脚本 等待批量命令全部执行成功,关闭页面即可 新增 ...

  6. 关于mybatis，需要掌握的基础

    目录 ❀ 总结 mybatis,需要掌握的基础如下: 1.了解ORM 思想.ORM思想的作用.映射配置的两种方式 2.MyBatis开发流程(基本使用) 3.日志框架 4.了解mybatis生命周期并 ...

  7. Dubbo SPI机制之三Adaptive自适应功能

    JDK标准中SPI机制的一个问题就是其一次性实例化扩展点所有实现,如果有扩展实现初始化很耗时,但如果没用上也加载,会很浪费资源:扩展点加载失败,其他扩展点都用不了了.Dubbo是如何解决该问题动态的选 ...

  8. Spring 配置概述

    理解了IoC的概念,那Spring框架是如何具体操作的呢?Spring IoC容器(ApplicaitonContext)负责创建Bean,并通过容器将功能类Bean注入到其他需要的Bean中.Spr ...

  9. CPU平均负载率之stress模拟CPU密集型进程

    一.对CPU密集型进程进行模拟,具体如下: 第一个终端 在第一个终端运行 stress 命令,模拟一个 CPU 使用率 100% 的场景:stress --cpu 1 -- timeout 600 第 ...

  10. JAVA8学习——Stream底层的实现一（学习过程）

    Stream底层的实现 Stream接口实现了 BaseStream 接口,我们先来看看BaseStream的定义 BaseStream BaseStream是所有流的父类接口. 对JavaDoc做一 ...