简体   繁体   中英

jQuery Datatables adjusting Filter/Search input width

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,
        });

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM