精华内容
下载资源
问答
  • 主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • LayUI数据表格重载与查询功能实现

    千次阅读 2020-01-17 14:13:28
    (框架:前端使用LayUI,后端Spring) 搜索框: 代码: <form action="" class="layui-form"> <div class="layui-inline"> <input class="layui-input" name="name" id="name" placeholder="请...

    (框架:前端使用LayUI,后端Spring)

    搜索框:
    在这里插入图片描述
    代码:

    <form action="" class="layui-form">
    	<div class="layui-inline">
    		<input class="layui-input" name="name" id="name" placeholder="请输入姓名" autocomplete="off">
    	</div>
    	
    	<button type="button" class="layui-btn" data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>搜索</button>
    		
    </form>
    
    

    表格显示:
    在这里插入图片描述
    代码:

    layui.use(['laydate', 'laypage', 'layer', 'table', 'element', 'slider'], function(){
    	var $ = layui.jquery
    	  ,laydate = layui.laydate //日期
    	  ,laypage = layui.laypage //分页
    	  ,layer = layui.layer //弹层
    	  ,table = layui.table //表格  
    	  ,element = layui.element //元素操作
    	  ,slider = layui.slider //滑块
    	  ,tableObj = table.render({});
    	  
      
      //方法级渲染
      table.render({
        elem: '#demo'
        	 ,url:' ${pageContext.request.contextPath}/students/students' //数据接口
        	 ,id: 'testReload'
        	 ,title:'学生成绩表'
        	 ,height: 550
        	 ,limit:10
        	 ,toolbar: 'default'
        ,cols: [[
           {align:'center', title:  '学生信息',colspan:6}
           ,{align:'center', title: '学生成绩',colspan:4}    		   
          ] ,[
    
    	{type: 'checkbox', fixed: 'left'}
    	,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
    	,{field: 'sno', title: '学号', width:150}
    	,{field: 'name', title: '姓名', width:150}
    	,{field: 'major', title: '专业', width: 100}
    	,{field: 'classN', title: '班级', width:100,}     
    	,{field: 'subject1', title: 'C语言', width:100, sort: true}  
    	,{field: 'subject2', title: '高数', width: 100, sort: true}
    
    	,{field: 'subject3', title: '英语', width: 100, sort: true}
    	,{field: 'subject4', title: '大学物理', width: 101, sort: true}
    	,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    	]]
        
        //,page: true
        ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
        	layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局 
            ,limits:[5,10,15,20,100]
            ,first: false //不显示首页
            ,last: false //不显示尾页
            
          }
        	 ,method:'post'
        	 
      });
    

    其中,url:' ${pageContext.request.contextPath}/students/students'是与后端联系的路径
    在这里插入图片描述
    在这里插入图片描述
    实现重载部分:

     var $ = layui.$, active = {
        reload: function(){
          var name= $('#name');
          
          //执行重载
          table.reload('testReload', {	//testReload为table中的id
        	 
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              
              name:name.val(),
             
              }
            }
          ),'data';
        }
      };
      
      $('#search').on('click', function(){	//search为搜索button中设置的id名
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    

    后端代码:
    (Controller)

    @ResponseBody
    	@RequestMapping(value = "students")
    	public Map<String,Object> showStudents(int page, int limit,String name) throws IOException{
    		List<Students> students = studentsService.getStudents();
    		List<Students> student = studentsService.getStudentsCount(page,limit); 
    		List<Students> stu=studentsService.getStu(name);
    		
    		Map<String,Object> tableData =new HashMap<String,Object>();
    		tableData.put("code", 0);
    		tableData.put("msg", "");
    		System.out.println(name);
    		
    		//System.out.println("tableData:"+tableData);
    		if(name==null&&classN==null){
    		tableData.put("count", students.size());
    		tableData.put("data", student);
    		}else 
    		{			
    			tableData.put("count", stu.size());
    			tableData.put("data", stu);
    			
    		}
    			
    	    return tableData;
    		 
    	    }
    

    (service)

    public List<Students> getStudentsCount(int page, int pageSize) {
    			
    			return studentsDao.getStudentsCount(page, pageSize);
    		}
    public List<Students> getStu(String name){
    			return studentsDao.getStu(name);
    		}
    

    (DAO接口的实现)

    @Override
    	public List<Students> getStudentsCount(int page, int pageSize) {
    		int start = (page-1)*pageSize;
    		String sql = "select * from students limit "+start+" ,?";
    		RowMapper<Students> rowMapper=new BeanPropertyRowMapper<Students>(Students.class);
    		List<Students> students = jdbcTemplate.query(sql, rowMapper,pageSize); 
    		return students; 
    	}
    
    	@Override
    	public List<Students> getStu(String name) {
    		String sql = "select * from students where name=?";
    		RowMapper<Students> rowMapper=new BeanPropertyRowMapper<Students>(Students.class);	//RowMapper 接口
    		List<Students> students = jdbcTemplate.query(sql, rowMapper,name); 	
    		return students; 
    	}
    
    展开全文
  • layui数据表格数据绑定加分页代码 最近使用layui数据表格感觉特别方便,一段代码直接绑定数据加上分页加载数据 直接上代码 layui.use(['table', 'laypage'], function() { var laypage = layui.laypage, ...

    layui数据表格数据绑定加分页代码

    最近使用layui数据表格感觉特别方便,一段代码直接绑定数据加上分页加载数据 直接上代码

    layui.use(['table', 'laypage'], function() {
    				var laypage = layui.laypage,
    					table = layui.table;
    					
    					table.render({
                elem: '#demo'
                , url: '/api/user/getUsers'//请求的数据接口
                , toolbar: false
                , defaultToolbar: false
                , page: true,
                id: 'dataTableMain'
                //加载数据
                , cols: [[
                    {type: 'checkbox', title: '全选',field:'cb1111'}
                    , {field: 'loginAccount', title: '账号'}
                    , {field: 'userCompany', title: '公司'}
                    , {field: 'linkman', title: '联系人'}
                    , {field: 'userPhone', title: '联系电话'}
                    , {field: 'userEmail', title: '邮箱'}
                    , {field: 'userType', title: '营业执照'},
                    {title: '审核', toolbar: '#demoBar'}
                ]],
                response: {
                    statusName: 'code'
                    , statusCode: 10000
                    , msgName: 'msg'
                    , countName: 'count'
                    , dataName: 'data'
                },
                request: {
                    pageName: 'currentPage',
                    limitName: 'size'
                }
                //转换数据格式
                , parseData: function (res) {
    							console.log(res)
                    return {
                        "code": res.code,
                        "msg": res.message,
                        "count": res.data.total,
                        "data": res.data.records
                    };
                }
    //请求条件
                , where: {isDelete: 0}
            });
    		})

     

    展开全文
  • 在关联表查询时,往往会出现一对多的关系,这种表格一般情况下不适合联表查询,经常会拆分为两个表格进行查询,这种时候就适用此功能! 代码如下: var tableSupplier;//供应商 var tableSupplierLinkman;//供应商...

    开发工具与关键技术:MVC、C#、Layui
    作者:张俊辉
    撰写时间:2019年04月17日

    • 在关联表查询时,往往会出现一对多的关系,这种表格一般情况下不适合联表查询,经常会拆分为两个表格进行查询,这种时候就适用此功能!
      代码如下:
    var tableSupplier;//供应商
    var tableSupplierLinkman;//供应商联系人
    //表格渲染
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        //供应商信息表
        tableSupplier = table.render({
            elem: '#Supplier'
          , method: 'post'
          , toolbar: '#toolbarDemo'
          , id: 'idTest'
          , url: 'SelectSupplier' //数据接口
          , page: true //开启分页
          , cols: [[ //表头
           //具体相关参数请产考Layui说明文
          ]]
          , limit: 5
            , response: {
                statusName: 'success' //规定数据状态的字段名称,默认:code
              , statusCode: true //规定成功的状态码,默认:0
              , countName: 'totalRows' //规定数据总数的字段名称,默认:count
            }
            , request: {
                pageName: 'curPage' //页码的参数名称,默认:page
              , limitName: 'pageSize'
            }
       });
    
        //供应商联系人表
        tableSupplierLinkman = table.render({
            elem: '#SupplierLinkman'
          , method: 'post'
          , id: 'idTest2'
          , url: 'SelectSupplierLinkman' //数据接口
          , toolbar: '#toolbarDemo'
          , height: 215
          , page: false //开启分页
          , cols: [[ //表头
            具体相关参数请产考Layui说明文档
          ]]
            , response: {
                statusName: 'success' //规定数据状态的字段名称,默认:code
              , statusCode: true //规定成功的状态码,默认:0
              , countName: 'totalRows' //规定数据总数的字段名称,默认:count
            }
            , request: {
                pageName: 'curPage' //页码的参数名称,默认:page
              , limitName: 'pageSize'
            }
        });
        //监听供应商信息行单击事件
        table.on('row(Supplier)', function (obj) {
            tableSupplierLinkman2 = table.reload('idTest2', {
                where: { //设定异步数据接口的额外参数,任意设
                    SupplierID: obj.data.SupplierID
                }
            });
        });
    });
    
    

    效果图如下:在这里插入图片描述

    展开全文
  • 1、由于layui数据表格的初始化 参数解析: elem:容器ID url:请求数据的路径, cols:就是列的内容 2、创建这个查询的点击事件 3、获取表单模糊搜索的id 4、点击查询按钮,提交数据,刷新当前...

    1、由于layui的数据表格的初始化

    参数解析:

    elem:容器ID

    url:请求数据的路径,

    cols:就是列的内容                 

     2、创建这个查询的点击事件

    3、获取表单模糊搜索的id

    4、点击查询按钮,提交数据,刷新当前表单的数据:

    borrowbooks.reload()为自动化渲染的重载的意思

    url:容器

    where里面传入的参数一个是我们声明的模糊搜索的变量,一个是我们要传到控制器的变量

    page{ curr 1}:从第一页开始查询

    5、控制器写获取数据的方法:

    if (!string.IsNullOrEmpty(searchBook)) {  //这里是我们写的一个if判断不为空的时候查询表格数据

    }

    linqbook = linqbook  //这里是将linqbook进行添加where筛选条件,利用表的ISBN等于searchBook的条件来查询

    最后比较重要的是返回页面。

    展开全文
  • LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例 做出数据表格 示例根据官网表格展示 在layui官网 数据表格示例中 https://www.layui.com/demo/ 修改部分内容 例如表格上方需要...
  • 项目总结19:layui实现表格渲染、表格搜索、数据获取 1-参考资料:https://www.layui.com/demo/table/reload.html 2-本次总结的是layui的表格功能,主要功能如下: 对后台的传来的数据进行表格进行分页展示,...
  • 主要为大家详细介绍了layui实现数据表格table分页功能、异步加载,表格渲染,含条件查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码 加载数据表格 按照layui官方文档示例 HTML部分 &lt;table id="demo" lay-filter="test&...
  • LayUI数据表格查询与重载

    千次阅读 2020-02-10 15:14:41
    服务端返回查询结果,前端数据表格方法级渲染的重载。 如果未输入数据点击查询按钮,弹窗提示用户输入数据。 前端数据展示与重载 编写输入框与查询按钮,监听按钮点击事件。 <div class="layui-inline layui-sho...
  • } //执行查询操作 返回datatable 条件查询 public static DataTable Search(string field, string tableName, string where) { DataTable dt = null; using (SqlConnection con = new SqlConnection(constr)) { ...
  • Layui实现条件查询

    万次阅读 热门讨论 2019-08-16 17:59:32
    带分页的多条件查询条件查询表单 <form class="layui-form" action=""> <div class="layui-inline"> <label class="layui-form-label">年级</label> <div class=...
  • layui 数据表格实现关键字搜索

    千次阅读 2019-08-29 22:30:06
    参考:https://blog.csdn.net/weixin_41606652/article/details/84204334 ... <div class="demoTable" style="margin-top:10px;"> 搜索: ...div class="layui-inline">...input class="layui-...
  • 前端使用layui框架、后端使用flask框架,实现数据表格的按条件查询实现添加、删除、修改数据同步回显到页面
  • 搜索商户: <div class=layui-inline> <input class=layui-input name=keyword id=demoReload autocomplete=off> <button class=layui-btn data-type=reload>搜索</button></div> 在js加入初始...
  • php+layui数据表格实现数据分页渲染

    千次阅读 2019-04-25 14:27:00
    1 <table class="layui-hide layui-table" id="spu-... 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等 1 <!-- 拼接图片 --> 2 <script type="tex...
  • layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一:引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css"> <script src="${ctxPath}/...
  • layui实现数据表格table的搜索功能

    千次阅读 2021-01-30 19:16:39
    layui根据特定信息对表格进行搜索并显示效果实现html部分js部分注意总结 效果 先放效果图 此处根据“角色名称”进行搜索,得到效果 实现 html部分 此处注意!!需要要为input、table里边加上“id”属性,在js部分...
  • 本文主要解决了layui数据表格数据导出, 将原本只能导出本页数据的导出功能扩展为可以定义文件名且导出全部数据。 (没有使用第三方组件且和数据表格共用了一个后台接口) 第一步:获取所有的数据条数 var ...
  • layui.use(['form','laydate','layer','table','laytpl'],function(){var laydate = layui.laydate;var layer = layui.layer;var table = layui.table;var laytpl = layui....//---SPU数据-----------------------...
  • 这几天一直在使用layUI进行开发,下面我的一个界面,源代码分享给大家,希望大家少走弯路。 先上图片,下面的所有功能都实现了。 前端源代码: <!DOCTYPE html> <html> <head> <meta ...
  • Layui数据表格的多条件查询

    万次阅读 2019-06-28 08:21:15
    1、首先第一步写好触发...4、由于layui数据表格已经初始化了: 参数解析: elem:为表格的ID, url:请求数据的路径 id:为返回数据中的主键ID,比如我的客户表的客户ID,就可以放在这里 method:为提交的方式,...
  • Layui数据表格的构建

    2019-04-14 09:54:29
    开发工具与关键技术:VS ;...这么做的好处是为了避免后期在使用较为庞大数据库时,查询所得数据数据表格中显示;layui中有一个将数据分页的方法,在这种情况下;使用layui插件构建数据表格数据的呈...
  • layui table组件按条件查询实现

    千次阅读 2020-02-17 18:29:33
    主要是在后台实现数据条件查询,然后将按条件查询出来的结果返回给前端,重载表格。 这里实现环境我使用的是.net mvc框架。 1.首先定义查询按钮; <button id="reloadBtn" class="layui-btn" data-type="reload...

空空如也

空空如也

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

layui实现表格数据的条件查询