項目總結17-使用layui table分頁表格

項目總結17-使用layui table分頁表格總結

 

前言

　　在項目中，需要用到分頁的表格來展示數據，發現layui的分頁表格，是一個很好的選擇；本文介紹layui table分頁表格的前后端簡單使用

關鍵字

　　layui   table   分頁

正文

1-外部引用

　　使用layui table 需要引用layui.all.js 和  layui.css

　　下載地址：https://www.layui.com/

　　我是直接將整個layui文件夾全部加入到項目中

2-前端代碼

實例化表格

    <table id="fansTable" lay-filter="test"></table><%--layui初始化需要的table--%>
        <script>
        layui.use('table', function(){
            var table = layui.table;
            //第一個實例
            table.render({
                elem: '#fansTable',//實例化需要的table的id
                height: 700,//容器高度
                url: 'memberfans/list/'+${entity.id},//數據請求接口URL,GET方法，且服務端分頁
                page: true ,//開啟分頁
                 cols: [[ //表頭
                    {type:'numbers', title: '序號', width:80, sort: true, fixed: 'left',}
                    ,{field: 'nameReal', title: '用戶姓名', width:200}
                    ,{field: 'nameNick', title: '用戶昵稱',width:200}
                    ,{field: 'mobile', title: '手機號', width:200, sort: true}
                    ,{field: 'avatarUrl', title: '頭像', width:200, templet: '#avatarTpl',sort: true}//templet參數用戶定制列的數據特殊標簽處理
                    ,{field: 'bindShopTimestr', title: '關聯時間', width:200, sort: true}
                ]]
            });
        });
    </script>
    <%--定制列樣式，展示圖片--%>
    <script type="text/html" id="avatarTpl">
        <img style="width:100px;height:100px" src="{{d.avatarUrl}}">
    </script>

 設置列寬

    <style>
        td .layui-table-cell {
            height: auto;
            line-height: 100px;
        }
    </style>

 

3-后台代碼-數據請求接口

import com.hs.common.util.json.JsonUtil;

@Controller
@RequestMapping(value="/memberfans")
public class MemberFansController extends BaseWebController<MemberFans> {

    @RequestMapping(value="/list/{shopId}",method = RequestMethod.GET)
    @ResponseBody
    public String listMemberFans(@PathVariable(value="shopId",required = true)Long shopId) throws ServerSqlErrorException {
        MemberFans req = new MemberFans();
        req.setShopId(shopId);
        List<MemberFans> memberFans = memberFansService.listByCondition(req);

        //需要注意返回參數的格式，參數包括count、code、msg、data
        //並且需要以json字符串返回
        Map<String,Object> rsMap = new HashMap<String,Object>();
        rsMap.put("count", memberFans.size());
        rsMap.put("code", 0);
        rsMap.put("msg", "detail");
        rsMap.put("data", memberFans);
        return JsonUtil.toJson(rsMap);
    }
}

 

4-展示效果

 

5-總結

　　1-當前示例使用的初始化渲染方式是方法渲染

　　2-分頁方式是且服務端分頁客戶端分頁

　　3-layui官網中有非常詳細的文檔說明，鏈接見參考資料-2

 

參考資料

1-https://www.layui.com/

2-https://www.layui.com/demo/table.html