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.

Similar to [this](http://stackoverflow.com/questions/14715532/how-can-i-avoid-the-repetetive-code-in-this-jquery-code-answered). The original code has been removed from that one, unfortunately. But you may find your answer there. — showdev, Feb 07 '13 at 04:18
Seems like common case of "iditis". Use classes and everything will become much simpler. — elclanrs, Feb 07 '13 at 04:25

score 3 · Accepted Answer · answered Feb 07 '13 at 04:15

3

Assign each of them a class say mySlider

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

answered Feb 07 '13 at 04:15

asifsid88

4,631
20
30

Let me try this one. Thanks – xirukitepe Feb 07 '13 at 04:18
I'm such a novice. Waaa I forgot that classes are somewhat better than IDs. Thank you for helping me to remember things like these. – xirukitepe Feb 07 '13 at 04:28

score 3 · Answer 2 · answered Feb 07 '13 at 04:17

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"
        });
    });
});

score 2 · Answer 3 · answered Feb 07 '13 at 04:20

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);
});

Shorten these javascript (JQuery) functions

3 Answers3