Jquery 数据表和 MVC 表单发布

Question

我在表单中有一个表格（项目列表），允许用户对每一行执行一些操作（例如：删除一个项目）。当用户单击提交时，所有行（数据和操作）都被发送到控制器。效果很好。

现在我想向表中添加一些数据表过滤器功能。我让它在视图上工作得很好，但是当我单击提交时，它发送的只是一个空值而不是行数据。我的理解是数据表会修改页面/DOM，并且我需要在提交触发之前将其重新放到页面上。我看到了一些使用数据表 API 函数 fnGetHiddenNodes() 的建议，但我不确定如何在我的页面上执行此操作。任何帮助将不胜感激。

代码

@model IEnumerable<Admin.Models.MemberFeedback>

@{
    ViewBag.Title = "Member Feedback";
}

@Scripts.Render("~/bundles/datatables")

   @using (Html.BeginForm("MemberFeedback", "Admin", FormMethod.Post, new { @id = "processmemberfeedback" }))
    {
        <table class="dynamicTable table table-striped table-bordered table-primary" id="feedbackemails">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>From</th>
                    <th>Feedback</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @Html.EditorForModel()
            </tbody>
        </table>

        <br />
        <input type="submit" value="Submit" id="submit1" class="btn btn-inverse"/>
    }
</div>

<script>
    /* Table initialisation */
    var oJobListingsTable = $('#feedbackemails').dataTable({
        "sPaginationType": "bootstrap",
        "bLengthChange": false,
        "bFilter": false,
        "oLanguage": {
            "sEmptyTable": "No records found.",
            "sLengthMenu": "Rows: _MENU_",
            "sSearch": "Filter: "
        },
        "iDisplayLength": 10,
    });
</script>

如何让 jquery 数据表表单正确回传到控制器（而不是发送空值）？

13 年 8 月 29 日更新

我遵循 abc123 的建议，我可以让它序列化隐藏字段中的字符串。但是，我仍然无法将其发回我的控制器。我尝试了以下方法：

[HttpPost]
public ActionResult MemberFeedback(IEnumerable<MemberFeedback> memberfeedbacks, string dataTableFiltered)
{ ...}

和

[HttpPost]
public ActionResult MemberFeedback(string dataTableFiltered)
{ ...}

但是这两个都给了我 dataTableFiltered 的空值。我确定我在这里做了一些愚蠢的事情。

Answer 1

jQuery DataTables 1.9 及更高版本

使用的链接

1. DataTables Example for Form Submission
2. How to get filtered Data
3. JSON2 array serializing

代码：

@model IEnumerable<Admin.Models.MemberFeedback>

@{
    ViewBag.Title = "Member Feedback";
}

@Scripts.Render("~/bundles/datatables")

   @using (Html.BeginForm("MemberFeedback", "Admin", FormMethod.Post, new { @id = "processmemberfeedback" }))
    {
        <table class="dynamicTable table table-striped table-bordered table-primary" id="feedbackemails">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>From</th>
                    <th>Feedback</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @Html.EditorForModel()
            </tbody>
        </table>

        <br />
        <input type="hidden" id="dataTableFiltered">
        <input type="submit" value="Submit" id="submit1" class="btn btn-inverse"/>
    }
</div>

<script type='text/javascript'>
    $('#MemberFeedback').submit( function() {
        $('#dataTableFiltered').val(JSON.stringify(oTable._('tr', {"filter":"applied"})));
    });

    /* Table initialisation */
    var oJobListingsTable = $('#feedbackemails').dataTable({
        "sPaginationType": "bootstrap",
        "bLengthChange": false,
        "bFilter": false,
        "oLanguage": {
            "sEmptyTable": "No records found.",
            "sLengthMenu": "Rows: _MENU_",
            "sSearch": "Filter: "
        },
        "iDisplayLength": 10,
    });
</script>

说明

oTable._('tr', {"filter":"applied"})

从应用了过滤器的数据表中返回数据。

JSON.stringify(oTable._('tr', {"filter":"applied"}))

返回上面的 JSON 字符串。

$('#dataTableFiltered').val(JSON.stringify(oTable._('tr', {"filter":"applied"})));

将dataTableFiltered隐藏输入的值设置为上述。

注意：这里使用JSON2.js plugin

Answer 2

$('#frmInventario').submit(function () {
                debugger;
               var oTable =  $('#TableId').dataTable();
                oTable.fnFilter("");
                var oSettings = oTable.fnSettings();
                oSettings._iDisplayLength = -1;
                oTable.fnDraw();


            });