layui页面table使用

layui点击第二页后再进行条件筛选、列表页序号会直接从对应页码开始计数

需要在reload时候指定开始页码:

table.reload('demo', {
	  page: {
	    curr: 1 //重新从第 1 页开始
	  }
	  where: {
		type:type,
		name:name,
		id:id
	}
});

界面查询指定传入分页参数名称:

table.render({
					elem: '#demo',
					cols: [
						[ //标题栏
							{
								type: 'checkbox'
							},
							{
								field: 'id',
								title: '序号',
								width: 60,
								align: 'center',
								templet: function(d) {
									return d.LAY_INDEX
								}
							},
							{
								field: 'col1',
								title: '题干',
								minWidth: 300,
								templet: function(d) {
									return '<a href="javascript:void(0)" οnclick="viewExaminationQ()" title="' +
										d.col1 + '">' + d.col1 + '</a>'
								}
							}
						]
					],
					data: data,
					skin: 'line', //表格风格
					// even: true,
					page: true, //是否显示分页
					request:{
						//根据系统中需要使用那种名称在下面重新指定名称
						pageName:'pageNo',//页码的参数名称,默认page
						limitName:'limits'//每页数据量的参数名称,默认limit
					},
					limits: [10, 20, 30],
					limit: 10, //每页默认显示的数量
					// toolbar: '#barDemo'
					done: function(res, curr, count) {
						console.log(res.data)
						for (var i = 0; i < res.data.length; i++) {
							layui.rate.render({
								elem: '#' + res.data[i].id,
								value: res.data[i].value,
								half: true,
								readonly: true
					 	});
						}

					}
				})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui table是一款基于layui框架的表格组件,它提供了丰富的功能和灵活的配置选项。要实现自动跳转页面,可以通过监听表格的行点击事件,然后在事件回调函数中进行页面跳转操作。 以下是实现自动跳转页面的步骤: 1. 在HTML页面中引入layui和jQuery库,并初始化layui组件。 2. 创建一个表格,并设置需要展示的列和数据。 3. 给表格添加行点击事件监听器,当用户点击某一行时触发事件。 4. 在事件回调函数中获取点击行的数据,并根据需要进行页面跳转操作。 下面是一个示例代码,演示如何使用layui table实现自动跳转页面: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui table自动跳转页面</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> </head> <body> <table id="demo" lay-filter="test"></table> <script> layui.use(['table'], function(){ var table = layui.table; // 渲染表格 table.render({ elem: '#demo', url: '/api/getData', // 数据接口 cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} ]], page: true }); // 监听行点击事件 table.on('row(test)', function(obj){ var data = obj.data; // 获取点击行的数据 // 根据需要进行页面跳转操作,例如跳转到详情页 window.location.href = '/detail?id=' + data.id; }); }); </script> </body> </html> ``` 在上述示例代码中,我们使用layuitable组件来渲染表格,并通过监听行点击事件实现了自动跳转页面的功能。当用户点击某一行时,会获取到该行的数据,并根据需要进行页面跳转操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yangyang_VV

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值