Post DataTables 행 데이터와 MVC 컨트롤러에서 수신

-1

테이블의 데이터를 수동으로 채우므로 내 MVC 프로젝트에 DataTables를 성공적으로 통합 할 수있었습니다.Post 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

Post DataTables 행 데이터와 MVC 컨트롤러에서 수신

답변

관련 문제