CODEWITHSUNDEEP
javascriptcssangulardatatablesangular-datatables
R K
R K

Reputation: 327

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

Upvotes: 2

Views: 2259

Answers (3)

Rajkumar Rathi
Rajkumar Rathi

Reputation: 309

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.

Upvotes: 3

Kunal Raut
Kunal Raut

Reputation: 2584

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

Upvotes: 0

raj240
raj240

Reputation: 666

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+' />' );
} );

to 

$('#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

Upvotes: 0

Related Questions