Serverside数据表搜索框样式

时间:2017-07-03 23:18:41

标签: javascript jquery css datatables

我已经尝试了一段时间寻找这个问题的解决方案但是还没有设法找到任何东西。希望有人可以帮助我。

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

这是我正在讨论的部分(来自源javascript文件)

df.groupby(np.arange(len(df)) // 3).mean()

加载页面时的代码

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

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

2 个答案:

答案 0 :(得分:0)

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

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

请参阅this example以获取代码和演示。

答案 1 :(得分:0)

虽然已经很久了,但我会记录在案。

在源文件datatables.min.js中,首先对其进行美化,然后更改第3469行的ssearch和ssearchplaceholder值。

默认值为:

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

然后我将其更改为:

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

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