Topic: How to get search box at every column in datatable.

Shashank Tiwari free asked 3 years ago


How to get search box at every column in datatable. I have tried const data = { columns: [ { label: 'Name', field: 'name', sort: 'disabled',
searchable: true and even searching:true , width: 150 }] My table is working absolute fine . Just searchbox is not set at every column as I want that .


Zweni Nkabinde free commented 2 years ago

Hi Shashank. You need to do the following in your table initialisation:

$(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $('#example thead th').eq( $(this).index() ).text(); $(this).html( '' ); } );

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

// Apply the filter
$("#example tfoot input").on( 'keyup change', function () {
    table
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
} );

} );

I think column filtering is a paid-for feature in mdbootstrap. But if you add the above code, it will work the same as the original Datatables implementation


Jakub Chmura staff answered 3 years ago


HI @Shashank Tiwari,

Putting a search box in every column is not possible at this moment. Your search box is filtering whole data table data.

You can try to do it with your custom code in your project, but I can't help you with that.

Best, Kuba


Mauzi free commented 2 years ago

Hi @Jakub Chmura, How can we add css to the search box??? Also can we have click option on each cell rather than whole row because i want to achieve different funtionality when clicked on individual cell.

Please respond i'm stuck

Reagds Mauzi


Mauzi free commented 2 years ago

Hi @Jakub Chmura, How can we add css to the search box??? Also can we have click option on each cell rather than whole row because i want to achieve different funtionality when clicked on individual cell.

Please respond i'm stuck

Reagds Mauzi



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.24.0
  • Device: HP
  • Browser: chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No