# 前端分页排序 ## 7.1.5.前端分页排序 ~~~ tableX.renderFront({ elem: '#xTable1', url: '../../json/userAll.json', page: true, cols: [[ {field: 'nickName', title: '用户名', sort: true}, {field: 'sex', title: '性别', sort: true} ]] }); ~~~ 仅仅是把table.render换成`tableX.renderFront`就可以有前端分页和排序功能了，参数跟layui表格的参数一样，url方式你的接口可以返回全部数据，前端来分页，也支持data方式。 前端模糊搜索： ~~~ <input tb-search="xTable1" class="layui-input icon-search"/> ~~~  在页面任意位置加入上面输入框，通过`tb-search`关联表格，就实现了对表格的模糊搜索功能。 还可以增加name属性来设置搜索时只搜索某些字段，多个字段通过逗号分隔： ~~~ <input tb-search="xTable1" name="sex,phone" class="layui-input icon-search"/> ~~~ 刷新功能： ~~~ <button tb-refresh="xTable1" class="layui-btn">刷新</button> ~~~  在页面任意位置加入上面按钮，通过`tb-refresh`关联表格。 也可以通过js刷新： ~~~ // url方式渲染的只能用此方法刷新 var insTb = tableX.renderFront({url: 'xxx'}); insTb.reloadUrl(); // data方式渲染的只能用此方法刷新 var insTb = tableX.renderFront({data: []}); insTb.reloadData({data: dataList, page: {curr: 1}}); ~~~ 前端排序：  前端排序如果有field字段，会根据field字段的值来排序，如果有templet会根据templet转换后的值排序， templet可能会返回表单元素，比如switch开关等，这些元素无法用来排序，可以通过`export-show`和`export-hide`来控制。 ~~~ <!-- switch开关列 --> <script type="text/html" id="tableState"> <input type="checkbox" lay-skin="switch" lay-text="正常|锁定" lay-filter="ckState" value="{{d.userId}}" {{d.state==0?'checked':''}}/> <div class="export-show">{{d.state==0?'正常':'锁定'}}</div> </script> <!-- icon图标列 --> <script type="text/html" id="tableState"> <div class="export-hide">{{d.state==0?'<i class="layui-icon layui-icon-ok"></i>':'<i class="layui-icon layui-icon-close"></i>'}}</div> <div class="export-show">{{d.state==0?'正常':'锁定'}}</div> </script> ~~~ * `export-show`  排序和导出时有效，表格展示时屏蔽 * `export-hide`  表格展示时有效，排序和导出时屏蔽