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. The original code has been removed from that one, unfortunately. But you may find your answer there. — showdev
– showdev, Commented Feb 7, 2013 at 4:18
Seems like common case of "iditis". Use classes and everything will become much simpler. — elclanrs
– elclanrs, Commented Feb 7, 2013 at 4:25

asifsid88 · Accepted Answer · 2013-02-07 04:15:44Z

3

Assign each of them a class say mySlider

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

answered Feb 7, 2013 at 4:15

asifsid88

4,71122 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xirukitepe Over a year ago

Let me try this one. Thanks

xirukitepe Over a year ago

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.

samliew · Accepted Answer · 2013-02-07 04:17:42Z

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

shenku · Accepted Answer · 2013-02-07 04:20:00Z

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

Collectives™ on Stack Overflow

Shorten these javascript (JQuery) functions

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related