Can't turn on responsive without receiving error

scdigital

I'm populating a datatable from ajax. The json is coming in correctly and showing the results appropriately in the datatable. However, as soon as I turn on responsive, i get the following error:

DataTables warning: table id=tblUsers - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

The data still displays in my datatable though, that's the weird part. If I set details to false, the error goes away, however the responsive functionality does not seem to work properly. Table still gets cut off.

I've searched for hours and could not find a solution.

<div class="table-responsive">
            <table class="table table-striped border dt-responsive display tblUsers" id="tblUsers">
                <tr>
                    <thead>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Email</th>
                        <th>Created On</th>
                        <th>Last Modified On</th>
                        <th>Roles</th>
                        <th>Permissions</th>
                        <th>Active</th>
                        <th>Actions</th>
                    </thead>
                </tr>
            </table>
        </div>


var tblUsers = $("#tblUsers").DataTable({
        ajax: {
            url: '/admin/users/getAllUsers',
            dataSrc: 'users',
        },
        responsive: {
            details: true
        }
....

tangerine

Did you follow the diagnostic steps in the link?

rjpiston

yes. Double checked again just now. I've also loaded in the js and css files a few different ways (minified, concatenated, etc) I'm genuinely stumped.

colin

There's no reason why that should be the case - an example here is doing Ajax. If your data is being returned as an object, you'll need to defined the columns as in that example.

If that doesn't help, we'll need to see it to understand what's going on. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

scdigital

In the livedatatables coder everything works as it should. I'm using a php framework to load in the js and css. So it's hard to put up an example. But even when I reference the CDN for the js/css files it still doesn't work. I know, that's not much help to diagnose the issue but the only error I'm getting is the one in my original post.

I've managed to get it somewhat working, however, not without the error alert. I suspect something with my theme's css/js is conflicting.

colin

Yep, conflicting CSS is possible, but that'll be impossible to diagnose without seeing the issue.

Colin

scdigital

Ok so I think I figured it out. Looks like you need to have the data attribute in the definition. There were a couple of columns where I was using the render function without a data attribute. I just set data: null and the table is now responsive.