jQuery Datatables adjusting Filter/Search input width

Question

How do I add bootstrap column widths to the search input box for datatables? Currently I have this:

$("#table_filter input").addClass('form-control input-lg col-xs-12');

However, that does not increase the width of the search input. So far all the other examples have a static width like 350px. I'm hoping to use the column method by Bootstrap.

Edit

var table = $("#table").DataTable({
            "ajax": {
                "url": "@Url.Action("Search", "Users")",
                "type": "POST",
                "data": function (d) {

                },
                "datatype": "json"
            },
            "dom": "f<'col-sm-6'>" ,
            "language": {
                "search": "",
                "searchPlaceholder": "Search"
            },
            "select": {
                "style": 'multi'
            },
            "ordering": true,
            "lengthChange":false,
            "columns": [
                {
                    "data": function (data, type, row, meta) {
                        var url = "@Url.Action("Read","Users")/" + data.Id;
                        return "<a href='" + url + "'>"+data.UserName+"</i></a>"
                    }, "name": "Email"
                },
                { "data": "Email", "name": "Email" },
                { "data": "PhoneNumber", "name": "PhoneNumber" },
            ],
            "processing":true,
            "serverSide": true,
        });

I think you have an issue in selector for this element can you post you render html for data table — Ahmed Yousif
– Ahmed Yousif, Commented Jul 19, 2018 at 13:34

Munzer · Accepted Answer · 2018-07-19 13:23:44Z

1

Did you try playing with dom options for datatable, something like this,

< and > - div element
<"class" and > - div with a class
<"#id" and > - div with an ID
<"#id.class" and > - div with an ID and a class
f - filtering input

$('#example').dataTable({
      dom : "<'row' <'col-md-6 pull-right form-group' f>>" 
} );
    //This means <div class='row'><div class="col-md-6 form-group pull-right">filter input </div></div>

please read more here

answered Jul 19, 2018 at 13:23

Munzer

2,3282 gold badges21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JianYA Over a year ago

Yeah, I currently have lfrtip as the default. I don't really understand how to use it. I'll try your example. Thanks!

JianYA Over a year ago

Hi, I don't think I understand how this works. I can expand the divs that are above the filter but I can't change its width

Munzer Over a year ago

Hi @JianYA, I am not sure how to simplify it, the documentation is already very clear, basically you are wrapping your filter input inside divs, read the comments I addedd, please try to go through the documentation and if anything is not clear ask me I am glad to help.

Collectives™ on Stack Overflow

jQuery Datatables adjusting Filter/Search input width

Edit

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related