I want to ask if someone know about 'export to excel' button in Laravel. I need to use the button inside the DataTable beside 'export pdf' button. Can someone help me to make the button function properly.
First pic is the controller for 'export' 1
if(!empty($request['export']))
{
return Excel::download(new ExcelExport($start_date, $end_date, $staff_name), 'Laporan Pegawai Tidak Aktif.xls');
}
Sec pic is the blade for DataTable script 2
$(function () {
$('#staffs').DataTable({
dom:
"<'row'<'col-sm-5'l><'col-sm-4 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [{
extend : 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i> Export PDF',
className: 'btn btn-default',
title: "Senarai Pegawai Tidak Aktif",
exportOptions:
{
columns: ':visible:not(.not-exported)'
},
},
{
extend : 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i> Export Excel',
className: 'btn btn-default',
name:'export',
text: function (dt)
{
return '<i class="fa fa-file-excel-o"></i> ' + ('buttons.excel', 'Export Excel');
},
action: function (e, dt, button, config)
{
var url = dt.ajax.url() || window.location.href;
var params = _buildParams(dt, 'excel');
_downloadFromUrl(url, params);
}
}
],
*help me to check whether the code for export excel is right or not
if you want to see an example of how to add export button in datatable then this link is the right place for you.
Larave Yajra DataTables
Related
Hello I have the following controller method to return data to my datatable in Laravel,
Controller Method
public function get(Request $request) {
return Datatables::of(AppUser::all())
->addColumn('status', function ($user) {
if ($user->status == 1) {
return '<span class="label label-success">Active</span>';
} else {
return '<span class="label label-danger">Inactive</span>';
}
})
->addColumn('actions', function ($user) {
return view('backend.appuser.actionButton', compact('user'))->render();
})
->make(true);
}
Then in the view I render the datatable, I have the following code.
<table id="users-table" class="table table-condensed table-hover">
<thead>
<tr>
<th>Username</th>
<th>NIC</th>
<th>Mobile</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
Inside my script tag I have the below code
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '{{ route("admin.app-access.user.get") }}',
type: 'get',
data: {status: 1, trashed: false}
},
columns: [
{data: 'email', name: 'email'},
{data: 'nic', name: 'nic'},
{data: 'mobile', name: 'mobile'},
{data: 'status', name: 'status'},
{data: 'actions', name: 'actions'}
],
pageLength:25,
lengthMenu:[[10,25,50,100,-1],[10,25,50,100,"All"]],
order: [ [ 0, "desc" ] ],
dom: "lBfrtip",
buttons:
[
{extend: 'excel', footer: true, title: 'User Details'},
{extend: 'pdf', footer: true, title: 'User Details', orientation: 'landscape', pageSize: 'LEGAL'},
{extend: 'print', footer: true, title: 'User Details', orientation: 'landscape', pageSize: 'LEGAL'}
],
searchDelay: 500
});
});
The Error
When I go to the index page that the datatable is loaded, it says,
DataTables warning: table id=users-table - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
What I tried
I tried making a little syntax error in the above controller method to see if the application crashes. If the application crashes, it means that the request sent from the datatable must have hit my controller method. (App actually crashed, so the request from the datatable is coming to my controller method.)
I went to the network tab in my developer tools and inspected the response for the request sent from the data-table. The response is empty. It just shows three empty lines. Since the response is empty, I can not figure out what the error is.
Below picture shows the response I got.
(I am using Laravel 5.4)
I have added rawColumns before the ->make(true) will you try with this solution once?
It should work I guess so!
So here your will looks like...
public function get(Request $request) {
return Datatables::of(AppUser::all())
->addColumn('status', function ($user) {
if ($user->status == 1) {
return '<span class="label label-success">Active</span>';
} else {
return '<span class="label label-danger">Inactive</span>';
}
})
->addColumn('actions', function ($user) {
return view('backend.appuser.actionButton', compact('user'))->render();
})
->rawColumns(['status', 'actions'])
->make(true);
}
<div class="sections_container" v-for="(section, index) in sections" #click="selected_section_id = section.id">
<div class="section">
<input class="section_name" type="text" name="name" v-model="section.name" #keyup.enter="updateSection(section)">
</div>
<div class="actions">
<div style="margin-right: 10px;">
<button class="btn btn-primary" #click="updateSection(section)"type="submit"> <i class="fa fa-edit"></i></button>
</div>
<div>
<button #click="deleteSection(index)" class="btn btn-danger" type="submit"><iclass="fa fa-trash"></i></button>
</div>
</div>
</div>
The Data is abtained right and here is my data and my computed property
computed: {
selectedSection: () => {
return this.sections.filter((section) => {
console.log('selec')
return this.selected_section_id == section.id;
});
}
},
mounted() {
window.axios.get(route('allSections')).then((res) => {
this.sections = res.data;
});
},
data: function () {
return {
selected_section_id: 1,
new_section_name: '',
sections: [],
groups: [],
questions: []
}
Now When i Click the button the Seletcted_section_id should be changed but nothing happens i check the vue dev tool plugin but nothing changed unless i press the refresh button here is the two functions updateSection and deleteSection for updating and deleting the data does those functions can affect the data is not changing
updateSection(section) {
window.axios.patch(route("section.update", section.id), {name: section.name}).then((res) => {
this.sections = res.data;
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: 'Updated Successfully'
})
});
},
deleteSection(index) {
Swal.fire({
title: 'Are you sure',
text: "You won't be able to revert this",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it'
}).then((result) => {
if (result.value) {
window.axios.delete(route('section.destroy', this.sections[index])).then(() => {
this.sections.splice(index, 1);
Swal.fire(
'Deleted',
'Your file has been deleted.',
'success'
)
})
}
})
<div class="sections_container" v-for="(section, index) in sections" #click="selected_section_id = section.id">
I assume that the reason why you are directly assigning the selected_section_id to section.id is to debug and check it straightforward. Though not sure if the section will be captured on the #click event, you can try #click="console.log(section, section.id)" if it returns anything.
Otherwise, let's try this process of elimination:
Let's revert above back to your function: <div class="sections_container" v-for="(section, index) in sections" #click="selectedSection">
#click is an event that needs user interactions, I could recommended to use it under methods, so instead of using computed, move the function under methods:
methods: {
selectedSection: () => {
return this.sections.filter((section) => {
console.log('selec')
return this.selected_section_id == section.id;
});
}
}
On your function selectedSection, this line return this.selected_section_id == section.id doesn't assign the section.id because you are using here the comparison operator == thus it doesn't do anything, instead use the regular assign operator:
return this.selected_section_id = section.id
If the above fix doesn't work, you can try going skeletal starting with the function itself, by console.log everything and check if it correctly returns anything, like in this order:
selectedSection: () => {
console.log(this.sections)
}
selectedSection: () => {
return this.sections.filter((section) => {
console.log('check the values of section: ', section, section.id);
return this.selected_section_id = section.id;
});
}
Oh, also, you could try assigning a key to your v-for directive: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State
I have a problem that I could not solve, in practice I wanted to get back to my ajax call mixed custom data between data obtained from two models, then I did my queries I did a for cycle and I created a custom array to pass to the ajax call on the view, the problem that gives me an error saying that it doesn't find the data-> folder on the button, sorry but I'm a novice I don't even know if I used a right practice in doing that.
``` public function index(Request $request)
{
if($request->ajax())
{
$folder=folder::with('person')->where('rpe','AB')->where('des',1)->get();
foreach($folder as $folder)
{
$person=Person::find($folder->person);
$data[] = [
'name' => $person->name,
'surname' => $person->surname,
'folder' => $folder->p_r,
];
}
return DataTables::of($data)
->addColumn('action', function($data){
$button = '<button type="button" name="handle" id="'.$data->folder.'" class="handle btn btn-primary btn-sm">Handle</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('test');
}```
This is ajax in the view
``` $(document).ready(function(){
$('#user_table').DataTable({
processing: false,
serverSide: true,
ajax: {
url: "{{ route('test.index') }}",
},
columns: [
{
data: 'name',
name: 'name'
},
{
data: 'surname',
name: 'surname'
},
{
data: 'action',
name: 'action',
orderable: false
}]
});});
```
without ``` id = "'. $ data-> p_r.``` works all all fields in the datatable are printed as soon as I put it tells me: *"draw": 1, "recordsTotal": 3, "recordsFiltered": 0, "data": [], "error": "Exception Message: n trying to get property 'folder’ of non-object"}*
Try one of below solution-
In below line-
$button = 'folder.'" class="handle btn btn-primary btn-sm">Handle';
There is no property as 'folder' inside variable $data. Debug or show the value of $data.
Change below line -
$button = 'folder.'" class="handle btn btn-primary btn-sm">Handle';
To
$button = 'folder ?? NULL).'" class="handle btn btn-primary btn-sm">Handle';
I have this dropdown menu that if I click value on it, I would like to trigger a function but is not working.
<data-list
ref="UiGroupName"
name="groupName"
id="groupName"
keyProperty="groupName"
label='Group Name: '
:options="shift_groups"
:change="gotoGroups()"
></data-list>
I have also tried #click on :change="gotoGroups()" but still doesn't work. Am I missing something?
To trigger event from child to parent you need to use $event
Vue.component('child', {
template: '<button #click="trigger">Trigger for Parent</button>',
methods: {
trigger: function () {
this.$emit('triggerparent')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
msg: ''
},
methods: {
actionParent: function () {
console.log('Parent triggerd at : '+(new Date()).getTime());
this.msg = 'Parent triggerd at : '+(new Date()).getTime();
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="counter-event-example">
<p>{{ msg }}</p>
<child #triggerparent="actionParent"></child>
</div>
I am trying to create a custom button(with a drop down list) in summer-note v0.8.1.
I was previously using an older version which worked well, however in the new version I cannot figure out how to create a dropdownlist button.
Please help me out in adding attributes to the custom button.
Did you see https://github.com/summernote/summernote/issues/1611?
I just implemented (using Angular) a dropdown with 2 buttons with v0.8.1, but I have to write custom HTML for those 2 buttons that are inside the dropdown:
$scope.summernoteOptions = {
buttons: {
dropdownExample: function dropdownExample(context) {
var pdfButton = ui.buttonGroup([
ui.button({
className: "dropdown-toggle",
contents:
'<span class="fa fa-file-pdf-o"></span> <span class="caret"></span>',
tooltip: "Your tooltip",
data: {
toggle: "dropdown",
},
}),
ui.dropdown({
className: "drop-default summernote-list",
contents:
'<div class="btn-group">' +
'<button type="button" class="btn btn-default btn-sm" title="PDF 1"><i class="fa fa-file-pdf-o"></i>PDF 1</button>' +
'<button type="button" class="btn btn-default btn-sm" title="PDF 2"><i class="fa fa-file-pdf-o"></i>PDF 2</button></div>',
callback: function ($dropdown) {
$dropdown.find(".btn").click(function () {
context.invoke("editor.insertText", "text");
});
},
}),
]);
return pdfButton.render(); // jquery object
},
},
};