我从AJAX调用加载表单,然后使用复选框和文本字段构造每一行。我希望能够更改表中的数据,然后将整个表提交给服务器。这是我的整个页面:
@Html.HiddenFor(x=>x.ID, new { @id = "txtTypeId"})
@using (Html.BeginForm("PostTable", "EandR", FormMethod.Post, new { @id = "formStatusByType" }))
{
<div>
<table id="tblChooseProjectStatus">
<thead>
<tr>
<th>ID</th>
<th>Status</th>
<th>Include</th>
<th>Number</th>
</tr>
</thead>
</table>
<table>
<tr>
<td>
<button type="submit" class="displaybutton" >Update</button>
</td>
</tr>
</table>
</div>
}
<script>
$(document).ready(function () {
debugger;
$("#tblChooseProjectStatus").dataTable({
bProcessing: true,
sAjaxSource: '@Url.Action("GetAllProjectStatusByType")?type=' + $("#txtTypeId").val(),
bJQueryUI: true,
@*"ajax": {
"url" : '@Url.Action("PostTable")',
"type" : "POST",
"data": function (d) {
return JSON.stringify(d);
}
},*@
//dom: 'Tlf<"clear">rtip',
dom: 'ACBlf<"clear">rtip',
colVis: {
exclude: [0]
},
//"scrollY": '50vh',
//"scrollCollapse": true,
//"paging": false,
//"scrollX": true,
buttons: [
{ extend: 'copyHtml5', className: 'html5button' },
{ extend: 'excelHtml5', className: 'html5button' },
{ extend: 'csvHtml5', className: 'html5button' },
{ extend: 'pdfHtml5', className: 'html5button' }
],
bAutoWidth: false,
"oLanguage": {
sEmptyTable: "There are no Project Statuses By Type at this time",
sProcessing: "Processing, Please Wait...",
},
"aoColumns": [
{ "sWidth": "1%", sClass: "smallFonts" },
{ "sWidth": "10%", sClass: "smallFonts" },
{
"sWidth": "10%", sClass: "smallFonts", "sName": "Notify", "mRender": function (data, type, row) {
var chk = row[2] == 'True' ? ' checked="true" ' : ' ';
var chk1;
if (chk === ' ')
chk1 = "false";
else
chk1 = "true";
return "<div class='tooltip'><span class='tooltiptext1' style='font-size:x-small !important;'>Check to include this status with this type.</span><input type='checkbox'" + chk + " id='chknotify" + row[0] + "'; ></input></div>";
//return "<input type='checkbox'" + chk + " id='chknotify" + row[0] + "'; ></input>";
}
},
{
"sWidth": "10%", sClass: "smallFonts", "sName": "Notify", "mRender": function (data, type, row) {
return "<input type='text' style='width:70px' value=" + row[3] + "></input>";
}
}
],
tableTools: {
"sSwfPath": "../../Scripts/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "print",
"bShowAll": true
}
]
}
});
$("#tblChooseProjectStatus").dataTable().fnSetColumnVis(0, false);
$('#tblChooseProjectStatus tbody').on('click', 'td', function () {
var visIdx = $(this).index();
if (visIdx != 1) {
return false;
}
var par = this.parentNode.parentNode.id;
var oTable = $("#tblChooseProjectStatus").dataTable();
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
var rowIndex = $(this).closest('tr').index();
var name = aData[0];
var selectedDate = aData[0];
if ($(this).prop('checked', true)){
$(this).prop('checked', false);
} else {
$(this).prop('checked', true);
}
});
$('#formStatusByType').on('submit', function (e) {
var table = $('#tblChooseProjectStatus').DataTable();
e.preventDefault();
var form = this;
var data = table.$('input,hidden,select,textarea').serialize();
$.ajax({
url: '@Url.Action("PostTable")',
data: { model: data },
success: function (data) {
console.log('Server response', data);
}
});
});
});
在提交表单时,'data'变量完全为空。我究竟做错了什么。我从datatables网站上复制了。
答案 0 :(得分:1)
为每个name
添加具有唯一值的input
个属性,这些属性是serialize()
工作所必需的。
有关详细信息,请参阅jQuery DataTables: How to submit all pages form data - Submit all pages form data via Ajax request。
答案 1 :(得分:0)