Responsive table not working in an AJAX table

Responsive table not working in an AJAX table

StudiosiStudiosi Posts: 1Questions: 1Answers: 0

I have a completely functional table that loads the data from an AJAX source. The table works perfectly. The problem comes now, when I added the "responsive" add-on. I can't configure it, it just does not eliminate columns as desired to make it fit.

This is the script

<script>

            $(document).ready(function() {
                $('#userList').dataTable( {
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "xxx",
                        type : "POST"
                    },       
                    lengthChange: false,
                    language: {
                        url: "/js/finnish.json"
                    },
                    columns: [
                        { 
                            data: "xxx"
                        },
                        { 
                            data: "xxx"
                        },
                        { 
                            data: "xxx"
                        },
                        { 
                            data: "xxx"
                        },
                        { 
                            data: "xxx"
                        },
                        { 
                            data: "xxx"
                        },
                        { 
                            data: "a_1",
                            searchable: false,
                            orderable: false,
                            render: function ( data, type, row ) {
                                return '<a href="' + data + '">Edit</a>' ;
                            }
                        },
                        { 
                            data: "a_2",
                            searchable: false,
                            orderable: false,
                            render: function ( data, type, row ) {
                                return '<a href="' + data + '">Delete</a>' ;
                            }
                        }
                    ]
                });
            });
            
        </script>

And this is the markup for the table itself

<table id="userList" class="display responsive" cellspacing="0" width="100%">

            <thead>
                <tr>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1"></th>
                    <th data-priority="1"></th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxx</th>
                    <th data-priority="1">xxxt</th>
                    <th data-priority="1"></th>
                    <th data-priority="1"></th>
                </tr>
            </tfoot>

        </table>

Any idea of what may be happening? The table is working, it just does not become responsive. Thanks in advance!

This discussion has been closed.