Datatables dot net Button's Not Displaying In DataTable

jcorcoran

I am new to Polymer and Datatables.Net. I have inherited an application with datatable. I was told the buttons used to display but sometime in the last few months they have vanished. I was looking through the code and found where they are declared. According to the documentation on the Datatables.net site looks correct (https://datatables.net/extensions/buttons/).

I do notice a couple things in the Chrome Console Window that may or may not be related:

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http:///protected/lib/bower_components/datatables-buttons/css/buttons.dataTables.scss".

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http:///protected/lib/bower_components/datatables-buttons/css/mixins.scss".

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http:///protected/lib/bower_components/datatables-buttons/css/common.scss".

Here is the table declaration:

<link rel="import" href="../../../bower_components/polymer/polymer-micro.html">
<!-- Bower Components Start -->
<link rel="stylesheet" href="../../../bower_components/datatables/media/css/jquery.dataTables.min.css">
<script type="text/javascript"
        src="../../../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>


<link rel="stylesheet" href="../../../bower_components/datatables-buttons/css/buttons.dataTables.scss">

<script type="text/javascript" src="../../../bower_components/pdfmake/build/pdfmake.min.js"></script>
<script type="text/javascript" src="../../../bower_components/pdfmake/build/vfs_fonts.js"></script>

<script type="text/javascript" src="../../../bower_components/jszip/dist/jszip.min.js"></script>

<script type="text/javascript"
        src="../../../bower_components/datatables-buttons/js/dataTables.buttons.js"></script>

<script type="text/javascript"
        src="../../../bower_components/datatables-buttons/js/buttons.print.js"></script>

<script type="text/javascript"
        src="../../../bower_components/datatables-buttons/js/buttons.html5.js"></script>

<!-- Bower Components End -->

<style>
    #wrapper {
        height: 100%;
    }

    #buffer {
        height: 100%;
        padding: 20px;
    }
</style>

<template>
    <div id="wrapper">
        <div id="buffer">
            <table id="table" class="stripe row-border cell-border compact" cellspacing="0" width="100%"></table>
        </div>
    </div>
</template>

<script>
    Polymer({
        is: "table-test1",

        properties: {
            plottedProperties: {
                type: Array,
                observer: "_propertiesChanged"
            }
        },

        attached: function () {
            this._initTable();
        },

        _initTable: function () {

            var instance = this;

            this.dataTable = $(this.$.table).DataTable({
                scrollX: "100%",
                scrollY: "100%",
                data: [],
                info: true,
                paging: true,
                dom: 'lB<"profileSelection">frtip',
                buttons: [],
                columns: [
                    <SOME COLUMNS HERE>
                ]
            });
        }
    });
</script>

jcorcoran

*** Update

I have replaced

../../../bower_components/datatables-buttons/css/buttons.dataTables.scss
with:

https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css
Still no buttons appear. When I create a test application outside Polymer the buttons show up with no issues. Any ideas?