精华内容
下载资源
问答
  • layui table获取分页当前页页码page

    千次阅读 2020-10-29 09:50:41
    先定义tablename var table_name = table.render({ }); 然后用tablename来获取 var layui_page = table_name.... table.on('tool(layuiTable)', function(obj){ var data = obj.data; if(obj.event === 'ed

    先定义tablename

    var table_name = table.render({
    
    });
    

    然后用tablename来获取
    在这里插入图片描述

    var layui_page = table_name.config.page.pages;
    

    如果点击下一页,表格重载之后需要获取,就把获取的代码放在那一步操作里就可以了,例如

    	//监听工具条
    	table.on('tool(layuiTable)', function(obj){
    		var data = obj.data;
    		if(obj.event === 'edit'){
    			console.log(table_name.config.page.pages);
    			window.location.href = "/index.php/admin/good/edit_good?id="+data.id;
    		} else if(obj.event === 'del'){
    			//代码
    		}
    	});
    
    展开全文
  • 找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起(我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)先上...

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起

    (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)

    先上图

    代码

    .html

    .js

    //页面第一次请求 默认 1页 10条

    function dataLists(pageNum, numPerPage) {

    $.post(Url + 'pipei_dj/pagelist', {

    pageNum: pageNum, // 页码数

    numPerPage: numPerPage // 每页条数

    }, function (data) {

    let datalist = JSON.parse(data)

    dataList(datalist) // 数据传到 table组件

    page(datalist) // 数据传到 分页组件

    })

    }

    dataLists(1, 10)

    function page(data) {

    laypage.render({

    elem: 'page', //注意,这里的 page 是 ID,不用加 # 号

    count: data.totalCount, //数据总数,从服务端得到

    limit: data.numPerPage, // 每页条数

    limits: [10, 20, 30, 40, 50],

    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],

    jump: function (obj, first) {

    //console.log(obj)

    //obj包含了当前分页的所有参数,比如:

    //console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。

    //console.log(obj.limit); //得到每页显示的条数

    //首次不执行

    if (!first) {

    //do something

    numpage(obj.curr, obj.limit) // 分页点击传参

    }

    }

    });

    }

    // 从新写了 一个请求

    function numpage(pageNum, numPerPage) {

    $.post(Url + 'pipei_dj/pagelist', {

    pageNum: pageNum,

    numPerPage: numPerPage

    }, function (data) {

    let datalist = JSON.parse(data)

    dataList(datalist) // 传到table组件

    })

    }

    // 表格渲染

    function dataList(data) {

    table.render({

    elem: '#test',

    cols: [

    [{

    title: '序号',

    type: "numbers"

    }, {

    field: 'id',

    title: 'id',

    hide: true

    }, {

    field: 'status',

    title: '状态',

    hide: true

    }, {

    field: 'danjia',

    title: '单价(¥)'

    }, {

    field: 'createtime',

    title: '创建时间'

    }, {

    field: 'status',

    title: '状态',

    toolbar: '#barstate'

    }, {

    title: '操作',

    toolbar: '#barDemo'

    }]

    ],

    data: data.dataList, // 数据

    limit: data.numPerPage, // 显示的条数

    //page: true, // 开启分页

    });

    }

    以上这篇layui 数据表格 点击分页按钮 监听事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

    展开全文
  • layui.table实现分页情况下全表排序 在项目中,使用layui.table实现数据显示,有排序的需求,但是发现layui.table自带的排序在分页的情况下,只能对当前分页进行排序,而不是全表排序…… 那么如果能对表格排序按钮...

    layui.table实现分页情况下全表排序

    在项目中,使用layui.table实现数据显示,有排序的需求,但是发现layui.table自带的排序在分页的情况下,只能对当前分页进行排序,而不是全表排序……
    那么如果能对表格排序按钮的点击事件进行监听大概就能实现了
    事实上确实可以

    // 监听排序事件
    function setAreaDeviceOnSortListener () {
      layui.table.on('sort(area-device-table)', function(obj){
        var sorted_data = $cache.all_device_data
        if(obj.type==='desc'){
          // 先将数据排序
          quickSort(sorted_data,0,sorted_data.length-1,obj.field,true);
        }else if(obj.type==='asc'){
          // 先将数据排序
          quickSort(sorted_data,0,sorted_data.length-1,obj.field,!true);
        }else{
    
        }
        $cache.all_device_data = sorted_data;
        layui.table.reload('area-device-table', {
          data:sorted_data,
        });
      });   
    }
    

    quickSort()是已经写好的排序算法函数,参数obj.type可以判断排序类型,排序成功后重新加载数据,只要不重新初始化表格就不会影响分页的操作

    展开全文
  • 找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起(我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)先上...

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起

    (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)

    先上图

    代码

    .html

    .js

    //页面第一次请求 默认 1页 10条

    function dataLists(pageNum, numPerPage) {

    $.post(Url + 'pipei_dj/pagelist', {

    pageNum: pageNum, // 页码数

    numPerPage: numPerPage // 每页条数

    }, function (data) {

    let datalist = JSON.parse(data)

    dataList(datalist) // 数据传到 table组件

    page(datalist) // 数据传到 分页组件

    })

    }

    dataLists(1, 10)

    function page(data) {

    laypage.render({

    elem: 'page', //注意,这里的 page 是 ID,不用加 # 号

    count: data.totalCount, //数据总数,从服务端得到

    limit: data.numPerPage, // 每页条数

    limits: [10, 20, 30, 40, 50],

    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],

    jump: function (obj, first) {

    //console.log(obj)

    //obj包含了当前分页的所有参数,比如:

    //console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。

    //console.log(obj.limit); //得到每页显示的条数

    //首次不执行

    if (!first) {

    //do something

    numpage(obj.curr, obj.limit) // 分页点击传参

    }

    }

    });

    }

    // 从新写了 一个请求

    function numpage(pageNum, numPerPage) {

    $.post(Url + 'pipei_dj/pagelist', {

    pageNum: pageNum,

    numPerPage: numPerPage

    }, function (data) {

    let datalist = JSON.parse(data)

    dataList(datalist) // 传到table组件

    })

    }

    // 表格渲染

    function dataList(data) {

    table.render({

    elem: '#test',

    cols: [

    [{

    title: '序号',

    type: "numbers"

    }, {

    field: 'id',

    title: 'id',

    hide: true

    }, {

    field: 'status',

    title: '状态',

    hide: true

    }, {

    field: 'danjia',

    title: '单价(¥)'

    }, {

    field: 'createtime',

    title: '创建时间'

    }, {

    field: 'status',

    title: '状态',

    toolbar: '#barstate'

    }, {

    title: '操作',

    toolbar: '#barDemo'

    }]

    ],

    data: data.dataList, // 数据

    limit: data.numPerPage, // 显示的条数

    //page: true, // 开启分页

    });

    }

    以上这篇layui 数据表格 点击分页按钮 监听事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 使用layuitable.render({})函数可以快速的帮自己建立一个表格 但是我发现自己的表格在使用搜索按钮后,无法定位到搜索当前数据的第一页,这里可以使用监听搜索在执行重载中,将当前页curr重置为1即可 ...
  • layui table 保存状态赋值checkbox

    千次阅读 2019-01-16 18:03:43
    在项目中遇到一个问题,layui的checkbox复选框选择之后切换分页返回时选择状态消失,需要重新给checkbox赋值、 设置一个缓存set,保存选中项 var checkedSet = new Set(); 监听点击check事件 table.on('checkbox...
  • 找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) ...
  • layui.table上面渲染后的列表上面加一个switch开关,监听switch开关的动作,实现本列数据的状态切换! 配图: 数据表格配置参数 layui.table.options.cols 配置如下、重点看 state 那一行 table.render({ elem: ...
  • layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。 首先,监听表格的复...
  • layui分页+模糊查询

    2019-05-15 17:33:08
    var table = layui.table,//表格 laypage = layui.laypage,//分页 layer = layui.layer; //弹层 //执行一个 table 实例 table.render({ elem: '#kwgroup_table', height: 620, url: '/...
  • var table = layui.table, layer = layui.layer; var $ = layui.$; var laydate = layui.laydate; var form = layui.form; //执行一个laydate实例 laydate.render({ elem: '#start' //指定元素 ...
  • **我在用jpa整合layui分页时,有个错误一致解决不了,大神能帮我看一下吗?源码如下 ** studentRepository.java ``` @Repository public interface studentRepository extends JpaRepository,Integer>, ...
  • 在这里做一个补充,使用layui的时候,想要获取你选中的多选项可以通过 table.checkStatus('industryTable').data 其中industryTable是数据表格取的Id, 之前我的做法是在复选框监听事件 table.on('checkbox...
  • layui在线调试

    2020-07-01 09:44:19
    监听Tab切换 element.on(‘tab(demo)’, function(data){ layer.tips(‘切换了 ‘+ data.index +’:’+ this.innerHTML, this, { tips: 1 }); }); 执行一个 table 实例 table.render({ elem: ‘#demo’ ,height: ...
  • layui 表格删除问题

    2020-09-21 15:04:00
    原因:删除操作,只删除对应当前table的数据的缓存,原始的data并未删除,当点击分页,重载数据时,table数据来自原始数据,就显示出来了 更改:增加 table.reload,重载数据,并删除原始数据中当前删除的item ...
  • layui数据列表的使用

    2019-10-11 10:58:04
    2、html中table标签 lay-filter的值是用于监听数据表事件的唯一值 3、cellMinWidth 指定列宽 4、page为true 开启分页 5、height的值为 full-xxx的时候表示 整个数据列表距离底部的距离。 6、limit 设置的数据列表...
  • layui表格Data模式下(全部数据排序)非当前分页排序引入声明layui-table渲染表格函数排序函数(空数据不参与排序默认最后) 引入声明layui-table layui.use('table', function(){ var table = layui.table; // 初始...
  • <table class="layui-hide" id="demo" lay-filter="test"></table> <div class="disease-detail-box"></div> //disease-detail-box内容后台拼出来的 $(function () { butnSel(); }); function butnSel...
  • MVC

    2019-04-07 21:40:24
    单击监听事件,以上代码用于选中整条单元格,双击监听事件为rowDouble。 以上代码是一个表格的相关样式: 第一行是layui.use()加载所需模块 Elem:“”table的ID html的元素ID Data:[] 没有路径是写上防止出错 ...

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

layuitable监听分页