# 前端分頁排序 ## 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`? 表格展示時有效，排序和導出時屏蔽