Multiple datatables on a page, activated via class and not id, result in the "select" filter having a strange 'default' value

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create multiple tables on a page, with the same class (<table 
class="tableclass">.....

2. Use $('.tableclass').dataTable({....with columnfilter in place. set one 
column as type "select" and put values into the select (full code below)

3. refresh page

What is the expected output? What do you see instead?

Expect that the select dropdown on each table will display the expected values 
only. Instead, we see the expected values but preprended as the first option is 
a list of the values repeated a number of times. 

What version of the product are you using? On what operating system?

On Windows XP, using jquery 1.8.0, jquery.ui 1.8.23, datatables 1.9.3 and 
columnfilter 1.4.8

Please provide any additional information below.

With the following, putting 5 tables into 1 page, I get "ABCDEABCDEABCDEABCDE" 
as the first option in the selects. Workaround: reference by id not class.

JS code:

$('.tableclass').dataTable({
    bJQueryUI: true,
    bPaginate: true,
    sPaginationType: "full_numbers",
    bAutoWidth: false
})
.columnFilter({
    sPlaceHolder: "head:before",
    aoColumns: [
        null,
        {
            type: "text"
        },
        {
            type: "text"
        },
        {
            type: "select",
            values: [
                {"value":"A","label":"A"},
                {"value":"B","label":"B"},
                {"value":"C","label":"C"},
                {"value":"D","label":"D"},
                {"value":"E","label":"E"}
            ]
        }
    ]
});

HTML:

<table class="tableclass" style="width:100%">
    <colgroup>
        <col width="4%">
        <col width="23%">
        <col width="23%">
        <col width="50%">
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email address</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Original issue reported on code.google.com by DaveGY...@gmail.com on 4 Sep 2012 at 12:38

[GoogleCodeExporter]

Further workaround - one I'm going use instead....wrap the datatable call in an 
each loop:

$(".tableclass").each(function(){
    $('#' + this.id).dataTable({........

Reason I am doing the above...I wanted to reduce code in my application, and 
with 5 tables on one page I only wanted to put the the datatables js code in 
once and have it apply to all items via their class instead of id...with the 
above workaround, I can achieve this.

Original comment by DaveGY...@gmail.com on 4 Sep 2012 at 12:45

[GoogleCodeExporter]

Original comment by joc...@gmail.com on 4 Sep 2012 at 7:47

• Changed state: Accepted