Individual column search outside header/footer

Individual column search outside header/footer

cha59cha59 Posts: 81Questions: 21Answers: 0
edited January 2020 in DataTables

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: "" 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 ( !== this.value ) {
                    .search( this.value )
        } );
        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">
            <td><input type="text" class="laerer" name="min"></td>
            <td><input type="text" id="max" name="max"></td>
            <table id="example" class="display nowrap" cellspacing="0" width="100%">
                        <th></th><!-- 0 -->
                        <th class="toggle search-sort">Lærer</th>

Hope someone can help me.

This question has an accepted answers - jump to answer


Sign In or Register to comment.