在 MVC 控制器中发布 DataTables 行数据并接收答案

【问题标题】：Post DataTables row data and receive in MVC controller在 MVC 控制器中发布 DataTables 行数据并接收
【发布时间】：2016-12-21 07:49:02
【问题描述】：

通过手动填充表的数据，我已经成功地将 DataTables 集成到我的 MVC 项目中。

我的问题是我无法找到一种方法将所有行数据优雅地发送到我的 MVC 控制器并正确读取它。

当用户点击提交表格按钮时，我不知道如何正确滚动每一行并读取数据。提交函数中使用的 JSON.stringify 方法存在问题，因为它不仅包含行数据（附加字段），而且我似乎无法正确过滤。也许有更好的方法来发布数据？或者我需要在我的控制器中使用一些特殊的方法？

我用来生成表格的一些示例代码如下，供那些可能受益或发现它在测试中有用的人使用）。您能提供的任何帮助都会很棒！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.jqueryui.min.css"/>  

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>  
    <div>
        <div style="width: 100%; float: left; padding: 10px">
            <strong><u>Sample Table</u></strong>
            <table class="table table-striped table-bordered table-hover" id="dt_mytable">
                <thead>
                    <tr>
                        <th>Column1 Heading</th>
                        <th>Column2 Heading</th>
                        <th>Column3 Heading</th>
                        <th>Column4 Heading</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Row 0 Column 1</td>
                        <td>Row 0 Column 2</td>
                        <td>Row 0 Column 3</td>
                        <td>Row 0 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 1 Column 1</td>
                        <td>Row 1 Column 2</td>
                        <td>Row 1 Column 3</td>
                        <td>Row 1 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 2 Column 1</td>
                        <td>Row 2 Column 2</td>
                        <td>Row 2 Column 3</td>
                        <td>Row 2 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 3 Column 1</td>
                        <td>Row 3 Column 2</td>
                        <td>Row 3 Column 3</td>
                        <td>Row 3 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 4 Column 1</td>
                        <td>Row 4 Column 2</td>
                        <td>Row 4 Column 3</td>
                        <td>Row 4 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 5 Column 1</td>
                        <td>Row 5 Column 2</td>
                        <td>Row 5 Column 3</td>
                        <td>Row 5 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 6 Column 1</td>
                        <td>Row 6 Column 2</td>
                        <td>Row 6 Column 3</td>
                        <td>Row 6 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 7 Column 1</td>
                        <td>Row 7 Column 2</td>
                        <td>Row 7 Column 3</td>
                        <td>Row 7 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 8 Column 1</td>
                        <td>Row 8 Column 2</td>
                        <td>Row 8 Column 3</td>
                        <td>Row 8 Column 4</td>
                    </tr>
                    <tr>
                        <td>Row 9 Column 1</td>
                        <td>Row 9 Column 2</td>
                        <td>Row 9 Column 3</td>
                        <td>Row 9 Column 4</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="form-group">
        <div class="ibox-content">
            <button class="btn btn-primary" type="submit" onclick="submit_table_data()">Submit Table</button>
        </div>
    </div>

<script type="text/javascript">
    var oTable_original_data;
    $(document).ready(function ()
    {

        $('#dt_unbinded_machines').DataTable({
            "select": true,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "order": [[1, "asc"]],  //Order by the Machine binding Status
            "columnDefs": [
                {
                    "targets": [0], //Hide the first column of idmachine
                    "visible": false,
                    'searchable': false,
                    'serverSide': false,
                }
                //{
                    //'targets': 1, //Disable searching on the idmachine column
                    //'searchable': false
                //},
            ],
        });


        $('#dt_binded_machines').DataTable({
            "select": true,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "order": [[1, "asc"]]   //Order by the Machine binding Status
        });

        oTable_original_data = $('#dt_mytable').DataTable().rows().data();
    });//Close Document Ready Function

    function submit_table_data()
    {
        //alert("Function submit_table_data called");
        var oTable = $('#dt_mytable').DataTable();

        $('#dt_mytable').submit();
        var row_data = oTable.rows().data();

        // Submit form data via ajax
        $.ajax({
            type: 'POST',
            url: '/TheController/Function',
            data:
            {
                "row_data": JSON.stringify(row_data)
            },
            success: function (result) {
                //do something
                //alert("Sucesss" + data);
            }
        });
    };
</script>

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.jqueryui.min.js"></script>

</body>
</html>

【问题讨论】：

查看数据映射器模式。这就是你想要的。

标签： javascript jquery model-view-controller datatables

【解决方案1】：

它适用于 DataTables 1.10.0。它将返回行数组。

function submit_table_data()
{
   var table = $('#dt_mytable').DataTable();

       $('#dt_mytable tbody tr').each(function () {
           console.log(table.row(this).data());
       });
}

希望对你有帮助。

【讨论】：