服务器端数据表搜索框样式答案

【问题标题】：Serverside Datatables Search box styling服务器端数据表搜索框样式
【发布时间】：2026-01-23 09:45:01
【问题描述】：

我注意到数据表的搜索和显示输入卡在<label> 标签内。当我尝试从源 JavaScript 中删除标签标签时，输入消失了。我可能做错了，但有没有办法将其删除，以便我可以调整其宽度并使其符合我的动态列大小？

这是我正在谈论的部分（来自源 JavaScript 文件）

function pb(a) {
        var b = a.oClasses,
            c = a.sTableId,
            d = a.oLanguage,
            e = a.oPreviousSearch,
            f = a.aanFeatures,
            g = '<input type="search" class="' + b.sFilterInput + '"/>',
            j = d.sSearch,
            j = j.match(/_INPUT_/) ? j.replace("_INPUT_", g) : j + g,
            b = h("<div/>", {
                id: !f.f ? c + "_filter" : null,
                "class": b.sFilter
            }).append(h("<label/>").append(j)),
            f = function() {
                var b = !this.value ?
                    "" : this.value;
                b != e.sSearch && (fa(a, {
                    sSearch: b,
                    bRegex: e.bRegex,
                    bSmart: e.bSmart,
                    bCaseInsensitive: e.bCaseInsensitive
                }), a._iDisplayStart = 0, O(a))
            },
            g = null !== a.searchDelay ? a.searchDelay : "ssp" === y(a) ? 400 : 0,
            i = h("input", b).val(e.sSearch).attr("placeholder", d.sSearchPlaceholder).bind("keyup.DT search.DT input.DT paste.DT cut.DT", g ? Oa(f, g) : f).bind("keypress.DT", function(a) {
                if (13 == a.keyCode) return !1
            }).attr("aria-controls", c);
        h(a.nTable).on("search.dt.DT", function(b, c) {
            if (a === c) try {
                i[0] !== I.activeElement && i.val(e.sSearch)
            } catch (d) {}
        });
        return b[0]
    }

页面加载时的代码

<div class="row">
    <div class="col-sm-12">
        <div id="table_filter" class="dataTables_filter pull-left">
            <label>
                <input type="search" class="form-control input-sm" placeholder="Search" aria-controls="table">
            </label>
        </div>
    </div>
</div>

查看标签下的搜索输入如何？我想知道如何删除它以使其符合我的列大小。

【问题讨论】：

修改插件的源文件几乎总是一个坏主意，还有其他方法可以做到。您能否通过屏幕截图和/或 HTML 演示您要实现的结构？
嗨！感谢回复。我已经更新了我的代码以显示 html 结构

标签： javascript jquery css datatables

【解决方案1】：

使用下面的代码从搜索框中删除label 节点。

var table = $('#example').DataTable({
   initComplete: function(){
      $('.dataTables_filter label').children().unwrap('<label/>');
   }
});

有关代码和演示，请参阅 this example。

【讨论】：

我收到语法错误，无法识别的表达式：出于某种原因。
我设法根据您的代码解决了它！谢谢！我必须检查我的特定班级的父级是否是一个标签并打开它。
另外，如果您是真正的 Gyrocode.com，非常感谢您提供有关数据表复选框的教程。非常有帮助

【解决方案2】：

虽然已经这么久了，但我还是会正式回答你的问题。

在源文件datatables.min.js中，先美化一下，然后修改ssearch和ssearchplaceholder的值，在3469行。

默认为：

sSearch: 'Search:',
sSearchPlaceholder: "",

我把它改成了：

sSearch: '',
sSearchPlaceholder: "Αναζήτηση:",

在占位符中不输出标签和“Αναζήτηση:”

【讨论】：