从tablesorter过滤窗口小部件不起作用 [英] Filter Widget from tablesorter doesn't work

问题描述

我在MVC Razor应用程序中使用Tablesorter（2.22.1），添加基本的过滤器行时出现问题。
我已经在bundle中添加了脚本（js插件）。
$ b $ pre $ bundles.Add（new ScriptBundle（〜/包括（
〜/ Scripts / libs / jquery.tablesorter.js，
〜/ Scripts / libs / jquery.tablesorter.widgets.js，
〜/ Scripts / libs / jquery.tablesorter.combined.js）
）;

我还将它包含在带有jQuery的 _Layout.html 中。我没有使用jquery.latest.js，因为在我的项目中有不同的jquery文件（新的），他们被添加到_Layout。

  @ Scripts.Render（〜/ bundles / jquery）
 ... 
 @ Scripts.Render（〜/ bundles / initTableSort）
  

我有我自己的CSS，我不使用Tablesorter主题。
My js函数：

$ $ $ $ $ $ $ $ $ $tablesorter。tablesorter {
sortReset：true ，
sortRestart：true，
widthFixed：true，

textAttribute：'data-sort'，
widgets：[filter]，
widgetOptions ：{
filter_external：'.search'，
filter_defaultFilter：{1：'〜{query}'}，
filter_columnFilters：true，
filter_placeholder：{search：'Search。 ..'}，
filter_saveFilters：true，
filter_reset：'.reset'
}，
headers：{$ b $ th.smallChart，th.errorLink'： {
sorter：false，
filter：false
}，
'th.errorDifference'：{
sorter：'data'
}
}

}）;

表中的数据是通过foreach循环呈现的，但是表头和表格需要classes / id。我不粘贴表代码，因为它太长了，我认为它没有问题，看起来像。

在排序后，重置排序（第三点击），自定义分析器工作正常，但包括小工具过滤器给我只有行向每列写过滤器查询，但它不工作。我可以写点东西，但是表格之后没有过滤。我不知道为什么。检查不显示任何错误。

请，有人可以帮助我，写我做错了什么？

编辑1

我甚至使用本文档中的数据创建新项目基本过滤器Tablesorter文档，我仍然有同样的问题，所以我不得不做一些错误的事情，但我不知道什么和在哪里。

解决方案

问题已解决

问题出在.css主题文件中...我不链接.css蓝色主题文件，因为我使用我自己的css，但是没有关于你必须添加.css主题文件的一部分来使用过滤的信息。

你只需要添加

$ b $

  / *行被过滤隐藏（子行需要）* / 
 .tablesorter .filtered {
 display：none ; 
 
 
 ajax error row * / 
 .tablesorter .tablesorter-errorRow td {
 text-align：center; 
 cursor：pointer; 
 background-color：＃e6bf99; 
} 
  

到您的.css文件，一切都很顺利。

I'm using Tablesorter (2.22.1) in MVC Razor application and I have a problem with adding basic filter row. I've added scripts (js plugins) in bundle.

bundles.Add(new ScriptBundle("~/bundles/initTableSort").Include(
                "~/Scripts/libs/jquery.tablesorter.js",
                "~/Scripts/libs/jquery.tablesorter.widgets.js",
                "~/Scripts/libs/jquery.tablesorter.combined.js")
);

I also included it in _Layout.html with jquery. I'm not using jquery.latest.js, because in my project are different jquery files (new) and they are added to the _Layout.

@Scripts.Render("~/bundles/jquery")
...
@Scripts.Render("~/bundles/initTableSort")

I have my own css and I don't use Tablesorter themes. My js functions:

$(".tablesorter").tablesorter({
    sortReset: true,
    sortRestart: true,
    widthFixed : true,

    textAttribute: 'data-sort',
    widgets: ["filter"],
    widgetOptions: {
        filter_external: '.search',
        filter_defaultFilter: { 1: '~{query}' },
        filter_columnFilters: true,
        filter_placeholder: { search: 'Search...' },
        filter_saveFilters: true,
        filter_reset: '.reset'
    },
    headers: {
        'th.smallChart, th.errorLink': {
            sorter: false,
            filter: false
        },
        'th.errorDifference': {
            sorter: 'data'
        }
    }

});

Data in table are rendered by foreach loop, but the headers and table has needed classes/ids. I don't paste the table code, because it's too long and I think there's no problem with it how it looks like.

After that sorting, reset sorting (after third click), custom parser works fine, but include Widget 'Filter' gives me only row to write a filter query to every column, but it's not working. I could write something, but table is not filtered after that. I don't know why. Inspect doesn't show any error.

Please, someone could help me with that and write what I'm doing wrong?

EDIT 1

I even create new project with data from this documentation Basic Filter Tablesorter Documentation and i have still the same issue, so I have to something do wrong, but I don't know what and where.

解决方案

PROBLEM SOLVED

Problem was in .css theme file... I don't link a .css blue theme file, because I use my own css, but there is no info about that you have to add part of .css theme file to use filtering.

You have to only add

/* rows hidden by filtering (needed for child rows) */
.tablesorter .filtered {
    display: none;
}

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
    text-align: center;
    cursor: pointer;
    background-color: #e6bf99;
}

to your .css file and everything goes fine.

这篇关于从tablesorter过滤窗口小部件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！