使用layui拓展组件soulTable基本筛选功能

本文介绍了在 layui 框架下如何处理前端分页的两种方式。第一种是由于 layui 内置分页不兼容而采用自定义分页组件;第二种是利用 layui 前端内置的分页功能,通过后端返回数据进行前端分页。示例代码展示了如何处理数据加载、分页参数传递以及搜索功能的实现。
摘要由CSDN通过智能技术生成

1、导入文件

在这里插入图片描述
2、前端页面声明及引入

<link rel="stylesheet" href="/resources/layui/modules/layui_soultable/css/soulTable.css" media="all"/>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

方式一

1、由于不兼容layui内置分页,需要自定义分页

<div id="PagePlugId"></div>

在这里插入图片描述

方式二

后端不分页,前端进行分页,这种方式可使用前端内置的分页

注释table的url
在这里插入图片描述

search({});
		    function search(data) {
		       // var loading = layer.load(2);
		       $.ajax({
		           url: '/aa/bb',
		           data: data,
		           dataType: 'json',
		           success: function (res) {
		           	 var pagecount = 1;
		           	 var n = Number($(".layui-laypage-skip .layui-input").val());
		                   if (!isNaN(n)) {
		                       pagecount = n;
		                   };
		               table.reload('dataTable', {
		                   data: res.data
		                   ,limit: 10
		                   ,count: res.count
		                   , page: {
		                          curr: pagecount,
		                      }
		               })
		           },
		           complete: function () {
		              // layer.close(loading)
		           }
		       })
		    };
		   
		 //模糊查询
		  form.on("submit(doSearch)",function(data){
			 $.ajax({
		            url: '/aa/bb',
		            data: data.field,
		            dataType: 'json',
		            success: function (res) {
		                table.reload('dataTable', {
		                    data: res.data
		                    ,count: res.count
		                    ,limit: 10
		                })
		            },
		            complete: function () {
		                //layer.close(loading)
		            }
		        })
			return false;
		 });
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

花乐晴

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

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

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

打赏作者

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

抵扣说明:

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

余额充值