Individual column search on top rather than bottom in angular datatable

问题

I am using this library https://l-lin.github.io/angular-datatables/#/welcome for my angular 7 project I have implemented the code as given the the example as it is, https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering.

It is working perfectly fine , but only problem is the position of the search columns , I want the search columns in header after the columns names, I tried converting the tfoot to thead but it's not working.

I found some examples like http://live.datatables.net/cutucahi/1/edit, but the exmaple is replacing the header columns with the search box which i dont want

回答1:

Try below example

initComplete: function ()
{
  var r = $('#MyDataTable tfoot tr');
  r.find('th').each(function(){
    $(this).css('padding', 8);
  });
  $('#MyDataTable thead').append(r);
  $('#search_0').css('text-align', 'center');
},

If not check solution in following link

https://datatables.net/examples/api/multi_filter.html -- In Comments section. Multiple solutions are given.

回答2:

Inside the table header html do this

   <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
      <tr id="test">
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr> 
    </thead>

If you notice i have added one more tr and created the same headers

After this in js file change the element selector from

$('#example thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder='+title+' />' );
} );

$('#example thead #test th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder='+title+' />' );
} );

This will solve your problem.

please check the link i am not sure if it gets loaded properly

check it

回答3:

In order to get that all input[type=text](Search Box) below all the column names respectively you must append it to their respective tr's Change your js to

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).append( '<br><input type="text" placeholder='+title+' />' );
    } );

    // DataTable
    var table = $('#example').DataTable({
      scrollX: true
    });

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

Click here to see the Working Example

来源：https://stackoverflow.com/questions/61612623/individual-column-search-on-top-rather-than-bottom-in-angular-datatable

标签

javascript

css

angular

datatables

angular-datatables