Ich war erfolgreich in der Lage, DataTables in mein MVC-Projekt zu integrieren, manuell die Daten für die Tabelle aufzufüllen.Post DataTables Zeilendaten und empfangen in MVC-Controller
Mein Problem ist, dass ich keine Möglichkeit finde, alle Zeilendaten elegant an meinen MVC-Controller zu senden und richtig zu lesen.
Wenn ein Benutzer die Schaltfläche Tabelle senden drückt, weiß ich nicht, wie ich durch jede Zeile richtig scrollen und die Daten lesen soll. Es ist problematisch mit der JSON.stringify-Methode zu arbeiten, die in der Submit-Funktion verwendet wird, da sie mehr als nur die Zeilendaten (zusätzliche Felder) enthält und scheinbar nicht korrekt gefiltert werden kann. Vielleicht gibt es eine bessere Methode, die Daten zu veröffentlichen? Oder brauche ich eine spezielle Methode in meinem Controller?
Einige Beispielcode ich verwendet habe, um die Tabelle zu erzeugen, unter denen, die davon profitieren können oder es nützlich beim Testen finden). Jede Hilfe, die Sie zur Verfügung stellen können, wäre großartig!
<!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>
in das Datamapper-Muster schauen. das ist, was du willst. – jeremy