Javascript 在MVC控制器中发布数据表行数据并接收
通过手动填充数据表的数据，我已经成功地将数据表集成到我的MVC项目中 我的问题是，我无法找到一种方法将所有行数据优雅地发送到我的MVC控制器并正确读取它。 当用户点击SubmitTable按钮时，我不知道如何正确地滚动每一行并读取数据。submit函数中使用的JSON.stringify方法很难使用，因为它包含的不仅仅是行数据（其他字段），而且我似乎无法正确过滤。也许有更好的方法发布数据？或者我的控制器需要一些特殊的方法 下面是我用来生成该表的一些示例代码，供那些在测试中受益或发现它有用的人使用）。 你能提供的任何帮助都会很好Javascript 在MVC控制器中发布数据表行数据并接收,javascript,jquery,model-view-controller,datatables,Javascript,Jquery,Model View Controller,Datatables,通过手动填充数据表的数据，我已经成功地将数据表集成到我的MVC项目中 我的问题是，我无法找到一种方法将所有行数据优雅地发送到我的MVC控制器并正确读取它。 当用户点击SubmitTable按钮时，我不知道如何正确地滚动每一行并读取数据。submit函数中使用的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>
样本表
第1栏标题
第2栏标题
第3栏标题
第4栏标题
第0行第1列
第0行第2列
第0行第3列
第0行第4列
第1行第1列
第1行第2列
第1行第3列
第1行第4列
第2行第1列
第2行第2列
第2行第3列
第2行第4列
第3行第1列
第3行第2列
第3行第3列
第3行第4列
第4行第1列
第4行第2列
第4行第3列
第4行第4列
第5行第1列
第5行第2列
第5行第3列
第5行第4列
第6行第1列
第6行第2列
第6行第3列
第6行第4列
第7行第1列
第7行第2列
第7行第3列
第7行第4列
第8行第1列
第8行第2列
第8行第3列
第8行第4列
第9行第1列
第9行第2列
第9行第3列
第9行第4列
提交表格
可变原始数据；
$（文档）.ready（函数（）
{
$（'dt#u unbinded_machines'）。数据表({
“选择”：true，
“长度菜单”：[[10,25,50，-1]，[10,25,50，“全部”]，
“订单”：[[1，“asc”]]，//按机器绑定状态排序
“columnDefs”：[
{
“目标”：[0]，//隐藏idmachine的第一列
“可见”：假，
“可搜索”：false，
“服务器端”：false，
}
//{
//“目标”：1，//禁用对idmachine列的搜索
//“可搜索”：false
//},
],
});
$（'#dt_绑定_机器'）。数据表({
“选择”：true，
“长度菜单”：[[10,25,50，-1]，[10,25,50，“全部”]，
“订单”：[[1，“asc”]//按机器绑定状态进行订单
});
oTable_original_data=$（'#dt_mytable'）.DataTable（）.rows（）.data（）；
});//关闭文档准备功能
函数提交表数据（）
{
//警报（“函数提交表数据调用”）；
var-oTable=$（'#dt_mytable'）.DataTable（）；
$（'dt#u mytable'）。提交（）；
var row_data=oTable.rows（）.data（）；
//通过ajax提交表单数据
$.ajax({
键入：“POST”，
url:“/TheController/Function”，
数据：
{
“行数据”：JSON.stringify（行数据）
},
成功：功能（结果）{
//做点什么
//警报（“成功”+数据）；
}
});
};
function submit_table_data()
{
var table = $('#dt_mytable').DataTable();
$('#dt_mytable tbody tr').each(function () {
console.log(table.row(this).data());
});
}
希望有帮助。查看datamapper模式。这就是你想要的。