jQuery dataTable set page limit for specific bootstrap modal

Question

I have three, four and sometimes five tables in the same page but most of them are in modal dialogs. What happens is that I want the tables which are not in modal dialogs to display 10 items per page and those who are in modal dialogs I want them to display on 3.

You can view an working example in jsfiddle .

I initialize my settings (by default) with the following parameters:

var settings = {
        "bPaginate": true,
            "bLengthChange": false,
            "bInfo": true,
            "bAutoWidth": false,
            'aoColumnDefs': [{
            'bSortable': false,
                'aTargets': ['nosorting']
        }],
            'order': [
            [0, 'DESC']
        ]
    }

Which by default put 10 records as limit per page. After that I need to verify if the table belongs to a modal and if so, add a property name 'pageLength' to specify the limit.

if ($(this).closest('.fade').length > 0) {
    settings.push({
       "pageLength": 3
    });
}

I believe that one of the problems is because settings isn't actually an array of objects, to be I should instead have something like: var settings = [];

settings.push({bPaginate: true, bLengthChange: false}); // etc
// or
settings.push({"bPaginate": true, "bLengthChange: false"}); // etc

But if I use this method, the dataTable won't recognize it when I add this variable to the plugin.

$('.dataTable').dataTable(settings);

Answer 1

Try this example . It loops all tables and create them one by one with correct settings.

Settings in an js object. You can simply overrule it like settings.pageLength.

if ($('.dataTable').length > 0) {
    var settings = {
        "bPaginate": true,
            "bLengthChange": false,
            "bInfo": true,
            "bAutoWidth": false,
            'aoColumnDefs': [{
            'bSortable': false,
                'aTargets': ['nosorting']
        }],
            'order': [
            [0, 'DESC']
        ]
    }
    $('.dataTable').each(function () {

        if ($(this).closest('.fade').length > 0) {
            settings.pageLength = 3;
        }

        $(this).dataTable(settings);


    });

    $('.dataTables_filter').empty();

}