Im fetching my data in my server side and I put checkbox. Example I have 15 data. When I checked data 1 and data 13 then I submit it. Im only getting the data 13.
View
<form id="approved-selected-form">
<table id="get-rfp-for-approval-table" class="table table-striped table-bordered table-sm">
<thead class="thead-global">
<tr>
<th></th>
<th>#</th>
<th>RFP#</th>
<th>Payee</th>
<th>Doc Ref</th>
<th>Date Needed</th>
<th>Requesting Department</th>
<th>Amount</th>
<th>Status</th>
<th>Created By</th>
<th>Approval Status</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button type="submit" class="btn btn-success btn-sm">Approved</button>
</form>
Fetching my data using js
$(document).ready(function(){
setTimeout(
function()
{
// getRFPforApproval();
//search each column datatable
$('#get-rfp-for-approval-table thead th').each(function(e) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="'+title+'" class="form-control" style="font-size: 9px;"/><br><p style="font-size: 11px; font-weight:bolder">'+title+'</p>' );
});
$('#get-rfp-for-approval-table').DataTable().columns().every(function() {
var that = this;
$( 'input', this.header() ).on('keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
}, 2000);
var table3 = $('#get-rfp-for-approval-table').DataTable({
ajax: {
url: '/requests/request-for-payment/getRFPforApproval',
dataSrc: ''
},
columns: [
{ data: 'checkbox' },
{ data: '#' },
{ data: 'number' },
{ data: 'vendor' },
{ data: 'document_reference' },
{ data: 'date_needed' },
{ data: 'requesting_department' },
{ data: 'amount' },
{ data: 'status' },
{ data: 'created_by' },
{ data: 'approval_status' },
{ data: 'action' },
],
columnDefs: [
{
targets: 0,
checkboxes3: {
selectRow: true
}
}
],
select: {
style: 'multi'
},
order: [[1,'desc']]
});
My form after I selected some checkboxes
if ( $('#approved-selected-form').length > 0 ) {
$('#approved-selected-form').submit(function(e){
var form = this;
console.log(table3.column(0).checkboxes3.selected());
return false;
var rows_selected = table3.column(0).checkboxes.selected();
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'checkbox[]')
.val(rowId)
);
});
swal({
title: "Are you sure?",
text: "Transaction will be approved.",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willSave) => {
if (willSave) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
$.ajax({
url: '/requests/request-for-payment/approvedTransaction',
type: "POST",
data: formData,
beforeSend: function() {
var span = document.createElement("span");
span.innerHTML = '<span class="loading-animation">LOADING...</span>';
swal({
content: span,
icon: "warning",
buttons: false,
closeOnClickOutside: false
});
$('.request-for-payment-finish').attr('disabled', 'disabled');
},
success: function(response) {
if (response != '') {
$('#get-request-for-payment-table').DataTable().destroy();
getRequestForPaymentTable();
$('#add-request-for-payment-form').trigger("reset");
swal("Transaction has been saved!", {
icon: "success",
});
setTimeout(
function()
{
window.location.href = "/requests/request-for-payment?id="+response+"#view-request-for-payment-modal";
}, 1500);
}
},
complete: function() {
$('.request-for-payment-finish').removeAttr('disabled');
}
});
} else {
swal("Save Aborted");
}
});
e.preventDefault();
return false;
})
}
I'm encountering error: Uncaught TypeError: Cannot read property 'selected' of undefined into this line. "table3.column(0).checkboxes3.selected()".
Question: I think when I checked the other data that is not on the same page(Example data 1 is in page 1, data 13 is in page 2). I can't get the second data. How can I get all the data even though it is not in the same page?
UPDATE:
I managed to fix the error by adding these
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
