从 jQuery 个数据表提交数据

Question

我从 AJAX 调用加载了一个表单，然后用一个复选框和一个文本字段构造每一行。我希望能够更改 table 中的数据，然后将整个 table 提交到服务器。这是我的整个页面：

@Html.HiddenFor(x=>x.ID, new {  @id = "txtTypeId"})
@using (Html.BeginForm("PostTable", "EandR", FormMethod.Post, new { @id = "formStatusByType" }))
{
<div>
    <table id="tblChooseProjectStatus">
        <thead>
            <tr>
                <th>ID</th>
                <th>Status</th>
                <th>Include</th>
                <th>Number</th>
            </tr>
        </thead>
    </table>
    <table>
        <tr>
            <td>
                <button type="submit" class="displaybutton" >Update</button>
            </td>
        </tr>
    </table>
</div>
}

<script>
$(document).ready(function () {
    debugger;
    $("#tblChooseProjectStatus").dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("GetAllProjectStatusByType")?type=' + $("#txtTypeId").val(),
        bJQueryUI: true,
        @*"ajax": {
            "url" : '@Url.Action("PostTable")',
            "type" : "POST",
            "data": function (d) {
                return JSON.stringify(d);
            }
        },*@
        //dom: 'Tlf<"clear">rtip',
        dom: 'ACBlf<"clear">rtip',
        colVis: {
            exclude: [0]
        },
        //"scrollY": '50vh',
        //"scrollCollapse": true,
        //"paging": false,
        //"scrollX": true,
        buttons: [
            { extend: 'copyHtml5', className: 'html5button' },
            { extend: 'excelHtml5', className: 'html5button' },
            { extend: 'csvHtml5', className: 'html5button' },
            { extend: 'pdfHtml5', className: 'html5button' }
        ],
        bAutoWidth: false,
        "oLanguage": {
            sEmptyTable: "There are no Project Statuses By Type at this time",
            sProcessing: "Processing, Please Wait...",
        },
        "aoColumns": [
            { "sWidth": "1%", sClass: "smallFonts" },
            { "sWidth": "10%", sClass: "smallFonts" },
            {
                "sWidth": "10%", sClass: "smallFonts", "sName": "Notify", "mRender": function (data, type, row) {
                    var chk = row[2] == 'True' ? ' checked="true" ' : ' ';
                    var chk1;
                    if (chk === ' ')
                        chk1 = "false";
                    else
                        chk1 = "true";
                    return "<div class='tooltip'><span class='tooltiptext1' style='font-size:x-small !important;'>Check to include this status with this type.</span><input type='checkbox'" + chk + " id='chknotify" + row[0] + "'; ></input></div>";
                    //return "<input type='checkbox'" + chk + " id='chknotify" + row[0] + "'; ></input>";
                }
            },
            {
                "sWidth": "10%", sClass: "smallFonts", "sName": "Notify", "mRender": function (data, type, row) {
                    return "<input type='text' style='width:70px' value=" + row[3] + "></input>";
                }
            }
        ],
        tableTools: {
            "sSwfPath": "../../Scripts/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print",
                    "bShowAll": true
                }
            ]

        }
    });
    $("#tblChooseProjectStatus").dataTable().fnSetColumnVis(0, false);

    $('#tblChooseProjectStatus tbody').on('click', 'td', function () {
        var visIdx = $(this).index();
        if (visIdx != 1) {
            return false;
        }
        var par = this.parentNode.parentNode.id;
        var oTable = $("#tblChooseProjectStatus").dataTable();
        var aPos = oTable.fnGetPosition(this);
        var aData = oTable.fnGetData(aPos[0]);
        var rowIndex = $(this).closest('tr').index();
        var name = aData[0];
        var selectedDate = aData[0];
        if ($(this).prop('checked', true)){
            $(this).prop('checked', false);
        } else {
            $(this).prop('checked', true);
        }
    });



    $('#formStatusByType').on('submit', function (e) {
        var table = $('#tblChooseProjectStatus').DataTable();
        e.preventDefault();
        var form = this;
        var data = table.$('input,hidden,select,textarea').serialize();
        $.ajax({
            url: '@Url.Action("PostTable")',
            data: { model: data },
            success: function (data) {
                console.log('Server response', data);
            }
        });
    });
});

在提交表单时，'data' 变量完全为空。我究竟做错了什么。我从数据tables 站点复制。

Answer 1

经过快速测试后，将是：

$('#tblChooseProjectStatus').find('input,hidden,select,textarea').serialize();

但这只会序列化可见页面...因为 DataTable 在分页时重绘...并使用其数据对象来执行此操作。您可以使用 var data = table.rows().data() 访问这些数据，它是一个包含所有行的数组……但它不包含输入的值。更多阅读 here.

我对此进行了快速测试CodePen

Answer 2

为每个 input 添加具有唯一值的 name 属性，这些是 serialize() 工作所必需的。

有关详细信息，请参阅 jQuery DataTables: How to submit all pages form data - Submit all pages form data via Ajax request。

从 jQuery 个数据表提交数据

Submit data from jQuery DataTables

jquery

asp.net-ajax

datatables