2

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

现在我想向表中添加一些数据表过滤器功能。我让它在视图上工作得很好，但是当我单击提交时，它发送的只是一个空值而不是行数据。我的理解是数据表会修改页面/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 数据表表单正确回发到控制器（而不是发送空值）？

2013 年 8 月 29 日更新

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

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

和

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

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

4

2 回答 2

0

jQuery DataTables 1.9 及更高版本

使用的链接

  1. 表单提交的数据表示例
  2. 如何获取过滤后的数据
  3. JSON2 数组序列化

代码：

@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 插件

于 2013-08-26T21:10:18.340 回答
-1 
$('#frmInventario').submit(function () {
                debugger;
               var oTable =  $('#TableId').dataTable();
                oTable.fnFilter("");
                var oSettings = oTable.fnSettings();
                oSettings._iDisplayLength = -1;
                oTable.fnDraw();


            });
于 2016-03-02T14:45:47.393 回答