Jquery 使用sDom和columnFilter在表顶部进行筛选

是否有一种简单的方法可以使用

sDom

属性将过滤器从表的页脚移动到页眉部分

目前我使用的是：

“sDom”：“WTt”

（使用jqueryui）

如果我尝试使用

sPlaceHolder

在顶部移动过滤器，如下所示：

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

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

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

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

更新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( );

它显示以下输出：

注意/问题：查看整个表格如何将我的div和overflow拆分到右侧，并在底部提供一个水平滚动条。

尝试以下操作：

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

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

如果这是你想要的，请给出一些反馈

顺便说一句：这个插件在你关注一个输入时就开始排序，这有点烦人：-\

另一次更新

要摆脱排序，最简单的方法是将bSortable for the columns设置为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"
    }]
  });

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

因为我们还有几天的时间，如果你有进一步的问题，我明天会给你回复。 请随时通知我您的进展情况，或者您是否找到了更好的解决方案

---

祝你好运

不知道columnFilter，但在我的yadcf中，默认情况下，插件过滤器位于列的顶部。。。看起来不错，有一些很酷的功能，我会尝试一下。我不确定你正在使用的众多columnfilter插件中的哪一个。你能发布一个链接到你想要的答案吗？@maingay请查看我的更新。谢谢，我不知道你是否理解你的问题。也许你可以添加一个屏幕截图或一幅画，向我们展示你想要实现的目标。还是用这个东西来澄清并把它还给我？是的！它使用css规则。在100%上，我有一些问题，80%看起来很棒……现在我已经实现了它，点击输入时的排序看起来真的很烦人。你有什么建议我如何克服这个问题吗？在我的答案中添加了另一个更新。我会尝试找到一个更好的方法，但如果不修补插件代码，这肯定不起作用。因为我现在已经将输入宽度设置为80%，在输入右侧仍然有一些空间，可以很好地用于排序，也可以在th上使用输入，其他精细的更新正在等待处理：-）

th input{
  width:100%;
}

  $("#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"
    }]
  });

    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%">');

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

    });

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