[英]How to add check box selection on datatable and send all value as array to another html/php page?
首先很抱歉對我的問題進行了這么長的解釋。 但我需要解決方案，我花了幾天時間才找到確切的解決方案:(
這是我之前的數據表：
這是我當前的數據表：
當前問題：
問題：如何將選擇方法從當前方法（如第二張圖所示）更改為復選框選擇方法並將所選行的所有值傳遞到 json/array 中的另一個 html/php 頁面？
這是我當前供選擇的數據表腳本：
(table.php)
<table class="table table-bordered table-striped" id="lainlain" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Date Apply</th>
<th>Name</th>
<th>School</th>
<th>City</th>
<th>Status</th>
<th>Last Updated</th>
<th>Edit</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Date Apply</th>
<th>Name</th>
<th>School</th>
<th>City</th>
<th>Status</th>
<th>Last Updated</th>
<th>Edit</th>
</tr>
</tfoot>
<tbody>
<?php
$filterA = "$yearX-01-01";
$filterZ = "$yearX-12-31";
include "connect.php";
$select = $con->prepare("SELECT id, dateApply, school, city, name, xType, xLevel, phone, status, lastUpdated FROM t_applicants WHERE dateApply between '$filterA' AND '$filterZ'");
$select->setFetchMode(PDO::FETCH_ASSOC);
$select->execute();
while($data=$select->fetch()){
?><tr>
<td><?php echo $data['id']; ?></td>
<td><?php
echo $apply = (new DateTime($data['dateApply']))->format('Y-m-d');
?></td>
<td><?php echo $data['name']; ?></td>
<td><?php echo $data['school']; ?></td>
<td><?php echo $data['city']; ?></td>
<td><?php echo $data['status']; ?></td>
<td>
<?php
$timestamp = strtotime($data['lastUpdated']);
$date = date('Y-m-d H:i:s', $timestamp);
echo $date;
?>
</td>
<td>
<!--THE Edit Button (BLUE) -->
<button type="button" data-a="<?php echo $data['id'];?>" data-b="<?php echo $yearX; ?>" href='#detailUpdate' class="modalDetailUpdate btn btn-primary btn-xs" data-toggle="modal" data-backdrop='static' data-keyboard='false' title='Editar usuario'><span class="glyphicon glyphicon-edit"></span></button>
</td>
<?php
}?>
</tr>
</tbody>
</table>
(datatableSchool.js)
$(document).ready(function() {
var dtCbsAndEvents = {
/**
* Whenever the table is re-drawn, update the export button labels, and disable any buttons dependent on row selection
*
* @events draw.dt#orders-table, page.dt#orders-table, order.dt#orders-table, draw.dt#orders-table,
* column-visibility.dt#orders-table, search#orders-table, init.dt#orders-table, deselect.dt#orders-table,
* select.dt#orders-table
* @param {object} e jQuery event object
* @param {DataTables.Settings} settings DataTables settings object
*/
updateOperationButtons: function(e, settings) { //page, order, draw, column-visibility search init.dt deselect.dt select.dt
// I find that setting this to run after a 1 millisecond timeout to work for the dt.init event, otherwise, it doesnt seem to work...
setTimeout(function() {
// Create an API object of the associated table
var dtApi = new $.fn.dataTable.Api(settings),
// Get the count of ALL rows on the page
rowCountAll = dtApi.rows().count(),
// Get the count of the rows on the CURRENT page
rowCountPage = dtApi.rows({
page: 'current',
search: 'applied'
}).count(),
// Get the count of the selected rows
rowCountSelected = dtApi.rows({
selected: true,
search: 'applied'
}).count(),
// DataTable button collections (labels get updated to specific values based on the class name)
dtBtns = {
// Buttons that require selected rows to be enabled
requireSelected: dtApi.buttons('.require-selected'),
// Buttons that need to show the count of ALL rows
addCountAll: dtApi.buttons('.show-count-all'),
// Buttons that need to show the count of SELECTED rows
addCountSelected: dtApi.buttons('.show-count-selected'),
// Buttons that need to show the count of rows on CURRENT PAGE
addCountPage: dtApi.buttons('.show-count-page'),
// Buttons that need to show the count of SELECTED rows, or ALL if none are selected
allOrSelected: dtApi.buttons('.show-all-or-selected')
},
/**
* If the number provided is in the thousands, this will just add a comma where its needed
*
* @param {number|string} num Number (eg: 1234567)
* @returns {string} Proper thousands result (eg: 12,34,567)
*/
toThousands = function(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
},
/**
* Update the label (or text) of a button, by appending a specified count of
* rows to the buttons 'title' attribute
*
* @param {number} rowCount Count to show in button
* @param {boolean} hideZero If this is true, and the row count is 0, then (0) wont be appended
* @note The DT button MUST have the titleAttr property defined, as that is the $().prop('title') value
*/
setBtnLabelCount = function(rowCount, hideIfZero) {
rowCount = parseInt(rowCount)
hideIfZero = !!hideIfZero
var btnPostTxt
if (hideIfZero === true && !rowCount)
btnPostTxt = ''
else
btnPostTxt = ' ' + (rowCount > 0 ? '(' + toThousands(rowCount) + ')' : '(0)')
return function(btn, index) {
dtApi
.button(btn.node)
.text($(btn.node).prop('title') + btnPostTxt)
}
}
// Buttons that need to show the selected rows, or all rows, if none are selected
dtBtns.allOrSelected.each(setBtnLabelCount(rowCountSelected || rowCountAll))
// Buttons that need to show the count of all rows
dtBtns.addCountAll.each(setBtnLabelCount(rowCountAll))
// Buttons that need to show the count of only selected rows
dtBtns.addCountSelected.each(setBtnLabelCount(rowCountSelected, true))
// Buttons that need to show the number of rows on the current page
dtBtns.addCountPage.each(setBtnLabelCount(rowCountPage))
// Buttons that should be disabled if no rows are selected
dtBtns.requireSelected.enable(rowCountSelected > 0)
}, 1)
}
}
var dtInstance = $('#lainlain')
// Update the operation button values and disabled status based on what rows are visible/selected/filtered
.on('draw.dt page.dt order.dt draw.dt column-visibility.dt search init.dt deselect.dt select.dt', dtCbsAndEvents.updateOperationButtons)
.DataTable({
select: {
style: 'multi+shift'
},
buttons: []
})
// DataTables Buttons (Export, select, column visibility, etc)
new $.fn.dataTable.Buttons(dtInstance, {
name: 'tools',
dom: {
container: {
tag: 'div',
className: 'width-full dt-buttons dt-custom-button-container'
}
},
buttons: [{
extend: 'collection',
name: 'select',
text: 'Export Orders',
titleAttr: 'Export Orders',
className: 'btn-txt-center width-24-pc show-all-or-selected',
autoClose: true,
buttons: [{
// Copy Export
extend: 'collection',
text: 'Print',
autoClose: true,
buttons: [{
name: 'printAll',
className: 'export-rows-all show-all-or-selected',
text: 'Print All',
titleAttr: 'Print All',
extend: 'print',
autoPrint: false,
exportOptions: {
columns: ':visible :not(.no-export)'
}
}, {
name: 'printSelected',
className: 'export-rows-selected require-selected show-count-selected',
text: 'Print Selected',
titleAttr: 'Print Selected',
extend: 'print',
autoPrint: false,
exportOptions: {
modifier: {
selected: true,
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}, {
name: 'printPage',
className: 'export-rows-page show-count-page',
text: 'Print Current Page',
titleAttr: 'Print Current Page',
extend: 'print',
autoPrint: false,
exportOptions: {
modifier: {
page: 'current',
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}]
}, {
// Copy Export
extend: 'collection',
text: 'Copy',
autoClose: true,
buttons: [{
name: 'copyAll',
className: 'export-rows-all show-count-all',
text: 'Copy All',
titleAttr: 'Copy All',
extend: 'copy',
exportOptions: {
columns: ':visible :not(.no-export)'
},
init: function(e, dt, config) {
//console.log( 'Button %s - Namespace: %s',config.name, config.namespace )
}
}, {
name: 'copySelected',
className: 'export-rows-selected require-selected show-count-selected',
text: 'Copy Selected',
titleAttr: 'Copy Selected',
extend: 'copy',
exportOptions: {
modifier: {
selected: true,
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}, {
name: 'copyPage',
className: 'export-rows-page show-count-page',
text: 'Copy Current Page',
titleAttr: 'Copy Current Page',
extend: 'copy',
exportOptions: {
modifier: {
page: 'current',
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}]
}, {
// Excel Export
extend: 'collection',
text: 'Excel',
autoClose: true,
buttons: [{
name: 'excelAll',
className: 'export-rows-all show-count-all',
text: 'Export All',
titleAttr: 'Export All',
extend: 'excel',
exportOptions: {
columns: ':visible :not(.no-export)'
}
}, {
name: 'excelSelected',
className: 'export-rows-selected require-selected show-count-selected',
text: 'Export Selected',
titleAttr: 'Export Selected',
extend: 'excel',
exportOptions: {
modifier: {
selected: true,
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}, {
name: 'excelPage',
className: 'export-rows-page show-count-page',
text: 'Export Current Page',
titleAttr: 'Export Current Page',
extend: 'excel',
exportOptions: {
modifier: {
page: 'current',
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}]
}, {
// CSV Export
extend: 'collection',
text: 'CSV',
autoClose: true,
buttons: [{
name: 'csvAll',
className: 'export-rows-all show-count-all',
text: 'Export All',
titleAttr: 'Export All',
extend: 'csv',
exportOptions: {
columns: ':visible :not(.no-export)'
}
}, {
name: 'csvSelected',
className: 'export-rows-selected require-selected show-count-selected',
text: 'Export Selected',
titleAttr: 'Export Selected',
extend: 'csv',
exportOptions: {
modifier: {
selected: true,
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}, {
name: 'csvPage',
className: 'export-rows-page show-count-page',
text: 'Export Current Page',
titleAttr: 'Export Current Page',
extend: 'csv',
exportOptions: {
modifier: {
page: 'current',
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}]
}, {
// PDF Export
extend: 'collection',
text: 'PDF',
titleAttr: 'PDF',
autoClose: true,
buttons: [{
name: 'pdfAll',
className: 'export-rows-all show-count-all',
text: 'Export All',
titleAttr: 'Export All',
extend: 'pdf',
exportOptions: {
columns: ':visible :not(.no-export)'
}
}, {
name: 'pdfSelected',
className: 'export-rows-selected require-selected show-count-selected',
text: 'Export Selected',
titleAttr: 'Export Selected',
extend: 'pdf',
exportOptions: {
modifier: {
selected: true,
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}, {
name: 'pdfPage',
className: 'export-rows-page show-count-page',
text: 'Export Current Page',
titleAttr: 'Export Current Page',
extend: 'pdf',
exportOptions: {
modifier: {
page: 'current',
search: 'applied',
order: 'applied'
},
columns: ':visible :not(.no-export)'
}
}]
}]
}, {
name: 'colvis',
className: 'btn-txt-center width-24-pc',
extend: 'colvis',
prefixButtons: ['colvisRestore'],
columns: ':not(.colvis-skip)'
}, {
extend: 'collection',
className: 'btn-txt-center',
name: 'select',
text: 'Order Selection',
titleAttr: 'Order Selection',
autoClose: true,
buttons: [{
text: 'Select All',
action: function(e, dt, node, config) {
dt.rows().select()
}
}, {
text: 'Deselect All',
action: function(e, dt, node, config) {
dt.rows().deselect()
}
}, {
text: 'Select Filtered',
action: function(e, dt, node, config) {
dt.rows({
search: 'applied'
}).select()
}
}, {
text: 'Select This Page',
action: function(e, dt, node, config) {
dt.rows({
page: 'current'
}).select()
}
}, {
//api.rows({child: 'hidden'}).ids().each(function(id,idx){ $('table#orders-table > tbody > tr#'+id+' > td:first').trigger('click') })
text: 'Expand Visible/Selected',
action: function(e, dt, node, config) {
dt.rows({
child: 'hidden'
}).ids().each(function(id, idx) {
$('table#orders-table > tbody > tr#' + id + ' > td:first').trigger('click')
})
}
}]
}, {
extend: 'collection',
text: 'Perform Action',
titleAttr: 'Perform Action',
className: 'require-selected show-count-selected btn-txt-center width-24-pc', //export-rows-selected require-selected show-count-selected
name: 'action',
autoClose: true,
buttons: [{
text: 'Item Summary',
action: function(e, dt, node, config) {
var selectedRows = getSelectedIds()
if (!selectedRows) {
alert('No rows selected')
return
}
console.log('Selected Rows: ', selectedRows.join(','))
}
}, {
text: 'Reprocess Selected',
action: function(e, dt, node, config) {
var selectedRows = getSelectedIds()
if (!selectedRows) {
alert('No orders selected')
return
}
var r = confirm("Are you sure you want to reprocess " + selectedRows.length + " order(s)?");
if (r !== true)
return
console.debug('Reprocessing row IDs', selectedRows)
}
}, {
text: 'Delete Selected',
action: function(e, dt, node, config) {
var selectedRows = getSelectedIds()
if (!selectedRows) {
alert('No orders selected')
return
}
var conf = confirm("Are you sure you want to delete " + selectedRows.length + " order(s)?");
if (conf !== true)
return
console.debug('Deleting row IDs', selectedRows)
}
}, {
text: 'Restore Selected',
action: function(e, dt, node, config) {
var selectedRows = getSelectedIds()
if (!selectedRows) {
alert('No orders selected')
return
}
var conf = confirm("Are you sure you want to restore " + selectedRows.length + " order(s)?");
if (conf !== true)
return
console.debug('Restoring row IDs', selectedRows)
}
}, {
text: 'Set Notes',
action: function(e, dt, node, config) {
var selectedRows = getSelectedIds()
if (!selectedRows) {
alert('No orders selected')
return
}
var notes = prompt("Set notes for " + selectedRows.length + ' orders:');
if (!notes)
return
console.debug('Setting notes for row IDs', selectedRows)
}
}]
}]
});
dtInstance.buttons('tools', null).container().appendTo('#button-container');
})
使用以下命令關閉最后一列的行選擇：
selector: 'td:not(:last-child)' // no row selection on last column
把它放在你的“選擇”選項中，看起來像這樣：
var dtInstance = $('#lainlain')
// Update the operation button values and disabled status based on what rows are visible/selected/filtered
.on('draw.dt page.dt order.dt draw.dt column-visibility.dt search init.dt deselect.dt select.dt', dtCbsAndEvents.updateOperationButtons)
.DataTable({
select: {
style: 'multi+shift',
selector: 'td:not(:last-child)'
},
buttons: []
})
HTML 如何驗證文本框是否已填充並將用戶發送到另一個頁面
[英]HTML How to verify if a text box is filled and send the user to another page
如何在PHP中使用ajax jquery將列表框值發送到另一個列表框而不刷新頁面
[英]How can send one list box value to another list box without refreshing page using ajax jquery in php
如何使用AJAX在PHP中將選擇框值作為數組從一個頁面傳遞到另一頁面？
[英]How to pass the select box value as an array using AJAX from one page to another in PHP?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.