stateSave doesn´t work with an extra function
stateSave doesn´t work with an extra function
tupfer
Posts: 5Questions: 2Answers: 0
I use a function for my datatable to show only the data with the status I select. When I additional use statesave, the state of the table will be saved, but no data will be show.
This is my javascript file:
```
$(function () {
fillChart();
function fillChart() {
$(".chartProportion").each(function () {
var canvas = $(this);
var locationId = $(canvas).attr("data-locationId");
var orderStatus = $(canvas).attr("data-orderStatus");
$.ajax({
url: "/Charts/OrdersProportion",
type: "GET",
async: true,
cache: false,
dataType: "json",
data: { "locationId": locationId, "orderStatus": orderStatus },
success: function (chartData) {
//alert("Operation succesful completed");
//// Check if all data values are false
//// if so: then render text instead of the chart
//var containsOrders = false;
//for (var i = 0; i < chartData.data.length; i++){
// if (chartData.data[i] !== 0) {
// containsOrders = true;
// break;
// }
//}
////alert("ContainsOrders: " + containsOrders);
//if (containsOrders) {
//Chart.defaults.global.defaultFontColor = '#fff';
var data = {
labels: chartData.labels,
datasets:
[
{
data: chartData.data,
backgroundColor: chartData.backgroundColor,
hoverBackgroundColor: chartData.hoverBackgroundColor,
borderColor: chartData.borderColor,
borderWidth: chartData.borderWidth
}
]
};
var myBarChart = new Chart(canvas, {
type: 'bar',
data: data,
options: {
title: {
text: "Nach Prioritäten",
position: "left",
display: true
},
legend: {
display: false,
position: "right"
},
scales: {
yAxes: [{
ticks: {
min: 0
//stepSize: 1
}
}]
}
}
});
//} else {
// alert("IN ELSE STATEMENT");
// var flaeche = $(this);
// alert("FURTHER ON");
// var ctx = flaeche.getContext("2d");
// ctx.font = "50px Arial";
// ctx.fillText("NONE", 10, 10);
// alert("have come to the end");
//}
},
error: function (err) {
alert("An Error occured during the operation" + err.statusText);
}
});
});
}
// create datatable
var table = $('#dataTable')
.on('init.dt', function () {
var bgClass = null;
switch (table.columns(3).search()[0]) {
case "OPEN":
bgClass = "bg-light-blue-gradient";
break;
case "FINISHED":
bgClass = "bg-green-gradient";
break;
case "INPROCESS":
bgClass = "bg-yellow-gradient";
break;
default:
break;
}
if (bgClass != null) {
$('#div-orders-table-header').removeClass('bg-light-blue-gradient');
$('#div-orders-table-header').removeClass('bg-green-gradient');
$('#div-orders-table-header').removeClass('bg-yellow-gradient');
$('#div-orders-table-header').addClass(bgClass);
}
})
.DataTable({
bStateSave: true,
"scrollX": true,
dom: 'Bfrtip',
colReorder: true,
buttons: [
{
extend: 'colvis',
columns: ':not(:first-child)',
text: 'Spalten anzeigen'
}
],
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/German.json"
},
});
// allow buttons to filter the datatable onClick, based on their associated statuses
$('.button_orderStatus_search').on('click', function () {
table
.columns(3)
.search($(this).attr("data-processStatus"))
.draw();
// set color accordingly
$('#div-orders-table-header').removeClass('bg-light-blue-gradient');
$('#div-orders-table-header').removeClass('bg-green-gradient');
$('#div-orders-table-header').removeClass('bg-yellow-gradient');
$('#div-orders-table-header').addClass($(this).attr('data-cssclass'));
});
$.fn.dataTable.moment('DD.MM.YYYY HH:mm:ss');
$("#box-widget").activateBox();
});
´´´
This discussion has been closed.