How to get search box at every column in datatable.

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: How to get search box at every column in datatable.

Shashank Tiwari asked 5 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 commented 4 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 premium answered 5 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 commented 5 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 commented 5 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
Write
Create snippet
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
Tags
searchbox
Related topics
1
Select with search box with standard Bootstrap select?
0
Limit Search to specific columns
0
MDBSelect searchbox problem
About author
Shashank Tiwari
15Support score
1Questions 1Answers
0Snippets likes 0Snippets