Question

是否有一种简单的方法可以使用sDom属性将过滤器从表格的页脚移动到头部？

目前我使用的是："sDom": 'WT<"clear"><"H"lfr>t<"F"ip>'（使用JQuery UI）

如果我尝试使用sPlaceHolder移动顶部的过滤器，请执行以下操作：

.columnFilter({sPlaceHolder: "head:before"});

我让我的桌子向右扩展，重叠所有div并创建一个水平页面滚动条。

更新1 我正在使用this列过滤器插件

更新2 我目前的初始化代码是：

var oTable = $('#' + tblName).dataTable({
    "aaSorting": [[1, 'asc']],
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "iDisplayLength": -1,
    "aLengthMenu": [
        [10, 25, 50, 100, 200, -1],
        [10, 25, 50, 100, 200, "All"]
    ],
    "sDom": 'WT<"clear"><"H"lfr>t<"F"ip>',
    "oColumnFilterWidgets": {
        "aiExclude": [0, 1, 2, 6,7,8]
    },
    "oTableTools": {
        "sSwfPath": "../js/TableTools/media/swf/copy_csv_xls_pdf.swf"
        ,
        "aButtons": [
            {
                "sExtends": "xls",
                "sTitle": "Results",
                "sButtonText": "Export to Xls",
                "mColumns": [1, 2, 3, 4, 5,6,7,8]
            },
            {
                "sExtends": "pdf",
                "sPdfOrientation": "landscape",
                "sTitle": "Results",
                "sButtonText": "Export to Pdf",
                 "mColumns": [1, 2, 3, 4, 5,6,7,8,9,10]
            }]
    }
}).columnFilter( );

并将其显示为输出： enter image description here

当我尝试使用{sPlaceHolder: "head:before"}时这样：

....    .columnFilter({sPlaceHolder: "head:before"});

它显示以下输出：

enter image description here

注意/问题：看看整个表如何打破我的div并向右溢出，给我一个底部的水平滚动条。

Answer 1

试试这个：

在插件的第115行更改此行：

var input = $('<input type="text" class="' + search_init + sCSSClass + '" value="' + inputvalue + '" rel="' + i + '"/>');

为：

var input = $('<input type="text" style="width:100%" class="' + search_init + sCSSClass + '" value="' + inputvalue + '" rel="' + i + '"/>');

这将为TEXT输入字段设置100％的强制宽度。当然，这也必须与其他输入一起完成。（RangeInput等...）我不知道你是否在桌子上使用任何东西。

也许看看这个Plunker，我将整个表格包裹在一个宽度为300px的非常狭窄的容器div中。现在重叠或滚动条在这里！

与此同时，我将尝试找出是否可以通过简单的css规则来完成。

<强>更新是的，似乎没有用这个css规则修补插件就可以了：

th input{
  width:100%;
}

Look here (style.css)

如果这是您想要的，请提供一些反馈。

顺便说一句：有点烦人的是，一旦你集中输入，这个插件就会开始排序： - \

另一次更新

要摆脱排序，最简单的方法是将列的bSortable设置为false。

  $("#dt").dataTable({
    "bJQueryUI": true,
    "sDom": 'WT<"clear"><"H"lfr>t<"F"ip>',
    aoColumns: [{
      type: "text",
      bSortable: false
    }, {
      type: "text",
      bSortable: false
    }, {
      type: "text",
      bSortable: false
    }]
  }).columnFilter({
    sPlaceHolder: "head:before",
    aoColumns: [{
      type: "text"
    }, {
      type: "text"
    }, {
      type: "text"
    }]
  });

嗯，但也许排序是需要的，因为它很酷的功能？我会尝试寻找另一种解决方案......请稍等......

嗯，是的，Plunker

再次更新时间 只有通过修补插件源才能实现排序和过滤。使用this updated Plunker as reference

中的columnfilter.js脚本

第124 - 126行：在这里，我更改了模板，以便过滤图标和输入框都可以显示在标题单元格中（让我整整一段时间找到它！）

    th.wrapInner('<div style="display:table-cell;" class="filter_column filter_text" />');
    th.append('<div style="display:table-cell;position: relative;top:4px" class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s">');
    th.wrapInner('<div style="display:table;width:100%">');

在第165-171行中，我对点击和聚焦做出反应并停止冒泡，因此点击和焦点事件无法到达触发排序的基础标题单元格。

    input.click(function (e) {
      e.stopPropagation();

    });

    input.focus(function (e) {
      e.stopPropagation();

这仅适用于文本过滤器。您可能会找到一种方法，将这些更改添加到其他过滤器输入中，因为我今天会在工作时关闭我的计算机并回家。

由于我们还剩下几天的时间，如果您有其他问题，我明天会再回复您。请随时通知我您的进度，或者您是否找到了更好的解决方案。

祝你好运！

使用sDom和columnFilter在表顶部过滤

1 个答案: