精华内容
下载资源
问答
  • 最近项目用到了layui,刚接触这玩意看的是一脸懵逼。不过还好,功夫不负有心人,勉勉强强的还是做出来了,为了伙伴们可以不用花费太多时间去自己琢磨,下面会尽量去多加些啰嗦的注释。 直接上代码。 HTML <!...

    最近项目用到了layui,刚接触这玩意看的是一脸懵逼。不过还好,功夫不负有心人,勉勉强强的还是做出来了,为了伙伴们可以不用花费太多时间去自己琢磨,下面会尽量去多加些啰嗦的注释。
    直接上代码。

    HTML

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org"
          xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head th:include="layout :: htmlhead" th:with="title='文章管理'"></head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!--头--> 
        <div th:replace="fragments/head :: header"></div>
        
        <div class="layui-body" style="margin:20px 0px 0px 20px">
            <form id="articleSearch" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
                <div class="layui-row">
                    <div class="layui-inline">
                    <label class="layui-form-label">文章标题</label>
                    <div class="layui-input-inline">
                        <input id="articleTitle" name="articleTitle" autocomplete="off" class="layui-input" type="text"/>
                    </div>
                        <button class="layui-btn" id="submitData" data-type="reload" onclick="return false;" lay-submit="" lay-filter="searchSubmit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                
            </form>
            <!--<hr class="layui-bg-blue"/>-->
            <hr class="layui-bg-black"/>
            <!-- 数据展示区-->
            <table id="articleLists" lay-filter="articleTable"></table>
            <div style="display:none;" id="currentUser"><shiro:principal property="id"></shiro:principal></div>
    	
            <script type="text/html" id="optBar">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
        
        <!--底部-->
        <div th:replace="fragments/footer :: footer"></div>
        <script src="/js/dateUtils.js"></script>
        <script src="/js/article/test1.js"></script>
    </div>
    </body>
    </html>
    

    JS文件

    $(function() {$ = layui.jquery;
        layui.use('table', function(){
            var table = layui.table
                ,form = layui.form;
            //表格数据展示
            tableIns=table.render({
                elem: '#articleLists'//指定table
                ,url:'/article/findArticle'
            	,method: 'post' //默认:get请求
                ,cellMinWidth: 80//表格列宽
                ,page: true//分页开启 
            	,request: {
                    pageName: 'page' //页码的参数名称,默认:page
                    ,limitName: 'limit' //每页数据量的参数名,默认:limit
                },response:{
                    statusName: 'code' //数据状态的字段名称,默认:code
                    ,countName: 'count' //数据总数的字段名称,默认:count
                    ,dataName: 'data' //数据列表的字段名称,默认:data
                }
                ,cols: [[
                    {type:'numbers'}
                    ,{field:'articleId', title:'文章ID', unresize: true, sort: true}
                    ,{field:'articleTitle', title:'文章标题'}
                    ,{field:'postedTime', title: '发布时间'}
                    ,{fixed:'right', title:'操作',align:'center', toolbar:'#optBar'}
                ]]
                ,done: function(res, curr, count){
                    //得到当前页码
                    //console.log(curr); 可以设置变量接收 替换掉最底下load 重新加载 的1  可进行当前页刷新
                }
            });
            
            //监听工具条
            table.on('tool(articleTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    delArticle(data,data.articleId);
                } else if(obj.event === 'edit'){
                    //编辑
                	paddingData(data,data.articleId);
                }
            });
        });
    
        //搜索框
        layui.use(['form','laydate'], function(){
            var form = layui.form ,layer = layui.layer;
            //监听搜索框
            form.on('submit(searchSubmit)', function(data){
                //重新加载table
                load(data);
                return false;
            });
        });
    });
    
    //重新加载table
    function load(obj){
        tableIns.reload({
            where: obj.field
            , page: {
                curr: 1 //从当前页码开始
            }
        });
    }
    

    Controller

    	/**
    	 * 文章列表页面
    	 * @return
    	 */
    	@RequestMapping("/articleList")
    	public ModelAndView articleList() {
    		return new ModelAndView("article/test1");
    	}
    	/**
    	 * 
    	 * 分页查询文章列表
    	 * @return ok/fail
    	 */
    	@RequestMapping(value = "/findArticle", method = RequestMethod.POST)
    	@ResponseBody
    	public  ResultVo findArticle(@RequestParam("page") Integer page,
    			@RequestParam("limit") Integer limit,String articleTitle) {
    		logger.debug("分页查询用户列表!搜索条件:articleTitle:" + articleTitle + ",page:" + page
    				+ ",每页记录数量limit:" + limit);
    				//实例化封装类
    		ResultVo rv=new ResultVo();
    		try {
    		//实例分页插件
    			PageInfo<Article> pdr = new PageInfo<Article>();
    			pdr = as.findArticle(articleTitle, page, limit);
    			rv.setCount(pdr.getTotal());//往封装类存入数据量
    			rv.setData(pdr.getList());//往封装类存入数据
    			logger.debug("文章列表查询=pdr:" + pdr);
    		} catch (Exception e) {
    			e.printStackTrace();
    			logger.error("文章列表查询异常!", e);
    		}
    		return rv;
    	}
    

    封装类

    package com.chb.vo;
    
    public class ResultVo {
    	private String code;
    	private String msg;
    	private long count=0;
    	private Object data;
    	public String getCode() {
    		return code;
    	}
    	public void setCode(String code) {
    		this.code = code;
    	}
    	public String getMsg() {
    		return msg;
    	}
    	public void setMsg(String msg) {
    		this.msg = msg;
    	}
    	public long getCount() {
    		return count;
    	}
    	public void setCount(long l) {
    		this.count = l;
    	}
    	public Object getData() {
    		return data;
    	}
    	public void setData(Object data) {
    		this.data = data;
    	}
    }
    
    

    serviceImpl

    	@Override
    	public PageInfo<Article> findArticle(String articleTitle, int page, int limit) {
    		PageHelper.startPage(page, limit);
    		//PageHelper.orderBy("article_id ASC");//排序设置
    		List<Article> ArticleInfo = ad.findArticle(articleTitle);
    		PageInfo<Article> pageinfo = new PageInfo<Article>(ArticleInfo);
    		return pageinfo;
    	}
    

    dao

    	/***
    	 * 标题模糊查询文章
    	 * @param articleTitle
    	 * @return
    	 */
    	List<Article> findArticle(@Param("articleTitle")String articleTitle);
    

    mapper

    	<!--  分页查询文章列表 -->
    	<select id="findArticle" resultMap="BaseResultMap">
    		select 
    		article_id,articleTitle,articleContent,postedTime
    		from t_article
    		<where>
    			<if test="articleTitle != null and articleTitle != &quot;&quot;">
    				and articleTitle like CONCAT(CONCAT('%',#{articleTitle}),'%')
    			</if>
    		</where>
    	</select>
    

    效果图
    在这里插入图片描述
    亲测可用,拷贝测试的话样式会没有。
    建议选择性的去看代码,主要是JS文件中的列表展示(前提后台能拿出数据)。
    如有问题或错误请留言,避免误伤后来的小伙伴。

    展开全文
  • springboot+layui进行分页以及模糊查询前端后端效果展示 springboot+layui进行分页以及模糊查询 前端 html部分 搜索部分 <fieldset class="table-search-fieldset"> <legend>搜索信息</legend&...

    springboot+layui进行分页以及模糊查询

    springboot+layui进行分页以及模糊查询

    前端

    html部分
    搜索部分

    <fieldset class="table-search-fieldset">
    					<legend>搜索信息</legend>
    					<div style="margin: 10px 10px 10px 10px">
    						<form class="layui-form layui-form-pane" action="">
    							<div class="layui-form-item">
    
    								<div class="layui-inline">
    									<label class="layui-form-label">用户姓名</label>
    									<div class="layui-input-inline">
    										<input type="text" name="userName" autocomplete="off" class="layui-input">
    									</div>
    								</div>
    								<div class="layui-inline">
    									<label class="layui-form-label">年龄</label>
    									<div class="layui-input-inline">
    										<input type="text" name="userAge" autocomplete="off" class="layui-input">
    
    									</div>
    								</div>
    								<div class="layui-inline">
    									<label class="layui-form-label">性别</label>
    									<div class="layui-input-inline">
    										<!-- <input type="text" name="userSex" autocomplete="off" class="layui-input"> -->
    										<select name="userSex" style="width: 100px;">
    											<option value="">请选择性别</option>
    											<option value=""></option>
    											<option value=""></option>
    										</select>
    									</div>
    								</div>
    								<div class="layui-inline">
    									<button lay-submit lay-filter="data-search-btn"
    										class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜 索</button>
    									<!--  -->
    
    								</div>
    							</div>
    						</form>
    					</div>
    				</fieldset>
    

    数据表格

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    

    js部分
    数据表格渲染

    layui.use(['form', 'table'], function() {
    				var $ = layui.jquery,
    					form = layui.form,
    					table = layui.table;
    				console.log("执行到了表格")
    
    				table.render({
    					elem: '#currentTableId',
    					headers: {
    						"Authorization": localStorage.token
    					},
    					url: 'http://127.0.0.1:8081/user/lists',
    					method: 'get',
    					xhrFields: {
    					                    withCredentials: true
    					                },
    					page: true,
    					response: {
    						statusCode:200, //规定成功的状态码,默认:0
    					},
    					parseData: function(res) { //res 即为原始返回的数据
    					console.log(res);
    					
    					if(res.code != 200){
    						return {
    							"code": res.code, //解析接口状态
    							"msg": res.msg, //解析提示文本
    							
    						};
    					}else{
    						return {
    							"code": res.code, //解析接口状态
    							"msg": res.msg, //解析提示文本
    							"count": res.data.total, //解析数据长度
    							"data": res.data.list //解析数据列表
    						};
    					}
    						
    					},
    					toolbar: '#toolbarDemo',
    					defaultToolbar: ['filter', 'exports', 'print', {
    						title: '提示',
    						layEvent: 'LAYTABLE_TIPS',
    						icon: 'layui-icon-tips'
    					}],
    
    					cols: [
    						[{
    								type: "checkbox",
    								width: 50
    							},
    							{
    								field: 'userId',
    								width: 80,
    								title: 'ID',
    								sort: true
    							},
    							{
    								field: 'userName',
    								width: 80,
    								title: '用户名'
    							},
    							{
    								field: 'userPwd',
    								width: 80,
    								title: '密码'
    							},
    							{
    								field: 'userAge',
    								width: 80,
    								title: '年龄'
    							},
    							{
    								field: 'userSex',
    								title: '性别',
    								minWidth: 150
    							},
    							{
    								field: 'createTime',
    								title: '创建时间',
    								minWidth: 150
    							},
    							{
    								field: 'updateTime',
    								title: '更新时间',
    								minWidth: 150
    							},
    							{
    								title: '操作',
    								minWidth: 150,
    								toolbar: '#currentTableBar',
    								align: "center"
    							}
    						]
    					],
    					limits: [10, 15, 20, 25, 50, 100],
    					limit: 15,
    					page: true,
    					skin: 'line'
    				});
    

    数据表格模糊搜索重载

    form.on('submit(data-search-btn)', function(data) {
    					var result = JSON.stringify(data.field);
    					var user = {};
    					user.userName = data.field.userName
    					user.userAge = data.field.userAge;
    					user.userSex = data.field.userSex;
    
    				
    					console.log("执行到了重载")
    					//执行搜索重载
    					table.reload('currentTableId', {
    						url: "http://localhost:8081/user/lists",
    						method: "get",
    						page: {
    							curr: 1    //重新以第一页开始渲染
    						},
    						where: user
    					}, 'data');
    					return false;
    				});
    

    后端

    插件

     <!-- mybatis的分页助手-->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>1.2.10</version>
                <exclusions>    <!--排除与mybatis-plus的冲突否则报错-->
                    <exclusion>
                        <groupId>org.mybatis</groupId>
                        <artifactId>mybatis</artifactId>
                    </exclusion>
                </exclusions>
    
            </dependency>
    

    Mapper层

    @Repository
    @Mapper
    public interface UserMapper extends BaseMapper<User> {
    
        List<User> selectAll(User user);
    }
    
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.zzuli.mapper.UserMapper">
        <sql id="Base_Column_List">
        user_id, user_name, user_pwd, user_sex, user_age, create_time, update_time,phone,email
        </sql>
        <select id="selectAll" resultType="com.zzuli.entity.User">
            select <include refid="Base_Column_List"/> from user
            <where>
                <if test="userName != null and userName != ''">
                    user_name like '%${userName}%'
                </if>
                <if test="userAge != null and userAge != 0">
                    and user_age  = #{userAge}
                </if>
                <if test="userSex != null and userSex != ''">
                    and user_sex  = #{userSex}
                </if>
            </where>
        </select>
    
    
    </mapper>
    

    service层

     @Override
        public List<User> selectAll(User user) {
            return userMapper.selectAll(user);
        }
    
        public Map<String, Object> selectAll(Integer pageNum, Integer pageSize, User user){
            //通过PageHelper对象设定分页参数
            PageHelper.startPage(pageNum, pageSize);
            //当前页面的数据
            List<User> list = userMapper.selectAll(user);
            //创建PageInfo对象,并将当前页面数据传入,计算分页相关数据
            PageInfo<User> pageInfo = new PageInfo<>(list);
            long total = pageInfo.getTotal();
            Map<String, Object> map = new HashMap<>();
            //本页数据
            map.put("list", list);
            //总数据条目
            map.put("total", total);
            return map;
    
        }
    

    Controller层

    //    分页以及模糊查询
        @RequiresPermissions("sys:user:list")
        @GetMapping("/lists")
        public Result lists (int page,
                              int limit,
                             User user) {
                System.out.println(user);
                Map<String, Object> data = userService.selectAll(page, limit, user);
    
                return Result.succ(200, "查询成功", data);
        }
    

    Result结果封装类

    package com.zzuli.common.lang;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    import java.io.Serializable;
    
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public class Result implements Serializable {       //成功主要看数据
        private int code;  //200为正常                   //失败主要看信息
        private int count;
        private String msg;
        private Object data;
    
    //    工具类
        public static Result succ (int code, String msg, Object data,Integer count){
            Result r = new Result();
            r.setCode(code);
            r.setMsg(msg);
            r.setData(data);
            r.setCount(count);
            return r;
        }
        public static Result succ (int code, String msg, Object data){
            Result r = new Result();
            r.setCode(code);
            r.setMsg(msg);
            r.setData(data);
            return r;
        }
    //    再封装一层
        public static Result succ(Object data){
            return succ(200,"操作成功!",data);
        }
        public static Result succ(Object data,Integer count){
            return succ(200,"操作成功!",data,count);
        }
    
        public static Result fail (String msg){
            return fail(msg,null);
        }
    
        public static Result fail (String msg, Object data){
            return fail(400,msg,data);
        }
    
        public static Result fail (int code, String msg, Object data){
            Result r = new Result();
            r.setCode(code);
            r.setMsg(msg);
            r.setData(data);
            return r;
        }
    }
    

    效果展示

    分页
    模糊查询

    展开全文
  • 这两天为了实现分页模糊查询了很多种方法,最后汇总使用了两个前端框架来写,第一个是Bootstrap,第二个是Layui。 Bootstrap是一种较为粗暴的方法,而Layui则需要自己渲染分页 本篇文章先介绍使用Layui进行模糊分页...

    这两天为了实现分页模糊查询了很多种方法,最后汇总使用了两个前端框架来写,第一个是Bootstrap,第二个是Layui。
    Bootstrap是一种较为粗暴的方法,而Layui则需要自己渲染分页
    本篇文章先介绍使用Layui进行模糊分页查询。比较简单,大牛轻喷嘿嘿嘿嘿嘿嘿嘿
    Layui是一个非常不错的前端框架,上手很快,用起来也很舒服便捷,附上官方网站:https://www.layui.com/

    Layui实现分页查询

    一. 后端代码实现

    通过官方Layui文档我们可以知道后端处理需要将数据转换为Json格式,前端才能获取到(一般Layui识别的数据都是识别Json格式的数据)
    Layui官方文档链接:https://www.layui.com/doc/modules/laypage.html

    后端代码我们还是进行普通的分页查询,从前端获取三个值:

    /**
         *  查询文章消息并分页展示
         */
        public String getPageArticleMsg(HttpServletRequest request, HttpServletResponse response) throws IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("application/json;charset=utf-8");
            PageBean<Article> pageBean = new PageBean<>();
            String currentPage = request.getParameter("page");
            String rows = request.getParameter("limit");
            String search = request.getParameter("search");
            if (currentPage == null || currentPage.equals("")) {
                currentPage = "1";
            }
            if (rows == null ||  rows.equals("") ) {
                rows = "12";
            }
            ArticleService service = new ArticleServiceImpl();
            pageBean = service.findArticleByPage(currentPage,rows,search);
            System.out.println(pageBean.getList());
            Map<String,Object> map = new HashMap<>();
            map.put("data",pageBean.getList()); // 查询到的数据往前端传
            map.put("search",search); // 模糊查询条件值
            map.put("size",pageBean.getTotalCount()); //总的数据条数
            ObjectMapper mapper = new ObjectMapper();
            mapper.writeValue(response.getWriter(),map);
            return null;
        }
    

    page:当前页码
    limit:一页显示的数据值
    search:模糊查询的条件
    这里面的三个值我们从数据库中获取到的,查询到的值将其转换为json格式的数据就好了
    数据库查询过程就不写了,模糊查询原理就是根据这个前端输入的search值,进行数据库中表格字段的模糊查询,大致的sql语句就是

    SELECT * FROM office_article WHERE title LIKE '%search%' OR content LIKE '%search%';
    

    我这里是根据一个输入的值来匹配数据库中不同字段的相似值,当然也可以在前端输入多个值,以相同的方法在数据库中查询我们所需要的数据就好
    后端代码和处理逻辑大概就是这样的

    二. 前端代码实现

    其实Layui渲染最主要的还是前端代码的实现,我这边主要使用的是Ajax请求来实现前端分页页面的渲染的
    在前端页面一共写了四个方法来实现分页查询的功能
    一定要按照官方文档导入相应的js文件和css文件,不然样式会丢和分页不起作用

    2.1 定义变量

    首先定义三个变量

    var pages = 1; // 当前页
    var limits = 12; // 每页显示条数
    var search; // 查询条件参数
    

    接下来我们就开始写方法吧
    首先先写Layui的分页方法
    再次附上官方文档的链接上手超快:https://www.layui.com/doc/modules/laypage.html

    2.2 分页方法编写

    代码:

    //分页方法
        function getPage(datas) {
            layui.use('laypage', function () {
                var laypage = layui.laypage
                    , layer = layui.layer;
                laypage.render({
                    elem: 'test1' // 这个地方是我们分页div里面的ID,不用加#
                    , count: datas.size //数据总数,从服务端得到
                    , limit: 12
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数,比如:
                        console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数
                        pages = obj.curr; // 这里重新赋值当前页
                        limits = obj.limit; //重新赋值当前页面显示的数据条数
                        insertData(); //获取和执行添加数据方法
                    }
                });
            })
        }
    

    上面一些参数的值在代码注释都说明了,不明白的可以看看官方的文档,再次附上链接
    Layui分页官方文档链接

    2.3 查询数据方法编写

    //查询数据方法
        function searchMsg() {
            layui.use(['jquery', 'layer','table'],function(){
                var $ =layui.jquery,
                    layer=layui.layer,
                    table=layui.table;
                //获取输入的value值
                search = $("#condition").val();
                //第一次请求数据,获得总数据
                $.ajax({
                    url: '${pageContext.request.contextPath}/ArticleServlet?method=getPageArticleMsg',
                    type: 'post',
                    data: {page: pages,limit: limits,search: search},
                    dataType: 'json',
                    success: function (datas) {
                        //对获得的数据进行分页
                        getPage(datas);
                    }
                });
            });
        }
    

    忽略我这个菜鸟使用的路径方法,有些小low哈哈哈
    这个方法是我们第一次对Ajax进行请求,通过我们定义的三个变量和后端进行交互获取到数据

    2.4 加载数据的方法

    //加载数据方法
        function insertData() {
            $.ajax({
                url:'${pageContext.request.contextPath}/ArticleServlet?method=getPageArticleMsg',
                type:'post',
                data:{page: pages,limit: limits,search: search},
                dataType:'json',
                success:function (data1) {
                    var arr=[]; // 定义一个数组
                    arr.splice(0,arr.length); //对数组进行增加或删除操作
                    //遍历和后端交互查询到的数据
                    layui.each(data1.data, function(index, item){
                        arr.push(
                            '<div class="cardBox">' +
                            '<div class="headerBox" style="background-color: #5BC0DE;">'+ '<p>' + item.title + '</p>' + '</div>' +
                            '<div class="bodyBox">'+
                            '<p>文章作者:' + item.author + '</p>' +
                            '<p>发布人:' + item.username + '</p>' +
                            '<p>文章状态:' + '已发布' + '</p>' +
                            '<p>发布时间:' + item.release_time + '</p>' +
                            '<p>文章概述:' + item.description + '</p>' +
                            '</div>' +
                            '</div>'
                        );
                    });
                    console.log(arr);
                    //添加到指定的div下
                    $('.content').html(arr);
                }
            });
        }
    

    这个加载数据的方法也就相当于我们在后端获取的数据要在前端显示出来,动态添加在div标签里面显示出来

    2.5 首次访问的方法

    //首次访问方法
        function firstLoad() {
            layui.use(['jquery','laypage', 'layer','table'],function(){
                var $ =layui.jquery,
                    layer=layui.layer,
                    table=layui.table;
                $.ajax({
                    url:'${pageContext.request.contextPath}/ArticleServlet?method=getPageArticleMsg',
                    type:'post',
                    data:{page:pages,limit:limits},
                    dataType:'json',
                    success:function (datas) {
                        getPage(datas);
                    }
                });
            });
        }
    

    这个方法其实可有可无,只是为了方便首次访问页面他会自动加载这个方法

    2.6 总体代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>工作室管理系统</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <%--导入css样式--%>
        <link rel="stylesheet" href="../layui/css/layui.css">
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/publish.css">
        <%--导入图标--%>
        <link rel="shortcut icon" type="text/css" href="../img/1.ico"/>
        <!--导入jquery-->
        <script src="../js/jquery-3.5.1.min.js"></script>
        <script src="../layui/layui.js"></script>
    
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <jsp:include page="header.jsp"></jsp:include>
        <%--垂直导航栏--%>
        <c:if test="${empty sessionScope.user.username}">
            <div class="layui-body" style="left: 0">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">
                    <div class="search bar1 bx">
                        <form class="formDemo" style="margin: auto">
                            <input type="text" placeholder="请输入您要搜索的内容..." name="search" class="condition">
                            <button type="button" class="searchMsg">搜索</button>
                        </form>
                    </div>
                    <div class="container bx">
                        <div class="content"></div>
                        <div style="clear: both;"></div>
                    </div>
                        <%--分页--%>
                    <div class="fy bx" style="text-align: center;margin-top: 50px;padding: 20px">
                        <div id="pageTest1"></div>
                    </div>
                </div>
            </div>
            <div class="layui-footer" style="text-align: center;left: 0;">
                <!-- 底部固定区域 -->
                com.eason.hsy.所长的工作室
            </div>
        </c:if>
        <c:if test="${not empty sessionScope.user.username}">
            <div class="layui-side layui-bg-black">
                <jsp:include page="vertical.jsp"></jsp:include>
            </div>
            <div class="layui-body">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">
                    <div class="search bar1 bx">
                        <form class="formDemo" style="margin: auto">
                            <input type="text" placeholder="请输入您要搜索的内容..." name="search" class="condition">
                            <button type="button" class="searchMsg">搜索</button>
                        </form>
                    </div>
                    <div class="container bx">
                        <div class="content"></div>
                        <div style="clear: both;"></div>
                    </div>
                        <%--分页--%>
                    <div class="fy bx" style="text-align: center;margin-top: 50px;padding: 20px">
                        <div id="pageTest2"></div>
                    </div>
                </div>
            </div>
            <jsp:include page="footer.jsp"></jsp:include>
        </c:if>
    </div>
    <script src="../layui/layui.all.js"></script>
    <script>
        //JavaScript代码区域
        layui.use('element', function(){
            var element = layui.element;
        });
        var pages = 1;
        var limits = 12;
        var search;
    
        //jQuery入口函数
        $(function () {
            //加载页面成功后执行
            firstLoad();
            //给按钮实现点击事件进行条件查询
            $(".searchMsg").click(function () {
                searchMsg();
            });
        })
        //查询数据方法
        function searchMsg() {
            layui.use(['jquery', 'layer','table'],function(){
                var $ =layui.jquery,
                    layer=layui.layer,
                    table=layui.table;
                //获取输入的value值
                search = $(".condition").val();
                //第一次请求数据,获得总数据
                $.ajax({
                    url: '${pageContext.request.contextPath}/ArticleServlet?method=getPageArticleMsg',
                    type: 'post',
                    data: {page: pages,limit: limits,search: search},
                    dataType: 'json',
                    success: function (datas) {
                        //对获得的数据进行分页
                        getPage(datas);
                    }
                });
            });
        }
        //分页方法
        function getPage(datas) {
            layui.use('laypage', function () {
                var laypage = layui.laypage
                    , layer = layui.layer;
                laypage.render({
                    elem: 'pageTest1'
                    , count: datas.size //数据总数,从服务端得到
                    , limit: 12
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数,比如:
                        console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数
                        pages = obj.curr;
                        limits = obj.limit;
                        insertData();
                    }
                });
                laypage.render({
                    elem: 'pageTest2'
                    , count: datas.size //数据总数,从服务端得到
                    , limit: 12
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数,比如:
                        console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数
                        pages = obj.curr;
                        limits = obj.limit;
                        insertData();
                    }
                });
            })
        }
        //加载数据方法
        function insertData() {
            $.ajax({
                url:'${pageContext.request.contextPath}/ArticleServlet?method=getPageArticleMsg',
                type:'post',
                data:{page: pages,limit: limits,search: search},
                dataType:'json',
                success:function (data1) {
                    var arr=[];
                    arr.splice(0,arr.length);
                    layui.each(data1.data, function(index, item){
                        arr.push(
                            '<div class="cardBox">' +
                            '<div class="headerBox" style="background-color: #5BC0DE;">'+ '<p>' + item.title + '</p>' + '</div>' +
                            '<div class="bodyBox">'+
                            '<p>文章作者:' + item.author + '</p>' +
                            '<p>发布人:' + item.username + '</p>' +
                            '<p>文章状态:' + '已发布' + '</p>' +
                            '<p>发布时间:' + item.release_time + '</p>' +
                            '<p>文章概述:' + item.description + '</p>' +
                            '</div>' +
                            '</div>'
                        );
                    });
                    console.log(arr);
                    $('.content').html(arr);
                }
            });
        }
        //首次访问方法
        function firstLoad() {
            layui.use(['jquery','laypage', 'layer','table'],function(){
                var $ =layui.jquery,
                    layer=layui.layer,
                    table=layui.table;
                $.ajax({
                    url:'${pageContext.request.contextPath}/ArticleServlet?method=getPageArticleMsg',
                    type:'post',
                    data:{page:pages,limit:limits},
                    dataType:'json',
                    success:function (datas) {
                        getPage(datas);
                    }
                });
            });
        }
    
    
    </script>
    
    </body>
    </html>
    

    运行效果
    在这里插入图片描述

    以上就是前端框架Layui使用Ajax实现分页模糊查询的全过程,写的有些不好,首次打开请求会有些慢,第二次打开就会快很多,学的不是很多,也找不到原因,以后还需多多学习,加油!!!

    展开全文
  • layui分页+模糊查询

    2019-05-15 17:33:08
    layui.use('upload', function(){ ...我把文本框写入的值传到后台拿到返回值之后怎么展示模糊查询的数据? 是把上面那一片layui的模板代码把他们放在一个方法体里在拿到返回值的ajax方法体里调用还是怎么弄? SOS~
  • 小伙伴们早上好呀,现在姐姐讲解的是如何用layui+asp.net webapi实现分页模糊查询。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200607093600461.png#pic_center) 图[1.0]分页模糊查询示意图 <div ...
    小伙伴们早上好呀,现在姐姐讲解的是如何用layui+asp.net webapi实现分页模糊查询。
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200607093600461.png#pic_center)
    

    图[1.0]分页模糊查询示意图

      <div class="layui-card">
                        <!-- 搜索框-->
                        <div class="layui-card-header">
                            <div class="layui-row">
                                <div class="layui-col-md4">.</div>
                                <div class="layui-col-md4">
                                    <div class="layui-card-header">
                                        <input id="content" type="text" placeholder="搜索标题" class="search-input" />
                                        <a class="a-search" onclick="searchData();"><i class="iconfont" style="font-size:35px;">&#xe654;</i></a>
                                    </div>
                                </div>
                                <div class="layui-col-md4">.</div>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div>
                                <div class="layui-row">
                                    <div class="layui-col-md2">.</div>
                                    <div class="layui-col-md8">
                                        <!-- 显示:法律数据、分页、模糊查询 -->
                                        <!-- 数据初始化bigin -->
                                        <!-- 分页 -->
                                        <div id="paging" style="margin:0 0px 0 180px;"></div>
                                        <!-- 加载数据的地方 -->
                                        <div class="law-dataItem">
                                            <ul class="ul-law-dataItem"></ul>
                                        </div>
                                    </div>
                                    <div class="layui-col-md2">.</div>
                                </div>
                            </div>
                        </div>
                    </div>
    
      <style>
            .a-shishi {
                font-family: 'microsoft yahei','Helvetica Neue', Helvetica, Arial, sans-serif;
                /*上右下左*/
                padding: 0 12px 0 12px;
                font-size: 18px;
                line-height: 39px;
            }
    
            .a-search {
                color: #969696 !important;
                position: absolute;
                width: 30px;
                height: 30px !important;
                margin: 0 0 0 -45px;
                cursor: pointer;
            }
    
            .search-input {
                border-radius: 40px;
                height: 30px;
                font-size: 14px;
                background: #eee;
                border: 1px solid #eee;
                padding: 0 40px 0 20px;
                width: 150px;
            }
        </style>
    
    <script>
        //初始化分页
        $(function () {
            var id = $.getUrlParam('id');//法律类型编号
    
            getPageData(id, $().msgBoardCountByFuzzy(id, ""));
        });
    
        //获得“url”传递过来的参数
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    
        //获得分页总数
        $.fn.msgBoardCountByFuzzy = function getCount(lTId, lTitle) {
            var userNumber;
            var pa_SpecificTemplate = {
                LTId: lTId,             //法律类型编号
                LTitle: lTitle          //具体法律的标题
            }
            $.ajax({
                url: "/api/Law/getCountByLike",
                type: "POST",
                data: JSON.stringify(pa_SpecificTemplate),
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: function (index) {
                    userNumber = index;
                }
            });
            return userNumber;
        };//getCount end
    
        //分页显示法律
        function ShowDataByFuzzy(pageSize, currPage, lTId, lTitle) {
            var law = {
                PageSize: pageSize,  //每页所显示的条数
                PageNo: currPage,    //当前页
                LTId: lTId,          //法律类型编号
                LTitle: lTitle       //具体法律标题
            };
            $.ajax({
                url: "/api/Law/getPageDataByFlow",
                type: "POST",
                async: false,//AJAX设置为异步
                data: JSON.stringify(law),
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    $(data).each(function (index, item) {
                        var data = '<li style="border-bottom: 1px solid #f0f0f0; margin: 0 0 15px; padding: 15px 2px 20px 0; position: relative; word-wrap: break-word;>';
                        data += '<a style="position:absolute;top:50%;margin-top:-60px;right:0;width:125px;height:100px;">';
                        data += '</a>';
                        data += '<div>';
                        //标题
                        data += '<a href="../ChildrenTwo_desk/law-basic-children.html?LTId=' + $.getUrlParam('id') + "&LId=" + item.LId + '" style="cursor:pointer;color:#333;margin:-7px 0 4px;display:inherit;font-size:18px;font-weight:700;line-height:1.5;">' + item.LTitle + '</a>';
                        //文本内容【做了限定】
                        if (item.LContentText.length > 400) {
                            data += '<p style="margin:0 0 8px;font-size:13px;line-height:24px;color:#999;display: block;width:880px;">' + item.LContentText.substr(0, 400) + "......" + '</p>';
                        } else
                            data += '<p style="margin:0 0 8px;font-size:13px;line-height:24px;color:#999;display: block;width:880px;">' + item.LContentText + '</p>';
                        data += '</div>';
                        data += '</div>';
                        data += '</li>';
    
                        $(".ul-law-dataItem").append(data);
                    });//each end
                }
            });//ajax end
        }//ShowData
    
        //法律类型编号、法律具体数据的总数
        function getPageData(TId, total, lTitle) {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage, layer = layui.layer;
                var currPage = 1;
                laypage.render({
                    elem: 'paging',//指向存放分页的容器,值可以是容器ID、DOM对象
                    count: total,//数据总数。一般通过服务端得到
                    curr: currPage,//当前页数
                    limit: 10,//每页显示的条数
                    prev: "<<",//上一页图标
                    next: ">>",//下一页图标
                    theme: "#0099ff",//分页主色
                    layout: ['count', 'prev', 'page', 'next', 'skip'],//设置分页组件显示
                    jump: function (obj, first) {
                        currPage = obj.curr;//当前页数
                        $(".ul-law-dataItem").empty();
                        ShowDataByFuzzy(10, currPage, TId, lTitle);//当前页、每页显示的条数、法律类型编号
                    }
                });
            });
        }//function end
    
        //模糊查询
        function searchData() {
            var id = $.getUrlParam('id');//法律类型编号
            var dataBylike = $("#content").val();
            var getCountByPage = getPageData(id, $().msgBoardCountByFuzzy(id, dataBylike));//得到分页加模糊查询后的总数
            getPageData(id, getCountByPage, dataBylike);
        }//function end
    </script>
    
    在这里插入代码片
    
    /// <summary>
            /// 显示分页(包括模糊查询的操作)
            /// </summary>
            /// <param name="law"></param>
            /// <returns></returns>
            [HttpPost]
            public List<Model.nf_Law> getPageDataByFlow([FromBody]Page.pa_nf_Law law)
            {
                return new BLL.BLL_nf_Law().getPageDataByFlow(law);
            }
    
            /// <summary>
            /// 获得分页的总数(包括模糊查询分页的操作)
            /// </summary>
            /// <param name="law"></param>
            /// <returns></returns>
            [HttpPost]
            public int getCountByLike([FromBody]Page.pa_nf_Law law)
            {
                return new BLL.BLL_nf_Law().getCountByLike(law);
            }
    
      /// <summary>
            /// 分页
            /// 说明:自带“模糊查询”
            /// </summary>
            /// <param name="law"></param>
            /// <returns></returns>
            public List<Model.nf_Law> getPageDataByFlow(Page.pa_nf_Law law)
            {
                Dictionary<string, object> condition = null;
    
                //如果有模糊查询的业务,则如下
                if (!string.IsNullOrEmpty(law.LTitle))
                {
                    condition = getDataLike(new Model.nf_Law() { LTitle=law.LTitle });
                    return new DAL.DAL_nf_Law().getPageDataByFlow(condition,law);
                }
    
                //如果没有模糊查询的业务,就直接返回“-1”(是一个标记,如果有模糊查询的业务就返回那个集合)
                return new DAL.DAL_nf_Law().getPageDataByFlow(new Dictionary<string, object>() { { "-1", "-1" } }, law);
            }
    
            /// <summary>
            /// 获得当前页的总数
            /// </summary>
            /// <param name="pageNo"></param>
            /// <returns></returns>
            public int getCountByLike(Page.pa_nf_Law law = null)
            {
                Dictionary<string, object> condition;
    
                if((law.LTitle!=null) && (law.LTitle != ""))
                {
                    condition = getDataLike(new Model.nf_Law() { LTitle=law.LTitle });
                    return new DAL.DAL_nf_Law().getCountByLike(condition, law);
                }
                condition = getDataLike(new Model.nf_Law() {});
                return new DAL.DAL_nf_Law().getCountByLike(condition, law);
            }
             
            /// <summary>
            /// 分页·拼接模糊查询的部分
            /// 目的:获得模糊查询的数据
            /// 查询条件:法律名称
            /// </summary>
            /// <param name="specificTemplate"></param>
            /// <returns></returns>
            public Dictionary<string, object> getDataLike(Model.nf_Law law=null)
            {
                Dictionary<string, object> conditions = new Dictionary<string, object>();
                
                //模糊查询条件:法律名称
                if(law.LTitle !=null && law.LTitle != "")
                    conditions.Add("LTitle", law.LTitle);
    
                return conditions;
            }
    
        /// <summary>
            /// 分页显示数据
            /// </summary>
            /// <param name="law"></param>
            /// <returns></returns>
            public List<Model.nf_Law> getPageDataByFlow(Dictionary<string, object> condition, Page.pa_nf_Law law)
            {
                /*select * from (select ROW_NUMBER() over(order by LId) as rowno,* from nf_Law 
                  where IsDelete=2 and LTId=1 and 1=1  and LTitle like '%褥%'  ) t where rowno between 1 and 10
                */
                string sql = "";
                //有模糊查询的业务需求
                if (!condition.ContainsKey("-1"))
                {
                    sql = getSqlByConditions("select * from (select ROW_NUMBER() over(order by LId) as rowno,* from nf_Law where IsDelete=2 and LTId=@LTId and 1=1 ", condition,law);
                    sql += " ) t where rowno between @first and @second";
                }
                else
                    sql = "select * from (select ROW_NUMBER() over(order by LId) as rowno,* from nf_Law where IsDelete=2 and LTId=@LTId and 1=1 ) t where rowno between @first and @second";
    
                SqlParameter[] parameters =
                {
                    new SqlParameter("@LTId",law.LTId),//法律类型编号
                    new SqlParameter("@first",law.PageSize * (law.PageNo - 1) + 1),//分页的第一个参数
                    new SqlParameter("@second",law.PageSize * law.PageNo)//分页的第二个参数
                };
                List<Model.nf_Law> laws = new List<Model.nf_Law>();
                Model.nf_Law la = null;
                SqlDataReader dr = SqlOption.GetReaderByProc(sql, System.Data.CommandType.Text, parameters);
                while (dr.Read())
                {
                    la = new Model.nf_Law()
                    {
                        LId=dr["LId"].ToString(),//具体编号
                        LTId =int.Parse(dr["LTId"].ToString()),//法律类型编号
                        IsDelete =int.Parse(dr["IsDelete"].ToString()),//是否删除
                        LTitle=dr["LTitle"].ToString(),//法律标题
                        LContent =dr["LContent"].ToString(),//法律内容
                        LContentText =dr["LContentText"].ToString()//法律文本内容
                    };
                    laws.Add(la);
                }
                dr.Close();
                return laws;
            }
    
            /// <summary>
            /// 获得当前页的总数
            /// </summary>
            /// <param name="pageNo"></param>
            /// <returns></returns>
            public int getCountByLike(Dictionary<string, object> condition, Page.pa_nf_Law law=null)
            {
                //  select COUNT(*) from nf_Law where IsDelete=2 and LTId=1 and 1=1 and LTitle like'%%'
                string sql = getSqlByConditions("select COUNT(*) from nf_Law where IsDelete=2 and LTId=@LTId and 1=1 ", condition, law);
                SqlParameter[] parameters =
                {
                    new SqlParameter("@LTId",law.LTId)//法律类型编号
                };
                if (condition.Keys == null)
                {
                    return (int)SqlOption.GetScalar(sql, System.Data.CommandType.Text, parameters);
                }
                return (int)SqlOption.GetScalar(sql, System.Data.CommandType.Text, parameters);
            }
    
            /// <summary>
            /// 拼接一条SQL语句
            /// 得到部分SQL语句==>and LTitle like'%%'
            /// </summary>
            /// <param name="initSql"></param>
            /// <param name="conditions"></param>
            /// <param name="law"></param>
            /// <returns></returns>
            public string getSqlByConditions(string initSql, Dictionary<string, object> conditions, Page.pa_nf_Law law)
            {
                //查询条件:法律标题(LTitle)
                StringBuilder builder = new StringBuilder(initSql);
    
                foreach (string filedName in conditions.Keys)
                {
                    builder.Append(" and ");
                    builder.Append(filedName);
    
                    //如果键值对集合里面中,键和值分别不为空。则,进行添加【法律标题】
                    if (filedName == "LTitle" && conditions["LTitle"].ToString() != null && conditions["LTitle"].ToString() != "")
                    {
                        builder.Append(" like '%" + law.LTitle + "%' ");
                    }
    
                }
                return builder.ToString();
            }
    

    过多的话,我就不讲了。因为,我的代码是有注释具体说明的。
    就在这里简单说说分页模糊查询的本质吧。
    总数、当前页数、每页所对应的数据集,这三个条件是必须的条件也是很关键的条件。而layui的分页,也就是获取到这三个最关键的值就可以完成最基本的分页了。

    说明:我的代码仅供参考,要是哪位小伙伴觉得还可以优化的地方一定要和我联系哟。😜

    展开全文
  • 主要为大家详细介绍了Layui实现带查询条件的分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在实现数据分页展示时,需要到一些初始值。比如页码、总页数、总记录数、每页记录数、当前页的数据。所以先创建PageHelper类,通过从jsp转发页码和当前页的记录数到servlet,然后进一步调用该类和dao的方法获取初始...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 424
精华内容 169
关键字:

layui分页模糊查询