jQuery数据表调整过滤器/搜索输入宽度

时间:2018-07-19 13:16:54

标签: jquery datatables

如何将引导程序列的宽度添加到数据表的搜索输入框中? 目前我有这个:

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

但是,这不会增加搜索输入的宽度。到目前为止,所有其他示例的静态宽度均为350px。我希望通过Bootstrap使用列方法。

编辑

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

1 个答案:

答案 0 :(得分:0)

您尝试过玩dom options for datatable, 像这样的东西

< 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>

请阅读更多here