（框架：前端使用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,
					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}
        });
		})
 
 

 
 
开发工具与关键技术：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、点击查询按钮，提交数据，刷新当前表单的数据：
 
borrowbooks.reload()为自动化渲染的重载的意思
 
url:容器
 
where里面传入的参数一个是我们声明的模糊搜索的变量，一个是我们要传到控制器的变量
 
page：{ curr ：1}：从第一页开始查询
 
 
5、控制器写获取数据的方法：
 
 
 
if (!string.IsNullOrEmpty(searchBook)) {  //这里是我们写的一个if判断不为空的时候查询表格数据
 
}
 
linqbook = linqbook  //这里是将linqbook进行添加where筛选条件，利用表的ISBN等于searchBook的条件来查询 
 
 
最后比较重要的是返回页面。