Layui table数据表格前端数据分页，数据表格单元格背景颜色和字体颜色设定

此文主要用于记录：Layui表格的使用和数据分页方式，回调更改单元格背景颜色，模板引擎
表格数据返回格式参考官方文档：https://www.layui.com/doc/modules/table.html
js前端数据分页参考：https://blog.csdn.net/qq_35077107/article/details/101168088

1.数据返回json格式（数据库可以用sql先分页再返回）
官方文档如下：

后端返回数据：（.net C#）

2.前端数据分页和数据格式处理

        <div id="qua" style="padding:5px">
            <table id="tabledemo" lay-filter="test"></table>
        </div>


    <script>
        //js code
        layui.use(['element', 'table','laydate'], function () {
            var element = layui.element;
            var table = layui.table;
            var $ = layui.jquery
            var layer = layui.layer;
            var laydate = layui.laydate;
            //实例
            table.render({
                elem: '#tabledemo',
                height: 'full-180',
                url: "/Home/GetData", //数据接口
                cols: [[ //标题栏
                    { field: 'username', title: '联系人', width: 80, rowspan: 2 } //rowspan即纵向跨越的单元格数
                    , { field: 'amount', title: '金额', width: 80, rowspan: 2, templet: '#colors' }
                    , { field: 'center', title: '地址', width: 200, rowspan: 3 }//colspan即横跨的单元格数，这种情况下不用设置field和width
                    , { field: 'sex', title: '性别', rowspan: 3, templet: '#sexTpl' }
                ]],
                page: true, //开启分页
                limits: [15, 50, 100,1000],
                limit:15,
                parseData: function (res) {
                    var result;
                    if (this.page.curr) {  //前端处理数据，以适合table格式
                        result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                    }
                    else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                },
                //处理数据格式，>5000单元格背景颜色设定
                done: function (res, curr, count) {
                    res.data.forEach(function (item, index) {
                        if (Number(item.amount) > 5000)
                            $('#qua').find('tr[data-index="' + index + '"]').find('td[data-field="amount"]').css({ 'background-color': '#FF5722', 'color': 'white' });
                    });
                }
       });
 </script>
 
 //模板引擎
<script type="text/html" id="sexTpl">
        {{#  if(d.sex === '女'){ }}
        <span style="color: #F581B1;">{{ d.sex }}</span>
        {{#  } else { }}
        {{ d.sex }}
        {{#  } }}
    </script>

3.结果显示：
第一页：

第二页：