Post DataTables данные о строках и получение в контроллере MVC

-1

Я успешно смог интегрировать DataTables в проект MVC, вручную заполняя данные для таблицы.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

Посмотрите на шаблон datamapper. это то, что вы хотите. – 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

ответ

Смежные вопросы