Responsive plugin not working after refresh

jvdb

Hello

I'm using "//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js" for a responsive table with ajax.

When I make my screen smaller it works. But when I refresh or go to the page with the table when the screen is already smaller it doesn't work.

This is my html table:

<table id="message_table_options" class="display no-wrap table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                    <tr>
                                        <th>Event/EventID</th>
                                        <th>MessageInstance/SchemaName</th>
                                        <th>Event/Timestamp</th>
                                        <th>Event/Port</th>
                                        <th>Event/Direction</th>
                                        <th>Event/URL</th>
                                        <th>Event/Adapter</th>
                                        <th></th>
                                    </tr>
                                </thead>
                            </table>

And this is my javascript:

   $(document).ready(function () {

            // Draw table with header, body and footer + options
            var table = $('#message_table_options').DataTable({
                "responsive": true,
                "bServerSide": false,
                "stateSave": true,
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "/api/client/messages",
                    "dataSrc": ""
                },
                "columns": [
                    { "data": "Event/EventID" },
                    { "data": "MessageInstance/SchemaName" },
                    {
                        "data": "Event/Timestamp",
                        render: function (data, type, row) {
                            var dateSplit = data.split('T');
                            return type === "display" || type === "filter" ?
                                dateSplit[0] + ' ' + dateSplit[1] :
                                data;
                        }
                    },
                    { "data": "Event/Port" },
                    { "data": "Event/Direction" },
                    { "data": "Event/URL" },
                    { "data": "Event/Adapter" },
                    {
                        "orderable": false,
                        "data": "Event/EventID",
                        "render": function (data, type, full, meta) {
                            return '<a href="/trackedMessageEvents/messageFacts/' + data + '">Details</a>';
                        }
                    }
                ],
                "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-4'f><'col-sm-8 col-xs-12 hidden-xs'l>>" +
                "t" +
                "<'dt-toolbar-footer'<'col-sm-4 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-4'p><'col-sm-4 col-xs-12 hidden-xs'T>>",
                "oTableTools": {
                    "aButtons": [
                        "copy",
                        "csv",
                        "xls",
                        {
                            "sExtends": "pdf",
                            "sTitle": "table-export",
                            "sPdfMessage": "PDF Export",
                            "sPdfSize": "letter"
                        },
                        {
                            "sExtends": "print",
                            "sMessage": "Generated by DataTables <i>(press Esc to close)</i>"
                        }
                    ],
                    "sSwfPath": "/js/plugin/datatables/swf/copy_csv_xls_pdf.swf"
                },
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
            });

            // Add filter to table with yadcf plugin
            yadcf.init(table, [
                { column_number: 0, filter_type: "text", filters_tr_index: 0 },
                { column_number: 1, filter_type: "auto_complete", text_data_delimiter: ",", filters_tr_index: 0 },
                { column_number: 2, filter_type: "date", date_format: "yyyy-mm-dd", filters_tr_index: 0 },
                { column_number: 3, filter_type: "auto_complete", text_data_delimiter: ",", filters_tr_index: 0 },
                { column_number: 4, column_data_type: "html", html_data_type: "text", filter_default_label: "All directions", filters_tr_index: 0 },
                { column_number: 5, filter_type: "auto_complete", text_data_delimiter: ",", filters_tr_index: 0 },
                { column_number: 6, column_data_type: "html", html_data_type: "text", filter_default_label: "All adapters", filters_tr_index: 0 }
             ]);
            
});

Is it because of AJAX or does it has to do something with the responsive script?

Thanks in advance