2 rows in header: 1 for labels and sort, 1 for column searching (select inputs)...

gbmapo

How to do that?
I can't manage to have each of functionality on different row.
Thanks in advance

P.-S. I'w new to that kind of stuff but I succeeded in adding DataTables to my Drupal site (with tables generated by wy own custom modules).
Thanks for your amazing stuff.

gbmapo

I'd like to have the select input in the 2nd row of my header (i.e. <tr id="forFilters">)...
Here is my code:

$(document).ready(function() {
    $('#LoM1').dataTable( {
info": false,
        "paging": false,
        "columnDefs": [
        {"targets": [ 2, 3, 7 ], "orderable": false},
        {"targets": [ 4, 5 ], "type": 'date-eu'},
        ],
        orderCellsTop: true,
        initComplete: function () {
            var api = this.api();
            api.columns().indexes().flatten().each( function ( i ) {
            if (i==1){
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
                }
            } );
        }
    } );
} );

and the first rows of the table it applies to:

 
<table id="LoM1" class="JdP stripe compact" width="auto" cellpadding="1" cellspacing="0">
    <col width="220"><col width="80"><col width="220"><col width="80"><col width="80"><col width="80"><col width="120"><col width="40"> 
    <thead>
        <tr>
            <th>Adhérent</th>
            <th>Statut</th>
            <th>Adresse</th>
            <th>Téléphone</th>
            <th>Adhésion</th>
            <th>Sortie</th>
            <th>Contact</th>
            <th>Actions</th>
        </tr>
        <tr id="forFilters">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody valign="middle">
        <tr id="130">
            <td>Abattu David</td>
            <td>Ancien adhérent</td>
            <td>4 rue Ernest Lavisse<br>78300 Poissy</td>
            <td></td>
            <td>04/07/2012</td>
            <td>31/12/2012</td>
            <td>Abattu David</td>
            <td> 
            </td>
        </tr>
        <tr id="36">
            <td>Allemand Didier</td>
            <td>Ancien adhérent</td>
            <td>130 rue de la Bruyère<br>78300 Poissy</td>
            <td></td>
            <td>20/04/2010</td>
            <td>31/12/2010</td>
            <td>Allemand Didier</td>
            <td> 
            </td>
        </tr>
        <tr id="39">
            <td>Alliez Catherine</td>
            <td>Ancien adhérent</td>
            <td>13 sente des Bazins<br>78570 Chanteloup les Vignes</td>
            <td>0139272810</td>
            <td>31/05/2010</td>
            <td>31/12/2012</td>
            <td>Alliez Catherine</td>
            <td> 
            </td>
        </tr>
        ... 
    </tbody>
</table>
Thanks in advance.

gbmapo

Finally, I made it work :-)
Hope it can help someone else.

Notice: if (i == 1) { because I need select input only on 2nd column...

$(document).ready(function() {

    $('#LoM1').dataTable({
        "info": false,
        "paging": false,
        "columnDefs": [{
            "targets": [2, 3, 7],
            "orderable": false
        }, {
            "targets": [4, 5],
            "type": 'date-eu'
        }, ],
        orderCellsTop: true,

        initComplete: function() {

            var api = this.api();
            $('#LoM1 thead tr#forFilters th').each(function(i) {
                if (i == 1) {
                    var column = api.column(i);
                    var select = $('<select><option value=""></option></select>').appendTo($(this)).on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val());
                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                    });
                    column.data().unique().sort().each(function(d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                }
            });
        }
    });

});