發表DataTables行數據並在MVC控制器中接收

-1

我已成功地通過手動填充表中的數據將DataTables集成到我的MVC項目中。發表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>

來源

2016-08-15 Peter H

查看數據映射器模式。這是你想要的。 – jeremy

它正在使用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()); 
     }); 
}

希望它能幫助。

來源

2016-08-15 13:27:15 chirag

發表DataTables行數據並在MVC控制器中接收

回答

相關問題