Additional Examples

[rfitzwater]

Would you be able to put up an example that uses the DataTables scroller extension: http://next.datatables.net/extensions/scroller/

Could you also put up an example that shows filtering on each column (search text input in footer).

Thank you,

-Rhon

[rfitzwater]

Just touching base to see if this new example is a possibility.

Thanks!

-Rhon

[comanche]

Sorry I've been pretty busy and haven't had time to put up an example. You should be able to get started with the scroller extension by making the following changes to the dt2/ajax-bootstrap3.html example.

Add CSS to dt2/ajax-bootstrap3.html:

<link rel="stylesheet" href="//cdn.datatables.net/scroller/1.2.0/css/dataTables.scroller.css"/>

Add JS to dt2/ajax-bootstrap3.html:

<script src="//cdn.datatables.net/scroller/1.2.0/js/dataTables.scroller.min.js"></script>

Add to dt2/js/ajax-bootstrap3.js the scrollY, deferRender and dom properties when you initialize the data table:

$(document).ready(function () {
    var responsiveHelper = undefined;
    var breakpointDefinition = {
        tablet: 1024,
        phone : 480
    };
    var tableElement = $('#example');

    tableElement.dataTable({
        autoWidth      : false,
        scrollY        : '200px',
        deferRender    : true,
        dom            : 'frtiS',
        ajax           : './arrays.txt',
        preDrawCallback: function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper) {
                responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
            }
        },
        rowCallback    : function (nRow) {
            responsiveHelper.createExpandIcon(nRow);
        },
        drawCallback   : function (oSettings) {
            responsiveHelper.respond();
        }
    });
});

Hopefully that should get you started.

[rfitzwater]

No worries. Thanks for the response. I did some testing with your recommendation and almost have things working. The one thing I am seeing when using scroller is when resizing browser window to a mobile size there is some horizontal table scrolling that is not present when Scroller is disabled. I've attached a couple screenshots if that helps. The first screenshot is with Scroller enabled, the second without. Obviously the second looks good, where the first the header is cutoff and the table itself scrolls horizontally misaligning the columns with headers. I've also included my two revisions to the code.

Let me know what you think.

Thanks,

-Rhon

On Apr 22, 2014, at 11:54 PM, Comanche notifications@github.com wrote:

Sorry I've been pretty busy and haven't had time to put up an example. You should be able to get started with the scroller extension by making the following changes to the dt2/ajax-bootstrap3.html example.

Add CSS to dt2/ajax-bootstrap3.html:

Add JS to dt2/ajax-bootstrap3.html: <script src="//cdn.datatables.net/scroller/1.2.0/js/dataTables.scroller.min.js"></script>

Add to dt2/js/ajax-bootstrap3.js the scrollY, deferRender and dom properties when you initialize the data table:

$(document).ready(function () {
var responsiveHelper = undefined;
var breakpointDefinition = {
tablet: 1024,
phone : 480
};
var tableElement = $('#example');

tableElement.dataTable({
    autoWidth      : false,
    scrollY        : '200px',
    deferRender    : true,
    dom            : 'frtiS',
    ajax           : './arrays.txt',
    preDrawCallback: function () {
        // Initialize the responsive datatables helper once.
        if (!responsiveHelper) {
            responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
        }
    },
    rowCallback    : function (nRow) {
        responsiveHelper.createExpandIcon(nRow);
    },
    drawCallback   : function (oSettings) {
        responsiveHelper.respond();
    }
});

});
Hopefully that should get you started.

—
Reply to this email directly or view it on GitHub.

[comanche]

Sorry I don't see your attachments.