resize search fields when using columns().search()

resize search fields when using columns().search()

jfoxjfox Posts: 2Questions: 1Answers: 0

I searched and found this question asked, but not answered because the other user did not provide an example.

When adding search per column on the footer like in example 2 on this page https://datatables.net/reference/api/columns().search() how do you set the width of the search field?

Here is my example code: http://live.datatables.net/joneqeri/1/edit?js,output

As noted in the JavaScript comment, I'd like the "Age" search to be just big enough for 3 characters.

Answers

  • jfoxjfox Posts: 2Questions: 1Answers: 0

    I'm an idiot.

    // Setup - add a text input to each footer cell  
      $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        if (title === "Age"){
          $(this).html( '<input type="text" placeholder="'+title+'" style="width: 20px"/>' );
        }else{
          $(this).html( '<input type="text" placeholder="'+title+'" />' );  
        }
      } );
    
This discussion has been closed.