How can I edit the render data in datatable using jquery in laravel?
How can I edit the render data in datatable using jquery in laravel?
Jnezsmith
Posts: 4Questions: 2Answers: 0
<script>
$(document).ready(function() {
$("#approve_table").DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('approve_manual.index') }}"
},
columns:[
// { data: 'action', name: 'action', orderable: false },
{ data: "view", name: "view", orderable: false },
{ data: "chkbox", name: "chkbox", orderable: false },
{
data: "picture",
name: "picture",
render: function(data, type, full, meta) {
if (data != '' || data != null) {
return (
"<img src={{ asset('storage/pictures/') }}/" +
data +
" loading='lazy' width='30' class='img-thumbnail' />"
);
} else {
return (
"<img src={{ asset('storage/pictures/blank.png') }}/" + " width='30' class='img-thumbnail' />"
);
}
},
orderable: false
},
{ data: 'name', name: 'name' },
{ data: 'date', render: $.fn.dataTable.render.moment( 'dddd D MMMM YYYY' ) },
{ data: 'category', name: 'category' },
// { data: 'duration', name: 'duration' },
{ data: "duration",
render: function(data, type, row){
var strings = row.duration;
var temp = strings.split(":")
for (let index = 0; index < temp.length; index++) {
var hr = temp[0];
var mins = temp[1];
var sec = temp[2];
var zero = hr.charAt(0)
var one = hr.charAt(1)
var two = mins.charAt(0)
var three = mins.charAt(1)
if (hr != 00 && mins != 00){
var time = hr + ' hr, ' + mins + ' mins';
}
else if (hr != 00 && mins == 00){
if ( zero == 0 ) {
time = one + ' hr ';
}
else{
time = temp[0] + ' hr ';
}
}
else if (hr == 00 && mins != 00){
if ( two == 0 ) {
time = three + ' mins';
}
else{
time = temp[0] + ' mins';
}
}
else if (hr == 00 && mins == 00 && sec == 00){
var time = '1 Day';
}
return time;
}
},
},
{ data: "amount",
render: function(data, type, row){
return '₱ ' + row.amount;
},
},
]
});
var id;
$(document).on("click", ".view", function() {
id = $(this).attr("id");
$.ajax({
url: "/admin/approve_manual/" + id + "/edit",
dataType: "json",
error: function (html) {
// console.error(html);
// console.log(html);
},
success: function(html) {
// console.log(html);
document.getElementById("blah").src = "{{ asset('storage/pictures/') }}" + '/' + html.data[0].picture;
$("#approve_id").val(html.data[0].idx);
$("#name").text(html.data[0].name);
$("#emp_no").val(html.data[0].emp_no);
$("#date").val(html.data[0].date);
$("#category").val(html.data[0].category);
var strings = html.data[0].duration;
var temp = strings.split(":");
var hr = temp[0];
var mins = temp[1];
var sec = temp[2];
var zero = hr.charAt(0)
var one = hr.charAt(1)
var two = mins.charAt(0)
var three = mins.charAt(1)
if (hr != 00 && mins != 00){
var time = hr + ' hr, ' + mins + ' mins';
}
else if (hr != 00 && mins == 00){
if ( zero == 0 ) {
time = one + ' hr ';
}
else{
time = temp[0] + ' hr ';
}
}
else if (hr == 00 && mins != 00){
if ( two == 0 ) {
time = three + ' mins';
}
else{
time = temp[0] + ' mins';
}
}
else if (hr == 00 && mins == 00 && sec == 00){
var time = '1 Day';
}
$("#duration").val( time );
// $("#duration").val(html.data[0].duration);
$("#amount").val(html.data[0].amount);
$("#approve_modal").modal("show");
}
});
});
const save = (status, id_list) => {
$.ajax({
url: "{{ route('approve_manual.store') }}",
data: {
"_token": "{{ csrf_token() }}",
id : id_list,
status : status
},
method: "POST",
error: function(data){
console.log(data);
},
success: function(data) {
console.log(data);
var html = "";
if (data.errors) {
error(data.errors);
}
if (data.payroll) {
check_payroll();
$("#approve_modal").modal("hide");
document.getElementById("loading").style.display = "none";
}
if (data.success) {
// document.getElementById("cancel").click();
// $("#emp_no").val(data.count);
// $("#approve_table").DataTable().ajax.reload();
// myTable.ajax.reload();
document.getElementById("approve_for_many").removeAttribute("disabled");
document.getElementById("unapprove_for_many").removeAttribute("disabled");
document.getElementById("approve_each").removeAttribute("disabled");
document.getElementById("unapprove_each").removeAttribute("disabled");
document.getElementById("loading").style.display = "none";
success(data.success);
$("#approve_modal").modal("hide");
// myTable.clear().draw();
}
$('input#checkAll2').prop('checked', false);
$('input#checkbox_id').prop('checked', false);
chkbox = [];
}
});
}
});
</script>
Answers
It looks like you're calling
columns.render, what's the problem, you haven't said.We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin