<div id="data_grid" lay-filter="demo" ></div>　　

table.render({elem: '#data_grid'//,width: 900//,height: 274,cols: [[ //标题栏{field: 'id', title: 'ID', width: 80, sort: true},{field: 'username', title:'用户名',width: 100} //空列,{field: 'password', title: '密码', width: 120},{field: 'gender', title: '性别', width: 150},{field: 'nichen', title: '昵称', width: 150},{field: 'birthday', title: '出生年月', width: 120},{fixed: 'right', width: 215,align:'center', toolbar: '#barDemo'}]],url:url,skin: 'row' //表格风格,even: true,page: true //是否显示分页,limits: [3,5,10],limit: 5 //每页默认显示的数量,done:function(res){userPage.data = res.data;}//,loading: false //请求数据时，是否显示loading});　

$('#sub_query_form').on('click',function () {var queryPo = page.formToJson($('#query_form').serialize());var table = layui.table;table.reload('data_grid', {url: '/getUserList.action',page:{curr:1  //从第一页开始
            },method:'post',where:{queryStr:queryPo},done:function (res) {userPage.data = res.data;}});});　

formToJson:function (data) {data=data.replace(/&/g,"\",\"");data=data.replace(/=/g,"\":\"");data="{\""+data+"\"}";return data;}

<script type="text/html" id="barDemo"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">增加</a><a class="layui-btn layui-btn-xs" lay-event="detail">查看</a><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><!-- 这里同样支持 laytpl 语法，如： -->{{#  if(d.auth > 2){ }}<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{#  } }}
</script>

layui.use('table', function(){var table = layui.table;userPage.tab('/getUserList.action');//监听工具条table.on('tool(demo)', function(obj){var data = obj.data;userPage.data = obj.data;if(obj.event === 'detail'){layer.msg('ID：'+ data.id + ' 的查看操作');}else if(obj.event === 'del'){layer.confirm('真的要删除这条记录么',{icon: 3, title:'确定删除'}, function(index){obj.del();$.post('/doDelete.action?id='+data.id,function (res) {userPage.reload(res);});layer.close(index);});}else if(obj.event === 'add'){layer.open({title:'增加窗口',content:userPage.template,yes:function () {var user = page.formToJson($('#layer_form').serialize());var data = 'user='+user;$.post('/doAdd.action',data,function (res) {userPage.reload(res);});layer.closeAll();}})}else if(obj.event === 'edit'){layer.open({title:'编辑窗口',content:userPage.template,success:function () {$('input[name="id"]').val(userPage.data.id);$('input[name="username"]').val(userPage.data.username);$('input[name="password"]').val(userPage.data.password);$('input[name="gender"]').val(userPage.data.gender);$('input[name="nichen"]').val(userPage.data.nichen);$('input[name="birthday"]').val(userPage.data.birthday);},yes: function(){var mgUser = page.formToJson($('#layer_form').serialize());var data = 'user='+mgUser;$.post('/doEdit.action',data,function (res) {userPage.reload(res);});layer.closeAll();}})}});
});

 @RequestMapping("/getUserList")@ResponseBodypublic PageList<MgUser> getUserList(@RequestParam(required = false,defaultValue = "1") int page,@RequestParam(required = false,defaultValue = "5") int limit,@RequestParam(required = false) String queryStr){QueryPo queryPo = null;if (!StringUtils.isEmpty(queryStr)){   //性别类型转换queryPo = JSONObject.parseObject(queryStr,QueryPo.class);if ("1".equals(queryPo.getGender())){queryPo.setGender("男");}if ("2".equals(queryPo.getGender())){queryPo.setGender("女");}}PageList pageList = new PageList();try {if (!StringUtils.isEmpty(queryPo)){ //中文字转码if(!StringUtils.isEmpty(queryPo.getKeywords())){queryPo.setKeywords(URLDecoder.decode(queryPo.getKeywords(),"utf-8"));}}List<MgUser> userList = userService.getUserList(page,limit,queryPo);   //根据条件查询分页数据
pageList.setCode("0");pageList.setMsg("ok");pageList.setData(userList);int count = userService.countUserByExample(queryPo);pageList.setCount(count);} catch (UnsupportedEncodingException e) {e.printStackTrace();pageList.setCode("-1");pageList.setMsg("数据获取异常");return pageList;}return pageList;}　

public List<MgUser> getUserList(int page , int limit, QueryPo queryPo) {MgUserExample userExample = new MgUserExample();MgUserExample.Criteria criteria = userExample.createCriteria();if(!StringUtils.isEmpty(queryPo)){if (!StringUtils.isEmpty(queryPo.getGender())){criteria.andGenderEqualTo(queryPo.getGender());}if (!StringUtils.isEmpty(queryPo.getKeywords())){criteria.andUsernameLike("%"+queryPo.getKeywords()+"%");}}userExample.setStart((page-1)*limit);userExample.setLimit(limit);List<MgUser> mgUsers = userMapper.selectByExample(userExample);return mgUsers;}　

    private int start;private int limit;public int getStart() {return start;}public void setStart(int start) {this.start = start;}public int getLimit() {return limit;}public void setLimit(int limit) {this.limit = limit;}

<select id="selectByExample" resultMap="BaseResultMap" parameterType="com.wang.entity.MgUserExample" >select<if test="distinct" >distinct</if><include refid="Base_Column_List" />from mg_user<if test="_parameter != null" ><include refid="Example_Where_Clause" /></if><if test="orderByClause != null" >order by ${orderByClause}</if><if test="start !=0 or limit!=0">limit #{start},#{limit}</if></select>