layUI分页处理--乐字节前端

分页

​ <font color="red">模块加载名称：laypage</font>

快速使用

​ laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分页</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div id="test1"></div>
    </body>
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          
          //执行一个laypage实例
          laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 50 //数据总数，从服务端得到
          });
        });
    </script>
</html>
基础参数

通过核心方法：laypage.render(options) 来设置基础参数。

参数选项 说明 类型 默认值
elem 指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: 'id' 注意：这里不能加 # 号 2. elem: document.getElementById('id') String/Object -
count 数据总数。一般通过服务端得到 Number -
limit 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 Number 10
limits 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50]
curr 起始页。一般用于刷新类型的跳页以及HASH跳页。如：<br />// 开启location.hash的记录<br />laypage.render({ <br /> elem: 'test1' ,<br /> count: 500 ,<br /> // 获取起始页 <br /> curr: location.hash.replace('#!fenye=', '')<br /> // 自定义hash值<br /> ,hash: 'fenye' <br />}); ` Number 1
groups 连续出现的页码个数 Number 5
prev 自定义“上一页”的内容，支持传入普通文本和HTML String 上一页
next 自定义“下一页”的内容，同上 String 下一页
first 自定义“首页”的内容，同上 String 1
last 自定义“尾页”的内容，同上 String 总页数值
layout 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域） Array ['prev', 'page', 'next']
theme 自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: '#c00' 2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类，以便自定义主题 String -
hash 开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页 String/Boolean false
jump - 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

laypage.render({
    elem: 'page'
    ,count: 100 //数据总数，从服务端得到
    ,groups:10 // 连续出现的页码个数
    ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
    ,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
    ,jump: function(obj, first){
        // obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if(!first){
            //do something
        }
    }
});

数据表格

​ <font color="red">模块加载名称：table</font>

快速使用

​ 创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器。

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>table数据表格</title>
      <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <table id="demo"></table>
    </body>
    
    <script src="layui/layui.js" type="text/javascript" ></script>
    <script type="text/javascript">
        layui.use('table', function(){
          var table = layui.table;
          
          // 第一个实例
          table.render({
            elem: '#demo'
            ,url: 'user.json' // 数据接口
            ,cols: [[ // 表头
              {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
              ,{field: 'username', title: '用户名', width:80}
              ,{field: 'sex', title: '性别', width:80, sort: true}
              ,{field: 'city', title: '城市', width:80} 
              ,{field: 'sign', title: '签名', width: 177}
            ]]
          });
          
        });
    </script>
</html>

数据接口 user.json

{
    "code": 0,
    "msg": "",
    "count": 50,
    "data": [{
            "id": 10000,
            "username": "user-0",
            "sex": "女",
            "city": "城市-0",
            "sign": "签名-0"          
        },
        {
            "id": 10001,
            "username": "user-1",
            "sex": "男",
            "city": "城市-1",
            "sign": "签名-1"
        },
        {
            "id": 10002,
            "username": "user-2",
            "sex": "女",
            "city": "城市-2",
            "sign": "签名-2"
        },
        {
            "id": 10003,
            "username": "user-3",
            "sex": "女",
            "city": "城市-3",
            "sign": "签名-3"
        },
        {
            "id": 10004,
            "username": "user-4",
            "sex": "男",
            "city": "城市-4",
            "sign": "签名-4"
        }

    ]
}
三种初始化渲染方式
机制 适用场景
方法渲染 用JS方法的配置完成渲染 （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
自动渲染 HTML配置，自动渲染 无需写过多 JS，可专注于 HTML 表头部分
转换静态表格 转化一段已有的表格元素 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可
方法渲染

  1. 将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器

    <table id="demo"></table>

  2. 渲染表格

    layui.use('table', function(){
     var table = layui.table;

     // 执行渲染
     table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
     });   
});

    注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。

自动渲染

​ 在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。

​ 1) 带有 class="layui-table" 的 <table> 标签。
​ 2) 对标签设置属性 lay-data="" 用于配置一些基础参数
​ 3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息

<table class="layui-table" lay-data="{url:'user.json'}">
  <thead>
    <tr>
      <th lay-data="{field:'id'}">ID</th>
      <th lay-data="{field:'username'}">用户名</th>
      <th lay-data="{field:'sex', sort: true}">性别</th>
    </tr>
  </thead>
</table>
转换静态表格

​ 页面已经存在了一段有内容的表格，由原始的table标签组成，只需要赋予它一些动态元素。

<table lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{field:'username', width:100}">昵称</th>
            <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
            <th lay-data="{field:'sign'}">签名</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>贤心1</td>
            <td>66</td>
            <td>人生就像是一场修行a</td>
        </tr>
    </tbody>
</table>

执行用于转换表格的JS方法

layui.use('table', function(){
    var table = layui.table;

    // 转换静态表格
    table.init('demo', {
        height: 315 // 设置高度
        // 支持所有基础参数
    }); 

});
基础参数使用的场景
// 场景一：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: 'user.json'
});
       
// 场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> …… </table>
 
// 更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); // 转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); // 重载表格
开启分页
<!-- HTML代码 -->
<table id="demo"></table>

// JS实现代码 
layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });   
});
开启头部工具栏
<table id="demo" lay-filter="demo"></table>

<!-- 表格工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!-- lay-event 给元素绑定事件名 -->
        <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>

layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
            ,{title:'操作', toolbar: '#barDemo'} // 绑定表头工具栏
        ]]
        ,toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
    });  
    
    /**
      * 头工具栏事件
      * 语法：
            table.on('toolbar(demo)', function(obj){

            });
            注：demo表示选择器元素上设置的lay-filter属性值
      */
    table.on('toolbar(demo)', function(obj){
        // obj.config.id 当前选择器的id属性值，即demo
        // 获取当前表格被选中的记录对象，返回数组
        var checkStatus = table.checkStatus(obj.config.id);
        // obj.event 得到当前点击元素的事件名
        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':
                // checkStatus.isAll 判断记录是否被全选
                layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;
                // 自定义头工具栏右侧图标 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('这是工具栏右侧自定义的一个图标按钮');
                break;
        };
    });
    
    /**
      * 监听行工具事件
      */
    table.on('tool(demo)', function(obj){
        // 得到当前操作的tr的相关信息
        var data = obj.data;
        if(obj.event === 'del'){
            // 确认框
            layer.confirm('真的删除行么', function(index){
                // 删除指定tr
                obj.del();
                // index 当前弹出层的下标，通过下标关闭弹出层
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            // 输入框
            layer.prompt({
                // 表单元素的类型 0=文本框 1=密码框 2=文本域 
                formType: 0
                ,value: data.username 
            }, function(value, index){
                // 修改指定单元格的值
                // value表示输入的值
                obj.update({
                    username: value
                });
                // 关闭弹出层
                layer.close(index);
            });
        }
    });
  
});
开启单元格编辑
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{type:'checkbox'}">ID</th>
            <th lay-data="{field:'id',  sort: true}">ID</th>
            <th lay-data="{field:'username', sort: true, edit: 'text'}">用户名</th>
            <th lay-data="{field:'sex', edit: 'text'}">性别</th>
            <th lay-data="{field:'city', edit: 'text'}">城市</th>
            <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
        </tr>
    </thead>
</table>

layui.use('table', function(){
    var table = layui.table;

    // 监听单元格编辑
    table.on('edit(demo)', function(obj){
        var value = obj.value // 得到修改后的值
        ,data = obj.data // 得到所在行所有键值
        ,field = obj.field; // 得到字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
    });

});
数据表格的重载
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" id="searchBtn">搜索</button>
</div>

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

layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery; // 获取jquery对象

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {type: 'checkbox', fixed: 'left'} // 设置复选框
            ,{field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });  

    // 给指定元素绑定事件
    $(document).on('click', '#searchBtn', function(data) {
        // 获取搜索框对象
        var demoReload = $('#demoReload');
        table.reload('demo', {
            where: { // 设定异步数据接口的额外参数，任意设
                id: demoReload.val()
            }
            ,page: {
                // 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选
                curr: 1 // 重新从第 1 页开始
            }
        }); // 只重载数据
    });
});
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343