Layui数据表格跳转到指定页

最新推荐文章于 2024-03-11 11:26:29 发布
最新推荐文章于 2024-03-11 11:26:29 发布
阅读量1.8w 收藏 6
点赞数 3
分类专栏： Layui 文章标签： Layui 数据表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cccmercy/article/details/79032944
版权

1.获取数据表格下分页组件中的页码输入框，具体元素在Elements中位置如下



2.获取上述input并设置其value属性值为目标跳转页面页码

$(".layui-laypage-skip").find("input").val(目标跳转页面页码 );

3.触发跳转按钮的click事件 

$(".layui-laypage-btn").click();


备注：页码输入框和跳转按钮位置




xcmercy
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Layui数据表格跳转到指定页的实现方法
10-16
今天小编就为大家分享一篇Layui数据表格跳转到指定页的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui tab选项卡切换多页面
HarlanHu
04-26 7722
此文用于记录layui tab使用 官方文档： tab选项卡结构：https://www.layui.com/doc/element/tab.html tab页面绑定与切换：https://www.layui.com/doc/modules/element.html 1.新建导航选项 <div class="layui-side layui-bg-black"> <div class="layui-side-scroll">
LAYUI 后台页面，切换TAB后刷新当前激活的TAB页面内容
最新发布
leiyanglove的博客
03-11 506
【代码】LAYUI 后台页面，切换TAB后刷新当前激活的TAB页面内容。
LayUI之动态选项卡Tab&iframe使用
m0_68211831的博客
07-19 667
上面404没有关系，后期还要继续优化的。把界面上的代码封装到js里面;数据库所有的账号和密码。
layui 数据表格 点击分页按钮 监听事件
碌碌无为的程序猿
08-30 1万+
找了 很多 关于表格分页 点击事件 请求， table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 （我也不想写分页的，但是后台讲数据多 ，要加分页，被逼无奈 ，想了一个方法） 先上图 代码 .html <div> <table class="layui-hide" id="test" lay...
layUI关于table组件如何设置分页跳转后的页面锚点
哼
06-07 643
今天接到的需求是让所有分页器分页跳转时，页面锚点定位到指定位置。项目是用layui写的前端，然后在看项目代码时发现，代码中的分页器有些是直接用table组件，设置page:true开启分页；对于后者的情况很简单，就是在jump配置项里去写回调函数的逻辑即可，但是前者就有点麻烦，这是因为虽然table的page配置项支持传入一些laypage组件的属性，但并不支持传入jump。但是这种方法太麻烦，代码量多的情况下涉及的改动也就特别多，加上前端很多页面都用到了带分页的table，这样要重新写的地方很多。
layui 表格翻页问题
weixin_41614806的博客
08-09 225
【前端代码】请问这个[start]要怎么获取并传递到后端？用了where，好像也不行。有劳帮我看看这个翻页的问题，拜托了。【翻页请求需要的参数】
layui实现与php数据请求table表格展示及分页跳转功能
weixin_39218464的博客
10-11 2409
前端代码index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>layui在线
layui 利用tab选项卡实现：上一步，下一步操作
u014206461的博客
12-22 1997
虽然闲心大大已经关闭layui官网，可他一直是我们jQuery族的骄傲，话不多说了 效果如下： CSS /* 顺序tab */ .order_tab .layui-tab-title{border: none !important;text-align: center;} .order_tab .layui-tab-title li+li{margin: 0 0 0 50px;} .order_tab .layui-tab-title li>span{width: 35px; height: 3.
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
10-18
今天小编就为大家分享一篇Layui给数据表格动态添加一行并跳转到添加行所在页的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JQuery.dataTables表格插件添加跳转到指定页
10-19
主要介绍了JQuery.dataTables表格插件添加跳转到指定页的解决方案，非常不错，具有参考借鉴价值,需要的朋友可以参考下
基于Datatables跳转到指定页的简单实例
08-28
下面小编就为大家带来一篇基于Datatables跳转到指定页的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于layui table回显以及选择下一页时记住上一页数据的问题
最美不过下雨天
08-28 1263
【代码】关于layui table回显以及选择下一页时记住上一页数据的问题。
JTable的一些常用方法_kevin_新浪博客
weixin_43236827的博客
10-12 206
JTable是Swing编程中很常用的控件,这里总结了一些常用方法以备查阅. 一.创建表格控件的各种方式: 1)调用无参构造函数. JTabletable=newJTable(); 2)以表头和表数据创建表格. Object[][]cellData={{"row1-col1","row1-col2"},{"row2-col1","row...
【Layui】使用table和laypage组件实现动态显示列和分页
MoFe1的博客
04-13 4371
脚本内容 layui.use(['table', 'laypage'], function () { var $ = layui.jquery; var table = layui.table; var laypage = layui.laypage; var page = 1; var limit = 20; table.render({ .
Layui给数据表格动态添加一行并跳转到添加行所在页
热门推荐
XCMercy
01-20 2万+
Layui数据表格动态添加一行问题 Layui是一个前端 UI 框架，该框架风格优雅，但由于发布时间较短，很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候，需求是这样的：当点击添加按钮的时候，就在数据表格最后动态添加一行。上述功能官方并没有给出实现，需要自己手动解决。 解决思路及方案 简单分析：根据需求——动态添加一行，首先想到的是利用JS/jQuery操作DOM对象实
layui表格数据跳转详情
05-01
要实现表格数据跳转详情，可以采用以下步骤： 1. 在表格中添加一个列，用于显示跳转详情的链接或按钮； 2. 给该列添加一个事件监听器，当用户点击链接或按钮时，触发跳转操作； 3. 在跳转操作中，获取当前行的数据，并将数据传递到详情页面； 4. 在详情页面中，根据传递的数据，显示相应的详细信息。 具体实现方式可以参考以下代码： ``` // 在表格中添加一个列，用于显示跳转详情的链接或按钮 table.render({ elem: '#demo' ,cols: [[ {field:'id', title:'ID'} ,{field:'name', title:'姓名'} ,{field:'action', title:'操作', templet: '#bar'} ]] ,data: [ {id: 1, name: '张三'} ,{id: 2, name: '李四'} ,{id: 3, name: '王五'} ] }); // 给操作列添加事件监听器，当用户点击链接或按钮时，触发跳转操作 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ // 跳转到详情页面，并传递当前行的数据 window.location.href = 'detail.html?id=' + data.id + '&name=' + data.name; } }); // 在详情页面中，根据传递的数据，显示相应的详细信息 var id = getUrlParam('id'); var name = getUrlParam('name'); $('#id').text(id); $('#name').text(name); // 获取 URL 参数的方法 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null; } ``` 在上述代码中，我们使用了 layui 的 table 组件和事件监听器，以及 jQuery 的 DOM 操作和 URL 参数获取方法，实现了表格数据跳转详情的功能。需要注意的是，详情页面的设计和实现需要根据具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值