我们如何更改 DataTables 中搜索字段的宽度答案

【问题标题】：How can we change width of search fields in DataTables我们如何更改 DataTables 中搜索字段的宽度
【发布时间】：2013-09-15 18:55:25
【问题描述】：

我可以更改 dataTables 中搜索文本字段的宽度吗？

我现在正在编写以下代码，但它不起作用。

$('#example').dataTable()
          .columnFilter({   sPlaceHolder: "head:before",
                    aoColumns: [    { type: "text",width:"10px" },
                                { type: "date-range" },
                                                { type: "date-range" }
                        ]

        });

如果我的数据表是动态生成的，如下所示：

$('#example').dataTable({
                                "aaData": aDataSet,
                                "aoColumns": [
                                    { "sTitle": "#","sWidth": "10px" },
                                    { "sTitle": "ID" },
                                    { "sTitle": "Staff Name" },
                                    { "sTitle": "Rig Days" },
                                    { "sTitle": "Manager"},
                                    { "sTitle": "Grade"},
                                    { "sTitle": "Tools"},
                                    { "sTitle": "Vacations"},
                                    { "sTitle": "Presently On"},
                                    ]
                            });
                            }

如何在这个动态创建的数据表中添加搜索字段以按列搜索？

【问题讨论】：

标签： datatables jquery-datatables

【解决方案1】：

上述解决方案都不适合我；然后我得到了这个：

$(document).ready(function () {             
  $('.dataTables_filter input[type="search"]').css(
     {'width':'350px','display':'inline-block'}
  );
});

而且效果很好！

如果您也想在搜索框中放置一个占位符，请使用这个 ..

$('.dataTables_filter input[type="search"]').
  attr('placeholder','Search in this blog ....').
  css({'width':'350px','display':'inline-block'});

这肯定会奏效。

【讨论】：

2021 年仍然有效，Bootstrap 4.5 和数据表 1.10.16

【解决方案2】：

要更改搜索框宽度，我只需进入我的.css 文件并输入以下内容：

.dataTables_filter input { width: 300px }

【讨论】：

【解决方案3】：

它对我有用

    <script>
    var datatable = $('#table').DataTable({
    ...<datatables properties>,
    initComplete: function () {
    $('.dataTables_filter input[type="search"]').css({ 'width': '350px', 'display': 'inline-block' });
    }
</script>

【讨论】：

【解决方案4】：

唯一对我有用的是这个 css。

$(document).ready(function(){

   $('#datatable-buttons_filter').css({"position":"relative","left":"-100px"});
});

【讨论】：

【解决方案5】：

尝试用css改变宽度

例子

.text_filter{
    width:45%;
    min-width:200px;
}

【讨论】：

【解决方案6】：

我在我的环境中应用了这个解决方案（Laravel 5.2、yajra/Laravel-DataTables 6.0、Bootstrap 3.x）：

我的桌子：

<table id="my-table" class="table table-striped table-hover" style="font-size: 80%">
<thead>
    <tr>
        <th class="input-filter" style="text-align:center;width: 5%">ID</th>
        ...
    </tr>
</thead>
<tbody></tbody>
<tfoot>
    <tr>
        <th style="text-align:center;width: 5%">ID</th>
        ...
    </tr>
</tfoot>

我的脚本：

<script type="text/javascript">
    var dt = $('#my-table').DataTable({
        stateSave: true,
        responsive: true,
        processing: true,
        serverSide: true,
        order: [[ 0, "desc" ]],
        lengthMenu: [[5, 10, -1], [5, 10, "All"]],
        ajax: {
            url: '...',
        },
        columns: [
            {data: 'id', name: 'id',orderable:true,searchable:true},
            ...
        ],
        language: {
            url: '....'
        },
        initComplete: function () {
            this.api().columns('.input-filter').every(function () {
                var column = this;
                var input = document.createElement("input");

                // start - this is the code inserted by me
                $(input).attr( 'style', 'text-align: center;width: 100%');
                // end  - this is the code inserted by me

                $(input).appendTo($(column.footer()).empty())
                .on('keyup', function () {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                    column.search(val ? val : '', true, true).draw();
                });
            });
        }
    });
</script>

【讨论】：

【解决方案7】：

这是中继器

      <asp:Repeater ID="rptClients" runat="server">
                    <HeaderTemplate>
                        <table id="example" class="display">
                            <thead>
                                <tr style="color:#fff;">
                                    <th>Edit</th>
                                    <th>Client Name</th>
                                    <th>Address</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Zip</th>
                                    <th>Phone</th>
                                    <th>Fax</th>
                                    <th>Client Type</th>
                                    <th>Active</th>
                                </tr>
                                <tr id="filterRow">
                                    <td>Edit</td>
                                    <td>Client Name</td>
                                    <td>Address</td>
                                    <td>City</td>
                                    <td>State</td>
                                    <td>Zip</td>
                                    <td>Phone</td>
                                    <td>Fax</td>
                                    <td>Client Type</td>
                                    <td>Active</td>
                                </tr>
                            </thead>
                            <tfoot style="display:none;">
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </tfoot>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td><div class="padBtm-05 padTop-10"><asp:Button runat="server" ID="btnEdit" Text="Edit" /></div></td>
                            <td>
                                <%# Container.DataItem("ClientName")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientAddress")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientCity")%>
                            </td>
                            <td>
                                <%# Container.DataItem("State")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientZip")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientPhone")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientFax")%>
                            </td>
                            <td>
                                <%# Container.DataItem("ClientType")%>
                            </td>
                            <td>
                                <%# Container.DataItem("Active")%>
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>

所有列都有过滤器。在这里，我实际上隐藏了编辑列过滤器，因为它不需要一个。如果我不为此列呈现过滤器，我的过滤将关闭 1 列。在 javascript 中，我以我的表格行为目标，该行最终将成为我的标题占位符。根据占位符名称，您可以运行一个 if 语句，该语句允许您定位输入元素并设置项目的宽度。我发现设置过滤器的宽度会设置表格上的列宽。

 // apply the input styling
 $('#example thead td').each(function (i) {
            var title = $('#example thead th').eq($(this).index()).text();

            if (title == "Edit") {
                var serach = '<input type="text" style="display:none;" placeholder="' + title + '" />';
            } else if (title == "Client Name") {
                var serach = '<input type="text" style="width:370px;" placeholder="' + title + '" />';
            } else if (title == "Zip") {
                var serach = '<input type="text" style="width:50px;" placeholder="' + title + '" />';
            } else {
                var serach = '<input type="text" placeholder="' + title + '" />';
            }

            $(this).html('');
            $(serach).appendTo(this).keyup(function () { table.fnFilter($(this).val(), i) })
        });


  // Apply the search
        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

【讨论】：

【解决方案8】：

我在使用 dataTables 时使用了以下代码

JS

$('#du_ft_table').dataTable( { <br/>
    "bProcessing": true,<br/>
    "bServerSide": true,<br/>
    scrollX: true,<br/>
    "sAjaxSource": "../server_processing_man.php?sourceC=du_ft&rights=1&mandatory=1&retailer_id=2725",
    "aoColumns": [
        null,
        null,
        null,
        null,
        null,
        null,

        null,
        null,
        null,
        null,
        { "mData": function(obj) { 
                return '<a class="btn btn-xs btn-primary" href="EBSNL_NW='+obj[0]+'" alt="Edit" title="Edit"><i class="fa fa-pencil-square-o"></i></a>';
        }}
    ]
} );

$('.dataTables_scrollFootInner tfoot th').each( function () {<br/>
    var title = $(this).text();<br/>
    if(title != '')  $(this).html( '<input type="text" placeholder="Search '+title+'" />' );<br/>
});

var duft_table = $('#du_ft_table').DataTable();

// Apply the search
duft_table.columns().every( function () {<br/>
    var that = this;<br/>

    $( 'input', this.footer() ).on( 'keyup change', function () {<br/>
        if ( that.search() !== this.value ) {<br/>
            that.search(this.value).draw();<br/>
        }<br/>
    } );
});

【讨论】：

【解决方案9】：

本地 JavaScript 解决方案。

$(document).ready(function() {
    $('#yourTableId').DataTable();

var addressTableFilter = document.getElementById('addressTable_filter');    
addressTableFilter.firstChild.getElementsByTagName('input')[0].style.width = "400px";
addressTableFilter.firstChild.getElementsByTagName('input')[0].setAttribute('placeholder', 'Search');
addressTableFilter.firstChild.removeChild(document.getElementById('addressTable_filter').firstChild.firstChild);
});

不要忘记将所有内容包装在准备好的文档中（如果你使用它），否则其他行可能会在数据表启动之前启动，你会得到错误。这还将删除搜索标签并将其添加为输入框内的占位符。

【讨论】：