Individual column search outside header/footer

cha59

Hi
I'm trying to moove the input field for column search out of header/footer, so that it has an input cell outside the main table. Much like this example: "https://datatables.net/examples/plug-ins/range_filtering.html" has for integer values. But I cannot get it to work. I want to use html td class laerer for input instead of header. My columnsearch is inside a initComplete because of fixed columns.

initComplete: function () {
    // Generating search fields in table header
        var api = this.api();
        $('.search-sort', api.table().header()).each( function (i) {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="'+title+'" />' );
        } );
            // Apply the search
        table.columns('.search-sort').every( function () {
        var that = this;
        var searchTextBoxes = $(this.header()).find('input'); //

        $( 'input', this.header() ).on( 'keyup change', function () {
          if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
        searchTextBoxes.on('click', function (e) {
            e.stopPropagation();//den kode, der gør, at der ikke sorteres ved klik i forvalg
            })
        } );
     }, // Slutning af initComplete

Html code

<table border="0" cellspacing="5" cellpadding="5">
        <tbody>
          <tr>
            <td>Lærer:</td>
            <td><input type="text" class="laerer" name="min"></td>
            <td>Hold:</td>
            <td><input type="text" id="max" name="max"></td>
          </tr>
        </tbody>
    </table>
            <table id="example" class="display nowrap" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th><!-- 0 -->
                        <th>Nr</th>
                        <th>Fag/aktivitet</th>
                        <th>Skema</th>
                        <th>Bem.</th>
                        <th class="toggle search-sort">Lærer</th>

Hope someone can help me.
Claus

kthorngren

Sounds like you want to take the approach used in this example:
https://datatables.net/examples/api/regex.html

Kevin

cha59

Thanks Kevin
It did the trick.
Claus