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. Java8之Stream常用操作方式

    哈喽!大家好,我是[学无止境小奇],一位热爱分享各种技术的博主! [学无止境小奇]的创作宗旨:每一条命令都亲自执行过,每一行代码都实际运行过,每一种方法都真实实践过,每一篇文章都良心制作过. [学无止 ...

  2. ApacheJemeter的简单使用

    前言:最近由于工作需要进行接口测试,故简单复习一下ApacheJemeter的使用 安装包下载地址: 链接:https://pan.baidu.com/s/11ywNWRUkFNNBCWw4HiO6B ...

  3. Ajax与PHP进行交互操作

    转载请注明来源:https://www.cnblogs.com/hookjc/ function AjaxOut(resTxt){ try{eval(resTxt);} catch(e){alert( ...

  4. 入门-k8s查看Pods/Nodes （四）

    目标 了解Kubernetes Pods(容器组) 了解Kubernetes Nodes(节点) 排查故障 Kubernetes Pods 在 部署第一个应用程序 中创建 Deployment 后,k ...

  5. 电脑预装Office2016打开Word时点击保存弹出“word无法启动转换器RECOVR32.CNV”对话框问题的修复方法

    感谢大佬:https://blog.csdn.net/qq_41969790/article/details/85161701 1.问题描述:电脑预装的Office2016,家庭和学生版正版.每次打开 ...

  6. vue中mapGetters和...mapGetters

    vuex中的...mapGetters(['name'])如何实现的 vuex vue.js 根据文档介绍 https://vuex.vuejs.org/zh-cn/... 和看了 http://ww ...

  7. 为什么后台给前台Date是时间戳，而前台给后台则直接是时间字符串？

    一.因为时间的格式有很多种,不同的页面可能对不同的时间显示需求不同.比如: 05-8-8 上午9:17 2005-8-8 9:17:42 2005年8月8日 上午09时17分42秒 2005年8月8日 ...

  8. 项目架构(结构)搭建:主流结构(UITabBarController + 导航控制器)

    /* 项目架构(结构)搭建:主流结构(UITabBarController + 导航控制器) -> 项目开发方式 1.storyboard 2.纯代码 */ @interface AppDele ...

  9. 1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

  10. opencv笔记--stitching模块

    opencv 提供了全景图像拼接的所有实现,包括: 1)stitching 模块提供了图像拼接过程中所需要的基本元素,该模块主要依赖于 features2d 模块: 2)提供了 stitching_d ...