layui table实现多条件搜索

最新推荐文章于 2025-04-19 16:33:14 发布

mr_foxsand

最新推荐文章于 2025-04-19 16:33:14 发布

阅读量3.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/mr_foxsand/article/details/118108791

版权

百度了好多文章，效果都不是很满意，最终还是需要自己动手！经过不断的测试，终于做出来了！

2021.06.30：之前的思路无法解决前端分页问题，代码做了下修改！

先展示下效果：

1.页面无条件初始化

2.搜索条件查询结果

源码：

1.前端页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en" th:replace="include/common/common :: commonHeader">
    <footer th:include="include/common/common :: layUiResource"></footer>
    <!--    <footer th:include="include/common/common :: bootstrapResource"></footer>-->
    <footer th:include="include/common/common :: blueCSSResource"></footer>

    <script>
        layui.config({
            base: '/staticResource/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index' , 'table'] , function () {
            var table = layui.table
                ,admin = layui.admin
                ,element = layui.element;

            let entityName = 'config';

            $(document).on('click' , '#' + entityName + 'SearchBtn' ,function () {
                createTable(this);
            });


            function createTable(e){
                let formId = $(e).attr("blue-form-id")
                    ,formData = $("#" + formId).serialize()
                    ,formUrl = $("#" + formId).attr("action");
                table.render({
                    elem: '#test-table-operate'
                    ,url:formUrl + '?config = ' + formData
                    // [[${pageSize}]]：thymeleaf模板引擎语法，由后端传入
                    ,limit: [[${pageSize}]]
                    ,page: true
                    ,parseData: function(res) { //res 即为原始返回的数据
                        return {

最低0.47元/天解锁文章