Here is what I'm trying to do. I'm trying to export all of the data in a datatable regardless of the amount displayed on the page.
Based on the link: https://datatables.net/forums/discussion/48044/export-all-regardless-of-pagination
I tried to do the following:
but guess what I'm only able to export the csv file with only a certain amount of records.
var datatableFilters_{$this->id} = ".App_Json::encode($this->strictFilters).";
var datatablePassthru_{$this->id} = ".App_Json::encode($this->passthruVariables).";
$( document ).ready(function() {
var datatable = $('#{$this->id}').DataTable(
{
".(($this->allowExporting) ? "dom: 'Bfrtip', buttons: [ { extend:'copy',exportOptions: {modifier: {page: 'all', search: 'none' } }, }, { extend:'csv',exportOptions: {modifier: {page: 'all', search: 'none', serverSide: 'false' } }, }, { extend:'excel',exportOptions: {modifier: {page: 'all', search: 'none' } }, }, { extend:'pdf',exportOptions: {modifier: {page: 'all', search: 'none' } }, }, { extend:'print',exportOptions: {modifier: {page: 'all', search: 'none' } }, } ], " : '')."
".(($this->showRecordsPerPageAtBottom) ? "sDom: 'Rfrtlip'," : '')."
serverSide: true,
responsive: true,
pageLength: {$this->recordsPerPage},
searching: ".(($this->allowSearch) ? 'true' : 'false').",
paging: ".(($this->allowPagination) ? 'true' : 'false').",
ordering: ".(($this->allowSorting) ? 'true' : 'false').",
info: ".(($this->showRecordCount) ? 'true' : 'false').",
language: {
search: '_INPUT_',
searchPlaceholder: 'Search...'
},
$order
ajax: {
url: 'ajax.php',
type: 'POST',
data: function(d) {
d.ajaxAction = 'loadAjaxClassAction',
d.className = 'Browser_DataTable',
d.classFunction = 'ajaxProcess',
d.aryFunctionAttributes = jsonEncode([
'".get_called_class()."',
jsonEncode(datatableFilters_{$this->id}),
jsonEncode(datatablePassthru_{$this->id})
])
}
}
}
);
Is there a way to export all records?
Related
Here's my ID column data structure
ID: [1,2,3,4,5,6,7,8]
Here is my controller's code.
$transaction = ExpenseEntry::with('transaction');
return DataTables::eloquent($transaction)
->editColumn('transaction', function (ExpenseEntry $expense) {
return $expense->transaction->map(function ($transaction) {
return $transaction->id;
});
})->make(true);
and Javascript Function
$(document).ready(function () {
$('#data-table').DataTable({
"ordering": false,
"processing": true,
"serverSide": true,
"ajax": '{!! route('
expense_dts ') !!}',
columns: [{
data: 'id',
name: 'id'
},
{
data: 'expense_type',
name: 'expense_type'
},
{
data: 'amount',
name: 'amount'
},
{
data: 'date',
name: 'date'
},
{
data: 'description',
name: 'description'
},
{
data: 'transaction',
name: 'transaction.id'
}
]
});
});
It is working but the problem is it is showing all the transacation.id in a table like this [1,2,3,4,5,6]
I want to get them like each id in each row with its column.
Im fetching my data in my server side and I put checkbox.
I need some clarification, do I need to put checkbox here or it will be automatically added?
Controller
$result[] = array(
'#' => '<span style="font-size: 12px; color: gray">'.$counter++.'</span>',
'number' => '<p>'.$value->number.'</p>',
'vendor' => '<p>'.$vendor->name .'</p>',
'document_reference' => '<p>'.$value->document_reference.'</p>',
'date_needed' => '<p>'.$value->date_needed.'</p>',
'requesting_department' => '<p>'.$department->name.'</p>',
'amount' => '<p align="right">'.number_format($value->total_amount,2).'</p>',
'status' => '<p>'.$status.'</p>',
'approval_status' => '<p id="'.$value->id.'">'.$approval.'</p>',
'created_by' => '<p id="created_at'.$value->id.'">'.$user->name.'</p>',
'action' => '<i class="fa fa-eye"></i>',
'checkbox' => '<input type="checkbox" name="checkbox[]" value="'.$value->id.'">'
In my view page I used route to call this method. In here I have now my data.
My View
var table3 = $('#get-rfp-for-approval-table').DataTable({
'processing': true,
'serverSide': true,
ajax: {
url: '/requests/request-for-payment/getRFPforApproval',
dataSrc: ''
},
columns: [
{ 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' },
{ data: 'checkbox' },
],
columnDefs: [
{
targets: 11,
checkboxes: {
selectRow: true
}
}
],
select: {
style: 'multi'
},
order: [[1,'desc']]
});
Example I have 15 data, I checked data 5 and data 14. then I submit the form.
My form
if ( $('#approved-selected-form').length > 0 ) {
$('#approved-selected-form').submit(function(e){
var form = this;
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)
);
});
var formData = $(this).serialize();
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;
})
}
NOTE: I tried to dd it in my controller it gives me this
array:1 [
"get-rfp-for-approval-table_length" => "10"
]
I also noticed that in my th, I dont have checkbox(when I clicked this, everything will be checked). Im using this as a guide. https://jsfiddle.net/snqw56dw/3182/.
Question: How can I get those values in my controller?
You should be returning ID in your controller.
$result[] = array(
// ... skipped ...
'checkbox' => $value->id
);
Also since checkbox in column with index 11, you should be using that index when retrieving the data.
var rows_selected = table3.column(11).checkboxes.selected();
On the side note, I see that you're using server-side processing mode ('serverSide': true). Make sure your controller returns proper response.
Hi I'm working with Datatable. I am populating it using PHP Codeigniter and AJAX request. The data is loading fine but the search function of dataTable is not working.
Here's the ajax call so far
function get_card_info(id){
if(id != ''){
$.ajax({
'url' : '<?php echo base_url('getter/get_card_info/'); ?>'+id,
'type' : 'POST',
'data' : {'id' : id},
'cache' : false,
'success' : function(data){
if ($.trim(data)){
var json = JSON.parse(data);
var suffix = json.info[0].Citizen_Suffix !== null ? json.info[0].Citizen_Suffix : '';
var currentBarangay = json.currentAddress[0].Barangay_Name != 'Others' ? ', '+json.currentAddress[0].Barangay_Name : '';
$('#card_number').text(json.info[0].card_id);
$('#fullname').text(json.info[0].Citizen_Title+' '+json.info[0].Citizen_LastName+', '+json.info[0].Citizen_FirstName+' '+json.info[0].Citizen_MiddleName+' '+suffix);
$('#address').text(json.currentAddress[0].Address_Name+currentBarangay);
//Image
var url = '<?php echo base_url('resources/images/citizen_photo/'); ?>'+id+'.jpeg';
$('#photo').attr('src', url);
$('#dt-services').DataTable( {
"ajax": '<?php echo base_url('getter/get_merchant_services/'); ?>'+id,
"destroy": true,
"paging": false,
"columnDefs": [{
'targets': 0,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" '+(data == 'true' ? 'checked' : '')+'>' ;
}
}],
"columns" :[
{data: ""},
{data: "card_id"},
{data: "Citizen_FirstName"}
]
} );
}
else{
ShowAlert('Error', 'Card Not Found', 'danger');
}
},
'error': function(request, error){
alert(error);
}
});
}
else{
ShowAlert('Error', 'Please enter card number', 'warning');
}
};
Also, i'm trying to put checkbox so I can get the selected values. Any guide on this? Thanks
Using Server side processing, with Ignited Datatables, getting the same result set no mater the action I take no other errors are returned.
The page example: I haven't given the server a name can't include link..
> http://104.200.17.5/BotController
JS code
$(document).ready(function() {
var oTable = $('#big_table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'BotController/IpTest',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayStart ":20,
"oLanguage": {
"sProcessing": "assets/images/ajax-loader_dark.gif'>"
},
"fnInitComplete": function() {
//oTable.fnAdjustColumnSizing();
},
'fnServerData': function(sSource, aoData, fnCallback)
{
// console.log(fnCallback);
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
}
} );
});
The server call:
public function IpTest()
{
//ob_clean();
$this->datatables->select('ID,Voting_ID,User_IP,X_IP')
->unset_column('ID')
->from('User_IP_check');
echo $this->datatables->generate();
}
The solution is to use this, and bind all your column names into mData.
"aoColumns": [{
"mData": "col_name_1"
}, {
"mData": "col_name_2"
}, {
"mData": "col_name_3"
}, {
"mData": "col_name_3"
}
],
I want to display Text for my ForigenKey columns instead of numeric values. There are a lot of examples to retrieve TextMember by comparing ID but they are not working in my case. I just started to use Kendo ui so dont know much about it
Here is the code :
$(document).ready(function () {
dataSource1 = new kendo.data.DataSource({
transport: {
read: {
url: "Data/AttendanceCode/GridSelect.php",
dataType: "json",
},
update: {
url: "Data/AttendanceCode/GridUpdate.php",
dataType: "json",
type:"GET"
},
destroy: {
url: "Data/AttendanceCode/GridDelete.php",
dataType: "json",
type:"POST"
},
create: {
url: "Data/AttendanceCode/GridInsert.php",
dataType: "json",
type:"POST"
},
},
schema: {
data: "data",
model: {
id: "AttendenceID",
fields: {
AttendenceID : { editable: false, nullable: true },
TeacherID: { field: "TeacherID", defaultValue: "EIIT0002" },
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource1,
pageSize: 10,
pageable: {
refresh: true,
pageSizes: true
},
editable:{ mode : "popup" },
height: 400,
filterable: true,
columnMenu: true,
sortable: true,
reorderable: true,
resizable: true,
toolbar: ["create"],
columns: [
{ field:"AttendenceID", title: "Attendence ID", width:"130px" },
{ field: "TeacherID", title:"Teacher", width: "100px" , editor: TeacherDropDownEditor, template: "#=getTeacherName(TeacherID)#" },
{ command: ["edit", "destroy"], title: "Action", width: "210px" }],
});
});
Teacher DropDown DataSource
teacher = new kendo.data.DataSource({
transport: {
read: {
url : "Data/Teacher.php",
dataType: "json" }
},
schema: {
data : "Teacher"
}
});
// Teacher Editor
function TeacherDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "TeacherName",
dataValueField: "Service_NO",
dataSource: teacher
});
}
Different approaches i found and tried to Get Teacher Name
1 -
function getTeacherName(value) {
var text = "";
$.each(teacher, function () {
if (this.Service_NO == value) {
text = this.Name;
return false;
}
});
return text;
}
2 -
function getTeacherName(teacherID) {
for (var idx = 0, length = teacher.length; idx < length; idx++)
{
if (teacher[idx].Service_NO === teacherID)
{t = teacher[idx].Name;}
}
return t;
}
3 -
function getTeacherName(teacherID) {
$.each(teacher, function(key, val) {
if(val.Service_NO == tID){
t = val.Name;
}
});
return t;
}
It seems like dataSource (teacher) is not having any value.
PHP code is working perfectly.
Please Help if you have any idea whats wrong with my code.
Thanks !!
You are right, teacher DataSource does not have any data because you are defining how to get the data (that's what you do with the DataSource) but you are not reading it.
Add:
teacher.read();
for manually forcing the data read.
NOTE: This is something that happens magically when you have a Grid, ListView,... because these widget do it for you but this time, for displaying your grid you need to read it in advance since it is invoked from a JavaScript function (KendoUI grid code doesn't know anything about what you have in the function getTeacherName other than the name).
you should config your field:
{ field: "nu_status", title: 'Status', values: [ { text: "Active", value: 1 }, { text: "Inactive", value: 0 }]},