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

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;
		 });

版权声明:本文为weixin_44195615原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。