I try to run TableTools but I have a problem.
Copy, CSV, Excel and PDF not work but print is ok.
I put into the sSwfPath : CDN 2.2.2
I have an console error :GET http://localhost/development/swf/copy_csv_xls_pdf.swf 404 (Not Found)
var tt = new $.fn.dataTable.TableTools( table, {
"dom": 'T<"clear">lfrtip',
"tableTools":
{
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "pdf",
"sButtonText": '<i class="fa fa-file-pdf-o"></i>',
"sPdfMessage": "Your custom message would go here."
},
{
"sExtends": "xls",
"sButtonText": '<i class="fa fa-file-excel-o"></i>'
},
{
"sExtends": "print",
"sButtonText": '<i class="fa fa-print"></i>'
}
]
}
} );
$( tt.fnContainer()).insertAfter('.header-link');
I don't understand my error.
Thanks
Related
when I want to delete data, the data in the rekap table is deleted but the file_rekap table and image_rekap table and those in the folder also don't want to be deleted
Controller Rekap
public function delete_rekap($id){
$data = rekap::findOrfail($id);
$images=image_rekap::where("rekap_id",$data->id)->get();
foreach($images as $image){
if (File::exists("images_rekap/".$image->image)) {
File::delete("images_rekap/".$image->image);
}
}
$files= file_rekap::where("rekap_id",$data->id)->get();
foreach($files as $file){
if (File::exists("rekap_file/".$file->file)) {
File::delete("rekap_file/".$file->file);
}
}
$data->delete();
return redirect()->route('rekap')->with('success','Data berhasil dihapus');
}
this my button
<a href="#" class="btn btn-danger delete m-1" data-id="{{ $row->id}}" data-customer="{{ $row->customer}}" >DELETE</a>
script
$('.delete').click(function(){
var rekapid = $(this).attr('data-id');
var customer = $(this).attr('data-customer');
swal({
title: "Yakin",
text: "Kamu akan menghapus data dengan nama "+customer+" ",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
window.location = "/delete_rekap/"+rekapid+" "
swal("Data Berhasil Terhapus", {
icon: "success",
});
} else {
swal("Data tidak jadi dihapus");
}
});
});
</script>
what steps should i do to fix it
if you want to delete, try
unlink php
I'm trying to use sticky header from mmenu plugin, but can't get it to work.
<script src="./mmenu.js"></script>
<script src="./mhead.js"></script>
<script>
Mmenu.configs.classNames.selected = "active";
Mmenu.configs.offCanvas.page.selector = "#my-page";
document.addEventListener(
"DOMContentLoaded", () => {
const menu = new Mmenu( "#my-menu", {
slidingSubmenus: false,
extensions: ["theme-dark"],
"iconbar": {
"use": true,
"top": [
"<a href='#/'><i class='fa fa-home'></i></a>",
"<a href='#/'><i class='fa fa-user'></i></a>"
],
"bottom": [
"<a href='#/'><i class='fa fa-twitter'></i></a>",
"<a href='#/'><i class='fa fa-facebook'></i></a>",
"<a href='#/'><i class='fa fa-linkedin'></i></a>"
]
},
"navbars": [
{
"position": "top",
"content": [
"searchfield"
]
}
]
});
}
);
document.addEventListener(
"DOMContentLoaded", () => {
new mhead( "#my-header", {
pin: 100
});
}
);
</script>
when I run it, I keep getting index.html:121 Uncaught ReferenceError: mhead is not defined
at HTMLDocument.
Anyone has the experience this js plugin? https://www.mmenujs.com/mhead/tutorial.html
Everything works fine, except for the sticky header.
change it to
new Mhead
(notice the capital M)
I am trying to return an attribute tag from controller to front-end side but attribute link and class is not working.
Click here (image)
Controller Side
public function religionlist(){
$view_data = DB::select("SELECT
id,religion
FROM
hrm_religion");
$religion_data = collect($view_data);
return DataTables::of($religion_data)
->addColumn('Link', function ($religion_data) {
return
' <a href="'. url('/religion') . '/' .
Crypt::encrypt($religion_data->id) .
'/edit' .'"' .
'class="btn btn-success btn-sm block btn-flat"><i class="glyphicon glyphicon-edit-sign" id="customer-confrimed"></i> confirm</a>';
})
->editColumn('id', '{{$id}}')
->setRowId('id')
->make(true);
}
Front-end Side
$(document).ready(function() {
var table = $('#list_table').DataTable( {
"processing": true,
"serverSide": true,
"paging": true,
"ajax": "{{URL::to('/')}}/religion_list",
"columns": [
{ "data": "religion" },
{ "data": "Link", name: 'action', orderable: false, searchable: false},
],
"order": [[0, 'asc']]
});
});
Can you replace your return statement with below one?
return '<i class="glyphicon glyphicon-edit-sign" id="customer-confrimed"></i> Confirm'
Please review this below link
https://github.com/yajra/laravel-datatables/issues/1305
just add ->rawColumns(['Link']) in your code.
return DataTables::of($religion_data)
->addColumn('Link', function ($religion_data) {
return
' <a href="'. url('/religion') . '/' .
Crypt::encrypt($religion_data->id) .
'/edit' .'"' .
'class="btn btn-success btn-sm block btn-flat"><i class="glyphicon glyphicon-edit-sign" id="customer-confrimed"></i> confirm</a>';
})
->editColumn('id', '{{$id}}')
->setRowId('id')
->rawColumns(['Link'])
->make(true);
So im creating a basic tasklist where i want to set them done, when the <li>is clicked. When it's clicked i want that a class is added to the <li> thats clicked. i could not figure this out with the docs so i hope someone could help me out :D
The code i already have:
<transition-group name="list">
<li class="list-item list-group-item" v-for="(task, index) in list" :key="task.id" v-on:click="finishTask(task.id)" >
#{{ task.text }}
<button #click="removeTask(task.id)" class="btn btn-danger btn-xs pull-right">Delete</button>
</li>
</transition-group>
</ul>
</div>
// get the csrf token from the meta
var csrf_token = $('meta[name="csrf-token"]').attr('content');
export default {
data() {
return {
list: [],
taskInput: {
id: '',
text: ''
}
};
},
// So the tasks will show when the page is loaded
created() {
this.allTasks();
},
methods: {
// get all the existing tasks
allTasks() {
axios.get('tasks').then((response) => {
this.list = response.data;
});
},
// create a new task
createTask() {
axios({
method: 'post',
url: '/tasks',
data: {
_token: csrf_token,
text: this.taskInput.text,
},
}).then(response => {
this.taskInput.text = '';
this.allTasks();
});
},
// remove the tasks
removeTask(id) {
axios.get('tasks/' + id).then((response) => {
this.allTasks();
});
},
finishTask(id) {
axios({
method: 'post',
url: 'tasks/done/' + id,
data: {
_token: csrf_token,
data: this.taskInput,
},
}).then(response => {
this.allTasks();
});
}
}
}
I know how i should do this with jquery but not with vue js, i hope this aint a to stupid question :D
You can bind css classes and styles, add a Boolean done property to your note object with default value of false, when you click the note change its done property to true. here is an example
new Vue({
el:"#app",
data:{
notes: [
{ text: "First note", done:false },
{ text: "Second note", done:false },
{ text: "Third note", done:false },
{ text: "Fourth note", done:false },
{ text: "Fifth note", done:false }
]
},
methods:{
finishNote(note){
// send your api request
// then update your note
note.done = true
}
}
})
.done{
background-color:green;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="note in notes" :class="{done:note.done}" #click="finishNote(note)">{{note.text}}</li>
</ul>
</div>
You can use the event argument. Which is automatically provided on your on click method.
onListClicked(event) {
event.target.className += " myClass";
}
Here I did a demo for you: https://jsfiddle.net/6wpbp70g/
Regards, I have a problem I am using the SmartAdmin DataTable and I need to put three buttons in a column to edit, view and delete an element I have already put the buttons in a Column, but until now I have not been able to make them respond to the even to click.
Thank you.
enter image description here
This is the code I have in my ngOnInit
this.options = {
dom: "Bfrtip",
ajax: (data, callback, settings) => {
this._usuarioService.readUsuarios()
.subscribe((data) => {
callback({
aaData: data
})
})
},
columns: [
{ data: 'id' },
{ data: 'persona.nombre' },
{ data: 'persona.apellido' },
{ data: 'persona.correo' },
{ data: 'rol.nombre' },
{ data: 'persona.sede.nombre' },
{defaultContent: '<center><button class=\'btn btn-success btn-xs\'(click)=\'leerUnUsuario(id)\'> Ver </button> ' +
'<button class=\'btn btn-info btn-xs\' (click)=\'actualizarUsuario(id)\'> Editar </button> ' +
'<button class=\'btn btn-danger btn-xs\' (click)=\'eliminarUsuario(id)\'> Borrar </button></center>' },
]
};
Already solved, I received help from Alain D'EURVEILHER and everything is already very well.
ngOnInit() {
this.options = {
dom: "Bfrtip",
ajax: (data, callback, settings) => {
this._usuarioService.readUsuarios()
.subscribe((data) => {
callback({
aaData: data
})
})
},
columns: [
{ data: 'id' },
{ data: 'persona.nombre' },
{ data: 'persona.apellido' },
{ data: 'persona.correo' },
{ data: 'rol.nombre' },
{ data: 'persona.sede.nombre' },
{
render: (data, type, fullRow, meta) => {
return `
<button class="btn btn-xs btn-success accion-ver-usuario" data-usuario-id="${fullRow.id}">ver</button>
<button class="btn btn-xs btn-info accion-editar-usuario" data-usuario-id="${fullRow.id}">editar</button>
<button class="btn btn-xs btn-danger accion-borrar-usuario" data-usuario-id="${fullRow.id}">borrar</button>
`;
}
}
]
};
ngAfterViewInit(){
document.querySelector('body').addEventListener('click', (event)=> {
let target = <Element>event.target;// Cast EventTarget into an Element
if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-ver-usuario')) {
this.verUsuario(target.getAttribute('data-usuario-id'));
}
if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-editar-usuario')) {
this.editarUsuario(target.getAttribute('data-usuario-id'));
}
if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-borrar-usuario')) {
this.borrarUsuario(target.getAttribute('data-usuario-id'));
}
});
}
verUsuario(userId){
console.log("user displayed:", userId);
}
editarUsuario(userId){
console.log("user edited:", userId);
}
borrarUsuario(userId){
console.log("Delete user", userId, "?");
}