精华内容
下载资源
问答
  • Layui分页查询

    2019-05-16 21:41:07
    先是在控制器写,写需要获取的数据,在图下代码之前是数据库的查询,筛选条件,数据判断,之后就是图中代码,先是获取总的行数,再分页查询,再实例化VO,传入总行数,分页查询,最后返回Json。 HTML部分再是表格的...

    作者:卢远平

    撰写时间:2019.5.13

    先是在控制器写,写需要获取的数据,在图下代码之前是数据库的查询,筛选条件,数据判断,之后就是图中代码,先是获取总的行数,再分页查询,再实例化VO,传入总行数,分页查询,最后返回Json。
    在这里插入图片描述

    HTML部分再是表格的初始化前面内容只是为了显示表格数据,而再表头结束后的page才是分页,第一个值表示每页有多少条数据,第二个值表示每页条数的设置。

    在这里插入图片描述

    分页效果图。每页有10条数据。
    在这里插入图片描述

    第二页,也是每页10条数据
    在这里插入图片描述

    调节每页数据显示条数,实现每页条数的设置。选中5条每页,页面只会显示对应的设置条数。

    在这里插入图片描述

    展开全文
  • layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一:引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css"> <script src="${ctxPath}/...

    layui实现自带的table组件分页功能,异步加载,表格渲染,含条件查询。


    一:引入layUI的相关资源

    <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css">
    <script src="${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>
    

    二:html页面代码

    搜索表单:

    <div class="layui-row">
    	<form class="layui-form layui-col-md12 we-search">
    		项目搜索:
    		<div class="layui-inline">
    			<input type="text" name="projectName" id="projectName" placeholder="项目名称" autocomplete="off" class="layui-input">
    		</div>
    		<div class="layui-input-inline">
    			<select name="businessOperatorId" id="businessOperatorId" lay-verify="" lay-search>
    				<option value="">业务员</option>
    			</select>
    		</div>
    		<div class="layui-input-inline">
    			<select name="mftRepresentativeId" id="mftRepresentativeId" lay-verify="" lay-search>
    				<option value="">厂家代表</option>
    			</select>
    		</div>
    		<div class="layui-input-inline">
    			<select name="channelId" id="channelId" lay-search>
    				<option value="">渠道</option>
    			</select>
    		</div>
            <div class="layui-input-inline">
                <select name="customerId" id="customerId" lay-search>
                    <option value="">客户</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="projectPhase" id="projectPhase" lay-search>
                    <option value="">项目阶段</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="goodsCondition" id="goodsCondition" lay-search>
                    <option value="">货物情况</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="implementCondition" id="implementCondition" lay-search>
                    <option value="">实施情况</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="payCondition" id="payCondition" lay-search>
                    <option value="">收款情况</option>
                </select>
            </div>
    
    		<div class="layui-inline">
    			<input class="layui-input" placeholder="开项时间" name="startTime" id="startTime">
    		</div>
    		<div class="layui-inline">
    			<input class="layui-input" placeholder="结项时间" name="endTime" id="endTime">
    		</div>
    		<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
    	</form>
    </div>
    

    【注】以上搜索表单中select具体下拉选项的数据为Ajax异步加载,代码就不贴了。

    数据表格:

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

    三:后台接收分页参数以及查询条件,获取并返回数据

    主要注意下:
    page: 前台分页插件传入的当前页数,
    limit: 前台分页插件传入的每页个数,
    projectInfo :接收前台传入的查询条件的实体
    jsonResult :后台返回的相关数据的响应实体

    @ResponseBody
        @RequestMapping("/project/list")
        public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){
    
            JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo);
            return jsonResult;
        }
    

    后台响应类必须包含code与count字段,因为前台layui会自动获取

    自定义后台数据响应实体 JsonResult

    package com.bhy702.jfkj.common.util;
    
    /**
     * JSON结果响应
     *
     */
    @Data
    public class JsonResult {
    
        private static final String SUCCESS = "成功";
        private static final String ERROR = "失败";
        
        /**
         * 响应状态code,因为前台layui默认0为响应成功,所以此处默认为0
         */
        private Integer code = 0;
    
        /**
         * 数据总条数
         */
        private Long count = 0L;
    
     	/**
         * 返回是否成功
         */
        private Boolean result = false;
        
        /**
         * 返回提示信息
         */
        private String msg = "";
    
        /**
         * 返回数据信息
         */
        private Object data;
    
        private JsonResult() {
        }
    
        /**
         * 成功的响应
         * 
         * @return
         */
        public static JsonResult success() {
            return result(true, SUCCESS, null,null);
        }
    
        public static JsonResult success(String msg) {
            return result(true, msg, null,null);
        }
    
        public static JsonResult success(Object data) {
            return result(true, SUCCESS, data,null);
        }
        public static JsonResult success(Object data,Long count) {
            return result(true, SUCCESS, data,count);
        }
    
    
        public static JsonResult success(String msg, Object data) {
            return result(true, msg, data,null);
        }
    
        public static JsonResult success(String msg, Object data,Long count) {
            return result(true, msg, data,count);
        }
    
        /**
         * 失败的响应
         * 
         * @return
         */
        public static JsonResult error() {
            return result(false, ERROR, null,null);
        }
    
        public static JsonResult error(String msg) {
            return result(false, msg, null,null);
        }
    
        public static JsonResult error(Object data) {
            return result(false, ERROR, data,null);
        }
    
        public static JsonResult error(Object data,Long count) {
            return result(false, ERROR, data,count);
        }
    
        public static JsonResult error(String msg, Object data) {
            return result(false, msg, data,null);
        }
    
        public static JsonResult error(String msg, Object data,Long count) {
            return result(false, msg, data,count);
        }
    
        public static JsonResult result(Boolean result, String msg, Object data,Long count) {
            JsonResult jsonResult = new JsonResult();
            jsonResult.setResult(result);
            jsonResult.setMsg(msg);
            jsonResult.setData(data);
            jsonResult.setCount(count);
            return jsonResult;
        }
    }
    

    四:渲染table表格数据

    主要注意下:
    elem: ‘#projectList’: projectList为表格id,
    page: true: 设置表格分页,
    url: ‘/project/list’ :数据请求url
    fixed: true:固定列
    done : function(res, curr, count){…}:数据加载成功后的回调函数

    var tableIns = table.render({
    		elem: '#projectList',
    		cellMinWidth: 150,
    		url: '/project/list',
    		cols: [
    			[{
    				// type: 'checkbox',fixed: 'left'
                    checkbox: true, fixed: true
    			}, {
    				field: 'id',title: 'ID',align:'center',width:50,fixed: true
    			}, {
    				field: 'name',title: '项目名称',align:'center',fixed: true
    			}, {
    				field: 'businessOperatorStr',title: '经办人',align:'center',fixed: true
    			}, {
    				field: 'mftRepresentativeStr',title: '厂家代表',align:'center',fixed: true
    			}, {
    				field: 'channelStr',title: '渠道',align:'center',fixed: true
    			}, {
    				field: 'customerStr',title: '客户',align:'center',fixed: true
    			}, {
                    field: 'projectPhaseStr',title: '项目阶段',align:'center',fixed: true
    			}, {
    				field: 'amount',title: '金额',align:'center'
    			}, {
    				field: 'businessSource',title: '商机来源',align:'center'
    			}, {
    			   field: 'mainProduct',title: '主要产品',align:'center'
    			}, {
    			   field: 'productLineStr',title: '产品线',align:'center'
    			}, {
    			   field: 'goodsConditionStr',title: '货物情况',align:'center'
    			}, {
    			   field: 'implementConditionStr',title: '实施情况',align:'center'
    			}, {
                    field: 'payAmount',title: '已付金额',align:'center'
                }, {
    			   field: 'payConditionStr',title: '收款情况',align:'center'
    			}, {
    			   field: 'startTime',title: '开项时间',align:'center'
               }, {
    			   field: 'endTime',title: '结项时间',align:'center'
               }, {
    			   field: 'remark',title: '备注',align:'center'
    			}, {
    			   field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true
    			}]
    		],
    		id: 'testReload',
    		// skin: 'row', //表格风格
    		even: true, //隔行背景
    		event: true,
    		page: true,
            done : function(res, curr, count){
                $('#totalProjectNumber').text("共有数据:"+count+" 条");
                table_data=res.data;
                layer.closeAll('loading');
                // layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
                // layer.close(index);    //返回数据关闭loading
            }
    	});
    

    五:监听搜索表单的提交事件,并重新渲染table表格数据

    主要注意下:
    sreach: 为搜索按钮对应的事件过滤器,lay-filter=“sreach”,
    where 中的数据对应搜索表单,为搜索的条件,后台使用这些条件进行筛选数据返回

    form.on('submit(sreach)', function(data){
    
        	layer.load();
            tableIns.reload({
    			url:"/project/list",
    			page: {
                    curr: 1 //重新从第 1 页开始
                },
    			where:{
    				name:data.field.projectName,
                    businessOperatorId:data.field.businessOperatorId,
    				mftRepresentativeId:data.field.mftRepresentativeId,
    				channelId:data.field.channelId,
                    customerId:data.field.customerId,
                    projectPhase:data.field.projectPhase,
                    goodsCondition:data.field.goodsCondition,
                    implementCondition:data.field.implementCondition,
                    payCondition:data.field.payCondition,
                    startTime:data.field.startTime,
                    endTime:data.field.endTime
    			}
            });
    
            return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });
    

    六:效果展示

    在这里插入图片描述


    欢迎访问本文的个人博客链接: https://br-bai.github.io/2019/06/10/layui实现数据表格table分页功能(ajax异步),含条件查询

    展开全文
  • 例如 需要将当前分页数据或全部数据导出为Excel 1、导出当前页数据:使用jqGrid的 var data = $...2、导出所有分页总数据:首先获取当前所用到的查询条件 var queryData = $("#table_list").jqGrid('getGridPara...

    例如

    需要将当前分页数据或全部数据导出为Excel

    1、导出当前页数据:使用jqGrid的  var data =   $("#table_list").jqGrid('getRowData'); 可获取当前页所有数据

    2、导出所有分页总数据:首先获取当前所用到的查询条件 

          var queryData = $("#table_list").jqGrid('getGridParam','postData');然后使用条件去掉查询接口查询出所有数据(由于楼主要通过导入Excel的内容做查询条件,有点复杂);

    接着layui出场了,不过要首先载入excel.js ,通过https://gitee.com/wangerzi/layui-excel去下载

    function exportExcel() {
        var queryData = $("#table_list").jqGrid('getGridParam','postData');
    //将分页的信息修改掉,要不然不能查询出所有数据
        queryData.current=1;
        queryData.rowCount=20000;
        $.ajax({
            url: '${base}/merak/signorder/listPage'
            ,dataType: 'json'
            ,type: 'POST'
            ,data:queryData
            ,success(res) {
                if(!res.success){
                    FTK.alert("获取数据失败",0);
                    return;
                }
                var allData = res.data.data;
                if(allData.length==0){
                    FTK.alert("暂无数据",1);
                    return;
                }
    //引入需要的excel.js
                layui.config({
                    base: '${base}/statics/js/'
                }).use('excel', function () {
    //设置excel表头
                    allData.unshift({orderNo:'单号',signFlowId:'流程号',manufacturer:'厂商',templateNo:'模板编号',templateName:'模板名称',
                        contractNo:'厂商合同编号',signer:'签署者',signTime:'签署时间'});
    //导出
                    layui.excel.exportExcel({sheet1:allData},'订单信息.xlsx','xlsx');
                });
            }
            ,error() {
                FTK.alert("获取数据失败",0);
            }
        });

     

    
     
    
     
    展开全文
  • 一、Layui中的表格分页(两种方法) 方法一: 步骤一:在视图中,开启分页(默认:false),注:从layui 2.2.0开始 ,支持闯入一个对象,里面可包含laypage组件所有支持的参数(jump,elem除外),它的类型可为:...

    一、Layui中的表格分页(两种方法)

    方法一:

    步骤一:在视图中,开启分页(默认:false),注:从layui 2.2.0开始 ,支持闯入一个对象,里面可包含laypage组件所有支持的参数(jump,elem除外),它的类型可为:Boolean 或 object

    步骤二:在接口地址中,默认有两个参数(page,limit)page 代表当前页数,limit 代表每页显示数据条数

    步骤三:哪个位置开始的公式:(page-1)*limit       如:(1-1)*5=0

    哪个位置结束的公式:page*limit-1       如:1*5-1=4

    分页中的重要知识点:

    1. Skip()跳过序列中指定数量的元素,然后返回剩余的元素
    2. Take()从序列的开头返回指定数量的连续元素

    方法二:

    步骤一:与方法一的步骤一,一样,无需改变

    步骤二:先创建一个新的文件夹,再定义一个实体类,将我需要的字段,所有的一些东西都封装到这个实体类中,后面就可以直接通过这个实体类去接收

    步骤三:再通过这个类,去实例化一个对象

    步骤四:用这个类去接收数据

    二、条件查询

    步骤一:在body标签里添加一个文本框和一个查询按钮

    步骤二:定义一个事件,在onclick里面调用这个方法,再通过获取id,获取里面的值

    步骤三:在控制器中,仍然可以调用SelectStudent()这个方法,但需要在这个方法里面再添加参数,再做一个条件筛选

    步骤三:重载(两种方法)

    方法一:

    把在layTable.render中的url注释,把data取消注释;

    在条件查询中,利用表格的重载layTable.reload(‘ID’,{ }),在花   括号里面添加url,where

    而SelectStudent()这个方法不仅在点击的时候调用,还有在layTable.render后面去调用,此时调用的是一个空的,查询全部

    方法二:

    先定义一个变量tbStudent,获取渲染值

    在条件查询里,利用表格的重载layTable.reload({……配置项 }),在花   括号里面添加url,where

    步骤四:最后,在文本框里,输入完,自动执行SearchStudent()这个方法

    三、自定义列模板

    步骤一:在表头处,添加一个参数templet自定义列模板,它的类型是一个字符串(String),模板遵循laytpl语法,这边templet接收的属性值,就是一个方法名称

    步骤二:在后面,再定义这个方法,在操作里需要添加什么,直接拼接成一个字符串,再返回;而rowData返回的是一个对象

     

    展开全文
  • SpringBoot +JPA Data 多条件分页查询显示在layui数据表格上 今天我写项目遇到这个问题,看到啦很多大佬们也都写啦,但是我看了好久才看懂,所以我就献丑一下,思路大底都是一样的,各位大佬见丑啦,因为jpa分页查询...
  • 1、到官网下载layui,把layui的js和css文件引入到自己的项目中,地址: https://www.layui.com/ 2、前台所需要的html (1)显示表格的html <table class="layui-hide" id="test" lay-filter="demo"><...
  • layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一、引入layUI的相关资源 <link rel=stylesheet href=${ctxPath}/vendor/layui/css/layui.css > [removed][removed] 二、html页面代码 ...
  • 【热身话题】  在开发的过程中,大量...用表格展示数据的同时会提供丰富的查询条件去筛选相应的数据。由于大量的数据,一般都会使用分页的形式去查询数据,框架中带有这种功能。  【底部分页栏效果图】  【上...
  • 看懂此文需要一定的layui基础,用了layui也有一年多了,因为工作的原因,前端代码很少写,以前经常是用layui做后台管理系统,所以分页都是用Layui封装好的表格。...以前的layui表格分页查询: ...
  • Layui表格绑定

    2019-04-26 22:33:11
    为了用户在页面上更方便查询数据,就使用了一个表格来绑定数据库的数据,把数据显示在页面上。Layui封装了一个很方便的表格,可以固定表头、行、左列、右列;可以根据个人需求来显示数据的分页分页的条数、总共的...
  • * 进行分页查询 */ //获取总条数 public Integer totalCount(@Param("a_username") String a_username, @Param("a_describe") String a_describe,@Param("a_id") ...
  • 总体思路:  1.前台查询的时候将当前页和页大小传到后台 ... 准备查询条件的表单,与数据表格,分页div (同时需要在查询条件表单中准备隐藏当前页与页大小的文本框) <div class="layui-row"> ...
  • 最近碰到需要将excel里的内容作为批量查询条件,然后使用jqGrid分页查询 <input type="button" value="Excel批量搜索" class="btn btn-info" id="doBatchSearch"/> 使用layui上传文件功能,在确认文件后在...
  • 前端采用Layui框架渲染,对页码和条数传参给后台做条件查询; 得到后端返回数据,对前端表格进行重载刷新 顶部搜索栏HTML <div class="layui-col-md12 x-so"> <input class="layui-input" autocomplete=...
  • 3,在控制器写条件筛选,分页查询数据,查询总条数,Layui Table所需的数据格式 4,在视图写多条件查询,查询点击事件,获取页面输入的数据,表格重载 二,重置步骤 1,在视图写重置点击事件,重置表单,表格重载 三,新增步骤...
  • (二)旅客电子票证历史记录表 关于旅客电子票证历史记录表,首先要个它一个重置表单,给重置表单点击按钮,进行表格数据...多条件查询table,获取input内容并判断,对票号、旅客姓名、航班号、航班日期、起飞和到达
  • 本项目展示部分主要使用layui小型轻巧的前端框架构建,主要使用到layui的动态数据表格分页渲染、弹出层模块、轮播模块、评分模块、文件上传模块、laydate日期选择模块、表单验证等等,layui比bootstrap感觉更易上手...

空空如也

空空如也

1 2
收藏数 26
精华内容 10
关键字:

layui分页查询条件表格