Responsive DataTables being drawn twice

jaredm

Table definition...

    <table id="planRouteTable" class="table table-striped table-hover table-bordered responsive">
        <thead>
            <tr>
                <th>Type</th>
                ....other columns....
            </tr>
        </thead>
    </table>

JS definition

Base Options

    baseDataTableOptions: {
        processing: true,
        serverSide: true,
        responsive: true,
        pageLength: 25
    },

Init

            let options = $.extend({}, window.bp.baseDataTableOptions, {
                ajax: {
                    url: window.bp.apiPath + 'data-tables/users-assigned-inspections'
                },
                columns: [
                    { data: 'policy_type', name: 'policy_type', className: 'text-center', orderable: false },
                    /* Other columns */
                    {
                        target: -1,
                        data: null,
                        className: "text-right",
                        orderable: false,
                        defaultContent: `
                            <button class="[ btn btn-primary ]">Add to Route</button>
                        `
                    }
                ]
            });
            $('#planRouteTable').DataTable(options);

The issue I'm having is that whenever the table element has the responsive class added to it so that the responsive version of DataTables is enabled it draws twice. Normally, I wouldn't care, but since this is rendered server side it's hitting the API endpoint twice and randomly triggers a 401 response from the server.

The server-side rendering is handled by the Laravel DataTables plugin.