R_G R_G - 4 months ago 51
Javascript Question

Making DataTables responsive

Environment: Ruby 2.0.0, Rails 4.0.3, Windows 8.1 Update, jquery-datatables-rails 2.2.1, jquery-ui-rails 5.0.0, jquery-rails 3.1.1

I have DataTables up and running, but I need to make my tables responsive. I'm confused by the instructions to do so. I have written some JavaScript but not Coffee. Either way, I'm not sure what to do.

The jquery-datatables-rails instructions say:

5 - Initialize your datatables using:

responsiveHelper = undefined
breakpointDefinition =
tablet: 1024
phone: 480

tableElement = $("#example")
tableElement.dataTable
autoWidth: false
preDrawCallback: ->

# Initialize the responsive datatables helper once.
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition) unless responsiveHelper
return

rowCallback: (nRow) ->
responsiveHelper.createExpandIcon nRow
return

drawCallback: (oSettings) ->
responsiveHelper.respond()
return


I currently initialize my tables doing this:

$(document).ready(function () {
// Enable any datatables
$('#datatable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true
});
$('#carstable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: $('#carstable').data('source')
});


I used compileonline.com to generate the JavaScript:

(function() {
var breakpointDefinition, responsiveHelper, tableElement;

responsiveHelper = void 0;

breakpointDefinition = {
tablet: 1024,
phone: 480
};

tableElement = $("#example");

tableElement.dataTable({
autoWidth: false,
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});

}).call(this);


But I cannot see what I need to do to integrate that into my current JavaScript initializer.

R_G R_G
Answer

Staring at the code long enough sometimes resolves the problem... I have it basically working, though I'll need to customize it. The replacement code is as follows:

$(document).ready(function() {
    var breakpointDefinition, responsiveHelper, tableElement;
    responsiveHelper = void 0;
    breakpointDefinition = {
        tablet: 1024,
        phone: 480
    };
    tableElement = $("#datatable");
    tableElement.dataTable({
        autoWidth: false,
        "sPaginationType": "full_numbers",
        bJQueryUI: true,
        preDrawCallback: function() {
            if (!responsiveHelper) {
                responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
            }
        },
        rowCallback: function(nRow) {
            responsiveHelper.createExpandIcon(nRow);
        },
        drawCallback: function(oSettings) {
            responsiveHelper.respond();
        }
    });
    tableElement = $("#carstable");
    tableElement.dataTable({
        autoWidth: false,
        "sPaginationType": "full_numbers",
        bJQueryUI: true,
        bProcessing: true,
        bServerSide: true,
        sAjaxSource: $('#carstable').data('source'),
        preDrawCallback: function() {
            if (!responsiveHelper) {
                responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
            }
        },
        rowCallback: function(nRow) {
            responsiveHelper.createExpandIcon(nRow);
        },
        drawCallback: function(oSettings) {
            responsiveHelper.respond();
        }
    });
Comments