jQuery DataTable自定义保存按钮获取原始值而非更新值求助

DataTable 默认会把初始化时的原始数据存在内部模型里，你修改单元格后只是改动了页面DOM的内容，但没同步更新DataTable内部的数据模型，所以用rows().data().toArray()拿到的始终是初始值。

在获取数据前，先遍历所有单元格，把DOM中的最新值同步到DataTable的数据源中。核心是通过cell().data()方法，将页面上的修改写入DataTable内部存储。

...,
{
    text: 'Save',
    action: function (e, dt, node, config) {
        // 同步DOM修改到DataTable内部数据
        dt.rows().every(function() {
            const row = this;
            this.nodes().to$().find('td').each(function(index) {
                // 若单元格用了输入框，需改成对应取值方式，比如$(this).find('input').val()
                const cellValue = $(this).text().trim();
                row.cell(index).data(cellValue);
            });
        });

        var json = JSON.stringify(dt.rows().data().toArray());
        var dat = $('#MainContent_ddlDate').val();
        var cols = ""

        dt.columns().header().each(function (e, i) {
            var col = jQuery(e).html();
            cols += col + ",";
        });
        
        $.ajax({
            type: "POST",
            url: 'Ranking.aspx/SaveRanks',
            data: JSON.stringify({ 'tbldata': json, 'cols':cols, 'surveydate': dat }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                window.location.reload();
            },
            error: function (e) {
                console.log(e); // 修正大小写：Console -> console
            }
        });
    }
}

如果你的单元格是用输入框（input/select等）实现编辑的，需要把$(this).text()替换成对应获取输入值的代码，比如$(this).find('input').val()，根据实际的编辑组件调整即可。

内容的提问来源于stack exchange，提问作者Eray Balkanli