我在使用Gyrocode示例创建的表格时遇到了一些问题。我将其修改为通过ajax获取和提交数据，并利用Datatables服务器端处理。
基本上发生的事情是我可以选择row1并提交表单，一切正常。然后我取消选择row1并选择row2，当我提交时，它将提交给row1＆amp; ROW2。
我创建了一个JSFiddle来复制并将表单变量记录到控制台。
第1步：选中第一行并点击“请求已选择”＆＃39;按钮，这是输出
<form id="frm-example">
<div class="table-responsive">...</div>
<input type="hidden" name="id[]" value="1">
</form>
第二步：没有刷新页面，取消选择第一行，选中第二行并点击“请求选中”＆＃39;按钮，这是输出。您可以看到第一行仍在变量中。
<form id="frm-example">
<div class="table-responsive">...</div>
<input type="hidden" name="id[]" value="1">
<input type="hidden" name="id[]" value="2">
</form>
我在成功发布请求时尝试清除表单变量，但似乎又回来了。我不确定如何取消选择所有内容，并在已提交请求时将变量重置为null。
HTML：
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<!-- /.panel-heading -->
<div class="panel-body">
<form id="frm-example">
<div class="table-responsive">
<div class="row">
<div class="col-lg-12" style="padding-bottom: 5px;">
<button id="btn-submit" class="btn btn-success" disabled><i class="fa fa-floppy-o"></i> Request Selected (0)</button>
</div>
</div>
<div class="table-responsive">
<table class="display select table table-striped table-bordered table-hover" id="example">
<thead>
<tr>
<th>
<input name="select_all" value="1" type="checkbox">
</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
使用Javascript：
//
// Updates "Select all" control in a data table
//
function updateDataTableSelectAllCtrl(table) {
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
// If none of the checkboxes are checked
if ($chkbox_checked.length === 0) {
chkbox_select_all.checked = false;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = false;
}
// If all of the checkboxes are checked
} else if ($chkbox_checked.length === $chkbox_all.length) {
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = false;
}
// If some of the checkboxes are checked
} else {
chkbox_select_all.checked = true;
if ('indeterminate' in chkbox_select_all) {
chkbox_select_all.indeterminate = true;
}
}
}
$(document).ready(function() {
// Array holding selected row IDs
var rows_selected = [];
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'sAjaxSource': 'data.php',
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'width': '1%',
'className': 'dt-body-center',
'render': function(data, type, full, meta) {
return '<input type="checkbox">';
}
}],
'order': [
[1, 'asc']
],
'rowCallback': function(row, data, dataIndex) {
// Get row ID
var rowId = data[0];
// If row ID is in the list of selected row IDs
if ($.inArray(rowId, rows_selected) !== -1) {
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
}
}
});
setInterval(function test() {
table.ajax.reload(null, false); // user paging is not reset on reload
$(".dataTables_processing").hide();
}, 2000);
// Handle click on checkbox
$('#example tbody').on('click', 'input[type="checkbox"]', function(e) {
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
// Get row ID
var rowId = data[0];
// Determine whether row ID is in the list of selected row IDs
var index = $.inArray(rowId, rows_selected);
// If checkbox is checked and row ID is not in list of selected row IDs
if (this.checked && index === -1) {
rows_selected.push(rowId);
// Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
} else if (!this.checked && index !== -1) {
rows_selected.splice(index, 1);
}
if (this.checked) {
$row.addClass('selected');
document.getElementById("btn-submit").innerHTML = '<i class="fa fa-floppy-o"></i>' + " Request Selected (" + rows_selected.length + ")";
} else {
$row.removeClass('selected');
document.getElementById("btn-submit").innerHTML = '<i class="fa fa-floppy-o"></i>' + " Request Selected (" + rows_selected.length + ")";
}
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
$('#btn-submit').prop('disabled', (!rows_selected.length));
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle click on table cells with checkboxes
$('#example').on('click', 'tbody td, thead th:first-child', function(e) {
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
// Handle click on "Select all" control
$('thead input[name="select_all"]', table.table().container()).on('click', function(e) {
if (this.checked) {
$('#example tbody input[type="checkbox"]:not(:checked)').trigger('click');
} else {
$('#example tbody input[type="checkbox"]:checked').trigger('click');
}
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle table draw event
table.on('draw', function() {
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
});
// Handle form submission event
$('#frm-example').on('submit', function(e) {
if (!e.isDefaultPrevented()) {
var url = "process.php";
var form = this;
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data) {
console.log(form);
}
});
return false;
}
})
});
答案 0 :(得分：0)
我刚想通了！在我从ajax取回成功后，我最终迭代了所选行并从表单变量中删除了元素。
$('#frm-example').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "process.php";
form = this;
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
$.each(rows_selected, function(index, rowId){
// Remove hidden element
$(form).children("input").remove();
});
}
});
return false;
}
})