Layui数据表格跳转到指定页的实现方法

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

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

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

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

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

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

以上这篇Layui数据表格跳转到指定页的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

  • Layui数据表格之获取表格中所有的数据方法

    数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据. 2.将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数. 3.获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据. // 存放数据表格中的数据的对象数组tableC

  • 解决layui数据表格table的横向滚动条显示问题

    加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列

  • Layui数据表格跳转到指定页的实现方法

    1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 2.获取上述input并设置其value属性值为目标跳转页面页码 $(".layui-laypage-skip").find("input").val(目标跳转页面页码 ); 3.触发跳转按钮的click事件 $(".layui-laypage-btn").click(); 备注:页码输入框和跳转按钮位置 以上这篇Layui数据表格跳转到指定页的实现方法就是小编分享给

  • JQuery.dataTables表格插件添加跳转到指定页

    JQuery.dataTables表格插件添加跳转到指定页

    一.解决方案 1.添加自定义工具栏,嵌入文本框 "dom": 'l<"toolbar">frtip', //自定义工具栏 //设置工具栏内容 //l - length changing input control //f - filtering input //t - The table! //i - Table information summary //p - pagination control //r - processing display e

  • layui数据表格自定义每页条数limit设置

    废话不多说,直接上代码吧!如下所示: table.render({ elem: '#data_grid' //,width: 900 //,height: 274 ,cols: [[ //标题栏 {field: 'id', title: 'ID', width: 80, sort: true} ,{field: 'username', title:'用户名',width: 100} //空列 ,{field: 'password', title: '密码', width: 120} ,{fiel

  • layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例

    数据是用ThinkPHP5操作 类型是固定4个, 用layui templet - 自定义模板 方法一: {field:'type', title: '类型', width: 200, templet: '#titleTpl'} <script type="text/html" id="titleTpl"> if({{d.type}}=='2'){机构}else if({{d.type}}=='3'){财务} </script> 其它方法二:

  • layui数据表格实现重载数据表格功能(搜索功能）

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 <table id="demo" lay-filter="test"></table> JavaScript部分 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器)

  • php+layui数据表格实现数据分页渲染代码

    一.HTML <table class="layui-hide layui-table" id="spu-data"></table> 二.JS 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等 <!-- 拼接图片 --> <script type="text/html" id="pimg"> <img class=

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • Layui 数据表格批量删除和多条件搜索的实例

    layui数据表格批量删除 多条件搜索框:注样式自己写 <div class="demoTable" style="width: 968px; margin:20px auto;color: #7185a2"> 流水号: <div class="layui-inline"> <input class="layui-input" name="FlowNumber" id=&quo

  • 浅谈layui 数据表格前后台传值的问题

    1.1查询 <script> layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : 'controller路径', { field: 'id', title: 'id'}, { field: 'username', title: '用户名'}, { field: 'sex', title: 性别'}, { field: 'city', title: '城市'}

  • Layui数据表格 前后端json数据接收的方法

    先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量

随机推荐