Shorten these javascript (JQuery) functions

Question

I have here a long list of jquery slide functions:

Different IDs but same behaviours.

Code:

/*DataTables*/

$(document).ready( function() {
    $('#all-active-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#all-deactivated-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );


$(document).ready( function() {
    $('#all-ppmps').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );        

$(document).ready( function() {
    $('#agency-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#all-ppmps-by-agency').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#ppmp-form').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );


$(document).ready( function() {
    $('#all-agencies').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#ppmp-uploaded-files').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

$(document).ready( function() {
    $('#agency-types').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

What i want to know is how can I make it short and precise.

I tried something like this, but no luck:

$(document).ready( function() {
    $('#all-active-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );

    $('#all-deactivated-users').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );

The codes are dead whenever I try to make it short.

Any workarounds will be appreciated. Thanks.

Answer 1

There is a rule you can apply to everything programming. Don't repeat yourself.

Notice how all your methods are doing the same thing? So what you want to do is encapsulate that and then simply call that for each change so.

make a function like this:

var doSomething = function(selector){

    $(selector).dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );

};

Now we have a function we can call for any selector we like like this:

$(document).ready( function() {

var doSomething = function(selector){

    $(selector).dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );

};

    doSomething('#all-active-users');
    doSomething('#all-deactivated-users');

} );

Almost there but we are still repeating ourselves by calling it each time. So why not do this:

$.each(['#all-active-users', '#all-deactivated-users'], function(index, value) { 
  doSomething(value);
});

Answer 2

If your plugin supports multiple selectors, try this:

$(document).ready(function () {
    $('#all-active-users, #all-deactivated-users, #all-ppmps, #agency-users, #all-ppmps-by-agency, #ppmp-form, #all-agencies, #ppmp-uploaded-files, #agency-types')
    .dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    });
});

You can also try using an each():

$(document).ready(function () {
    $('#all-active-users, #all-deactivated-users, #all-ppmps, #agency-users, #all-ppmps-by-agency, #ppmp-form, #all-agencies, #ppmp-uploaded-files, #agency-types')
    .each(function () {
        $(this).dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
    });
});

Answer 3

Assign each of them a class say mySlider

$(document).ready( function() {
    $('.mySlider').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
    } );
} );