Develop Reference

Why my design of datatable data is not properly working in JQuery Datatable?

I have following code see my output image my design is scattered everywhere what is the reason behind this.
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary list-panel" id="list-panel">
<div class="panel-heading list-panel-heading">
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="#Url.Action("Create","Group")" id="btnCreateBranch">
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Group
</button>
</div>
<div class="panel-body">
<table id="group-data-table" class="table table-striped table-bordered" style="width:100%;">
</table>
</div>
</div>
</div>
My Jquery scripts is:
"columns": [
{ "title": "Group Code", "data": "GroupCode", "searchable": true },
{ "title": "Group Description", "data": "GroupDesc", "searchable": true },
{
"title": "Action",
"data": "GroupCode",
"searchable": false,
"sortable": false,
"render": function (data) {
return 'Edit Delete';
}
}
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
my final output is:
My output image

I have solve the problem on my own setting width by using "sWidth": "300px" in all column and problem solve.

DataTables dropdown buttons styling

I use DataTables in my project with Metronic v6 admin panel template. But DataTables dropdown export button styling doesn´t seem correct. I haven´t anything in DataTables stylesheet or DataTables js.
My dom code
dom: '<"row"<"col-8"B><"col-3 float-right"f><"col-1 float-right"l>>rtip',
buttons: [
{
extend: 'collection',
text: '<i class="fa fa-ellipsis-v"></i>',
className: 'btn btn-primary btn-elevate btn-icon btn-sm btn-square',
buttons: [
{ text: 1 },
{ text: 2 },
{ text: 3 },
{ text: 4 },
{ text: 5 }
],
dropup: true
},
{ extend: 'copy', className: 'btn btn-warning btn-elevate btn-icon btn-sm btn-square', titleAttr:'Copy', text:'<i class="fa fa-file-alt"></i>' },
{ extend: 'excel', className: 'btn btn-success btn-elevate btn-icon btn-sm btn-square', titleAttr:'Excel', text:'<i class="fa fa-file-excel"></i>'},
{ extend: 'pdf', className: 'btn btn-google btn-elevate btn-icon btn-sm btn-square', titleAttr:'PDF', text: '<i class="fa fa-file-pdf"></i>' },
{ extend: 'colvis', className: 'btn btn-info btn-elevate btn-icon btn-sm btn-square', titleAttr:'PDF', text: '<i class="fa fa-eye"></i>' },
],
It looks like this:
But after I clicked the dropdown button it seems like this:

I use DataTables released version : https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js
Version: DataTables 1.10.20

Bootstrap table actions not working on next page

Currently I am working on a page with Bootstrap tables. These tables are autofilled. On the first page there are no problems to eliminate an element, because there is a confirmation message to eliminate.
When I go to the next page, and I want to eliminate the click on the "x" to eliminate it makes the action of deleting, but no confirmation message appears.
Here is the code
can('delete', $unit)
<form id="{{ $unit->id }}" style="display: inline-block;" method="post" action="{{ url("estates/$estate->uid/units/$unit->uid") }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="delete">
<button id="deleteUnit-{{ $unit->id }}" class="btn btn-simple btn-danger eliminar" rel="tooltip" data-placement="left" title="Eliminar" name="eliminar" data-id="{{ $unit->id }}">
<i class="fa fa-times"></i>
</button>
</form>
#endcan
and
$().ready(function(){
window.operateEvents = {
'click .edit': function (e, value, row, index) {
info = JSON.stringify(row);
// swal('You click edit icon, row: ', info);
console.log(row.actions);
},
'click .remove': function (e, value, row, index) {
console.log(row);
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: false,
search: true,
showToggle: false,
showColumns: true,
pagination: true,
searchAlign: 'left',
pageSize: 10,
clickToSelect: false,
pageList: [10, 15, 20],
formatShowingRows: function(pageFrom, pageTo, totalRows){
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
//activate the tooltips after the data table is initialized
$('[rel="tooltip"]').tooltip();
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
$('[id^="deleteUnit-"]').on('click', function (e) {
event.preventDefault();
var id = $(this)[0].getAttribute('data-id');
swal({
title: '¿Estás seguro?',
text: "No es posible deshacer esta acción!",
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancelar",
confirmButtonClass: "btn btn-info btn-fill",
confirmButtonText: "Si, eliminar",
cancelButtonClass: "btn btn-danger btn-fill",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm){
document.getElementById(id).submit();
}
});
});
});
Here is an imageScreenshoot

PieChart for every row in dynamically created table

I have a dynamically created table and on click of view button in each row a modal opens that have the pie chart with no of leaves taken by people till date in categories like sick, vacation, maternity, paternity for the particular year.on click of 1st button the pie chart shows up https://imgur.com/a/wpNa3 but but if I click on any button other than 1st then I get a blank page.https://imgur.com/a/jcZjE .Why blank page is appearing??please help me.
<td>
<button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4>
</div>
<div class="modal-body">
<p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p>
<p>Leave applied on : {{pl.date_created}}</p>
<p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
My jquery Code:
$(document).on('click','.view', function(e){
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Total number of leaves applied till now'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Sick Leaves',
y: 56.33
}, {
name: 'Casual Leaves',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Vacation Leaves',
y: 10.3
}, {
name: 'Maternity Leaves',
y: 4.77
}, {
name: 'Paternity Leaves',
y: 0.91
}]
}]
});
});
I am using classname on click due to duplicacy in Id's but still its not workin g..Where am I doing wrong?

How to take data into piechart from database?

I have a dynamically created table and on click of view button in each row a modal opens that have the pie chart with no of leaves taken by people till date in categories like sick, vacation, maternity, paternity for the particular year.Please help me how to take data from database..and on click of 1st button the pie chart shows up
but if I click on any button other than 1st then I get a blank page.
<td>
<button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4>
</div>
<div class="modal-body">
<p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p>
<p>Leave applied on : {{pl.date_created}}</p>
<p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
My jquery Code:
$(document).on('click','.view', function(e){
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Total number of leaves applied till now'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Sick Leaves',
y: 56.33
}, {
name: 'Casual Leaves',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Vacation Leaves',
y: 10.3
}, {
name: 'Maternity Leaves',
y: 4.77
}, {
name: 'Paternity Leaves',
y: 0.91
}]
}]
});
});

Modal fade has some time delay so you have to call your function by using set time out
create a new function and call it setTimeout(function(){ myFunc(); }, 500); This will work on your modal.