Question

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

现在我想在表格中添加一些数据表过滤功能。我让它在View上运行得很好但是当我单击Submit时，它发送的所有内容都是空值而不是行数据。我的理解是数据表修改了页面/ DOM，不知何故我需要在提交触发之前将其恢复到页面上。我看到了一些使用datatables 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数据表格以正确地回发到Controller（而不是发送空值）？

更新8-29-13

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

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

和

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

但这两个都为dataTableFiltered提供了一个空值。我确定我在这里做了些蠢事。

Answer 1

jQuery DataTables 1.9及以上

使用的链接

DataTables Example for Form Submission
How to get filtered Data
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

@RunWith(TapestryIOCJUnit4ClassRunner.class)
@Registry(modules={TapestryModule.class, HibernateCoreModule.class, SomeOtherModule.class})
public class MyTest {
    @ModuleDef
    public static SpringModuleDef createSpringModuleDef() {
         final ApplicationContext appContext = new XMLApplicationContext("classpath:/test-applicationContext.xml");
         ServletContext sc = new MockServletContext();
         return new SpringModuleDef(sc) {
             protected ApplicationContext locateApplicationContext(ServletContext servletContext) {
                 return appContext;
             }
         };
    }

    @Inject
    private Foo someSpringBean;

    @Inject
    private Bar someTapestryBean;

    ...

Jquery Datatables和MVC Form Post

2 个答案:

jQuery DataTables 1.9及以上