layui table实现新增、排序等功能（获取分页所有数据&解决在非首页新增时数据获取失败问题）

layui table实现新增、排序等功能（获取分页所有数据&解决在非首页新增时数据获取失败问题）

刚接触layui，要实现前台新增文本插入表格功能，主要讲下我遇到的问题和解决方法，应该都是笨方法哈哈，记录下来也是希望大家能分享更好的解决方法。

新增数据到第二页时只能加一条

原因：

var OldData = layui.table.cache["SItable"];
由于我在初始化table时设置了page中的limit为10，所以上面语句只能获取当前页数据，所以在后面插入数据时只能在前10条基础上添加

方法：

在reload方法中重新设置limit: Number.MAX_VALUE，新增后再调用reload重新渲染

在非首页新增时表格清空

原因：

这个我不清楚，调试时总是获取不到表数据，导致oldData为空，但是后面取到数据插入后还是为空，就很懵

方法：

在reload方法中设置page中curr: 1

按时间倒序

添加时间栏位，在initSort中设置栏位倒序排列

代码&界面

layui.use('table', function () {
    var table = layui.table;

    //第一个实例
    table.render({
        elem: '#SItable'
        , even: true
        //, url: '' //数据接口
        , page: {
            limit: 10
            , curr: 1
        } //开启分页
        , data: []
        //, limit: Number.MAX_VALUE
        , text: {
            none: 'No data'
        }
        ,initSort: {
            field: 'timeNow' 
            , type: 'desc' 
        }
        ,id: "SItable"
        , cols: [[ //表头
            { fixed: 'left', width: '4%', align: 'center', type: 'numbers' }
            , { field: 'Item', title: 'Item', width: '10%', align: 'center' }
            , { field: 'Description', title: 'Description', width: '23%', align: 'center' }
            , { field: 'Ship_Qty', title: 'Ship Qty', width: '10%', align: 'center' }
            , { field: 'Dimension', title: 'Dimension', width: '10%', align: 'center' }
            , { field: 'Weight', title: 'Weight', width: '10%', align: 'center' }
            , { field: 'Reference_Comment', title: 'Reference/Comment', width: '23%', align: 'center' }
            , { field: 'timeNow', title: 'timeNow', width: 0, align: 'center'}
            , { fixed: 'right', width: '10.3%', align: 'center', toolbar: '#barDemo' }
        ]]
    });

});

$(document).on('click', '#add', function () {
    var qty = 0;
    $("input[name='SItext']").each(function () {
        if (this.value == '') {
            //未完成表單
            layer.msg("未完成表單!");
            qty += 1;
            return false;
        }
    });
    if (qty == 0) {
        //$("#SItable").config.limit.val('20');
        layui.table.reload('SItable', {
            page: {
                limit: Number.MAX_VALUE
                , curr: 1
            }
        });
        console.log("1");
        var OldData = layui.table.cache["SItable"];
        var Item = $("#SI1").val();
        var Description = $("#SI2").val();
        var Ship_Qty = $("#SI3").val();
        var Dimension = $("#SI4").val();
        var Weight = $("#SI5").val();
        var Reference_Comment = $("#SI6").val();
        //新行数据
        var date = new Date();
        var newRow = {
            Item: Item,
            Description: Description,
            Ship_Qty: Ship_Qty,
            Dimension: Dimension,
            Weight: Weight,
            Reference_Comment: Reference_Comment,
            timeNow: date.toLocaleString()
        };
        //将新行插入表格数据中
        OldData.push(newRow);
        //全表排序
        layui.table.reload('SItable', {

             page: {
                 limit: Number.MAX_VALUE
                 , curr: 1
            } 
            , initSort: {
                field: 'timeNow'
                , type: 'desc'
            }
            , data: OldData
        });
        //改回原来配置limit
        OldData = layui.table.cache["SItable"];
        layui.table.reload('SItable', {

            page: {
                limit: 10
                , curr: 1
            }
            , initSort: {
                field: 'timeNow'
                , type: 'desc'
            }
            , data: OldData
        });
    }

});