Is there way to make two HTML ID's link to one javascript function?

Question

I have two tables that need to have different IDs or they will not work. I'm using 3rd party data table code that uses the ID to differentiate between the different tables in the browser.

<table id="promo" class="display">
<table id="official" class="display">

But I need to them to both link to the same script function. As you can see below, I have one for #promo and one for #official but they are both using the exact same code:

$(document).ready(function() {
    $('#promo').DataTable( {
        // does a TON of stuff here
    } );

    $('#official').DataTable( {
        // does a TON of stuff here
    } );

Is there a way to make both tables link to the same code in a script?

I think it is good to know that there is good reason why the tables need different IDs to work — non-unique IDs are not semantically valid in HTML, and browser behavior is technically undefined when encountering non-unique IDs, although they tend to simply select the first occurrence. — Terry
– Terry, Commented Dec 2, 2014 at 1:57

T.J. Crowder · Accepted Answer · 2014-12-02 01:55:55Z

6

Is there a way to make both tables link to the same code in a script?

Yes:

$('#promo, #official').DataTable( {
    // does a TON of stuff here
});

This uses a CSS group selector, but you can use any other selector that matches both elements. Based on your question, for instance, .display (a class selector) does as well (provided it doesn't also match other elements you haven't shown):

$('.display').DataTable( {
    // does a TON of stuff here
});

answered Dec 2, 2014 at 1:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Anubhav · Accepted Answer · 2014-12-02 01:55:56Z

4

$('.display').each(function(){
    $(this).DataTable({
        // does a TON of stuff here
    });
});

This way you will not have to add each and every id manually. Just add .display to the elements.

answered Dec 2, 2014 at 1:55

Anubhav

7,2465 gold badges23 silver badges34 bronze badges

4 Comments

Leo Over a year ago

No you don't have to use each, jQuery will perform an implicit iteration here.

Anubhav Over a year ago

When is each() necessary?

Leo Over a year ago

Oops my bad, @dandavis is right. Well, I assume a good plugin will handle the stuff perfectly with jQuery style, including implicit iteration.

T.J. Crowder Over a year ago

A plugin that requires each in this situation is a broken plugin that should be fixed or ditched.

Todd · Accepted Answer · 2014-12-02 02:01:39Z

0

Alternatively:

var $DTs = $(".someSemanticClassForAllIntendedTables"); //for easy reference elsewhere
$DTs.DataTable({ //options });

answered Dec 2, 2014 at 2:01

Todd

5,4843 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

Is there way to make two HTML ID's link to one javascript function?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related