Javascript jQuery数据表自定义搜索插件

我是一个网络开发的初学者。我正在将我的C#winforms应用程序转换为web应用程序

我试图使用

jQuery

Datatables插件在表上实现自定义搜索。考虑自定义搜索示例（）。我想展示所有员工的详细信息，但办公室位于“爱丁堡”的员工除外

通过

文本框

过滤其余员工

所以基本上相当于

select * from employees where office not like '%Edinburgh%';

select * from products where description not like '%SC%';

这将显示所有员工及其详细信息，但办公室位于爱丁堡的员工除外。 我想对这些员工进行筛选

编辑：

我使用jquerydatatables编译了一个Fiddle（），并填充了数据

单击非SC按钮时，我只想显示描述中没有“SC”的值

所以基本上相当于

select * from employees where office not like '%Edinburgh%';

select * from products where description not like '%SC%';

这些值将根据文本框中提供的输入进行过滤

---

关于

我不确定“爱丁堡”是否应该硬编码，或者您是否希望用户能够指定自己的值，因此这里是硬编码的解决方案，并对用户提供的值选项进行注释：

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    var exclude = 'Edinburgh'; // User provided value: $("#user-exclude-field").val();

    if(!exclude) return true; // nothing to exclude, so all rows should be included

    var re = new Regexp("\\b" + exclude + "\\b", "i"); // using the \b word boundary meta-character to match only "Edinburgh" and not "NewEdinburgh" (typo on purpose)
    return !re.test(data.office); // return TRUE (i.e. include this row in the search results) if the "office" attribute of the current row data does NOT match our excluded word
});

更新

根据你的评论，这里有一个提琴样本：

更新2

因此，您希望能够筛选包含单词的所有项目，或者筛选不包含该单词的所有行。更新fiddle:jsfiddle.net/1xh3kys5

这里的神奇之处在于

过滤器

变量。以前它只是一个布尔变量，因为我们想跟踪两种状态：“包含SC”和“显示所有内容”。但现在你们实际上有三种状态：“包含SC”，“向我展示一切”和“向我展示一切不包含SC的东西”。。。所以布尔值已经不够了

有几种方法可以实现这一点，但我使用了filters对象，因此您最终可以轻松添加更多过滤器：

var filters = {
    sc: {active: false, re: new RegExp("\\bSC\\b", "i"), include: true}
};

这里的过滤器对象只有一个属性，一个过滤器，称为“sc”。该属性本身就是一个对象，它有几个属性，可以让我们表示所有三种状态：

• 活动用于打开/关闭此特定“sc”过滤器。因此，当您想要显示所有行时，只需将其设置为false，并停用sc过滤器
• include是用于控制是否要包含或排除包含单词“SC”的行的布尔值
• re只是我们想要过滤行时要使用的正则表达式

当我们现在筛选行时，我们只需使用正则表达式来确定特定行是否包含“SC”

因此，基于“include”属性的值，将其存储在名为

includes\u sc

的变量中。如果当前筛选器需要包含“SC”的所有行，我们将按原样返回

includes\u SC

。另一方面，如果我们想要所有不包含“SC”的行，我们将返回

includes_SC

的逆（！includes_SC）

---

希望这有帮助

非常感谢。这就成功了。我试图通过使用单选按钮而不是普通按钮来切换。请查找更新的fiddleRight，因此您只需将全局

exclude\u sc

变量设置为您选择的值，然后重新绘制表格。因此，在单选按钮的情况下，只需确保当单击它们时，它们会设置

exclude\u sc

，然后重新绘制。设置全局exclude\u sc后，我可以切换单选按钮以获得输出。我试图只显示包含SC的值。不幸的是，我无法做到这一点。我已经包括了最新的小提琴。啊哈！所以，你改变了一点逻辑-不是它不只是一个切换与SC与一切，但与SC与没有SC。。。这是最新的提琴：非常感谢MacPrawn。成功了。如果你能解释一下，那就太好了。我正在向web开发迁移。如果你能为初学者推荐任何训练，那就太棒了。