stateSave doesn´t work with an extra function

stateSave doesn´t work with an extra function

tupfertupfer Posts: 5Questions: 2Answers: 0
edited March 2017 in Free community support

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.