DataTables-如何在多个列之间进行过滤? [英] DataTables - how to filter across multiple columns?

查看:94
本文介绍了DataTables-如何在多个列之间进行过滤?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我希望能够使用DataTables按多列进行过滤.现在,我正在使用fnFilter()进行过滤,但是它的column参数似乎只接受一个整数,而不是一个列数组.这是我到目前为止的内容: https://jsfiddle.net/dmcgrew/x85o0mgL/2/

I'd like to be able to filter by multiple columns using DataTables. Right now I'm using fnFilter() to filter, but its column parameter seems to only accept a single integer, not an array of columns. This is what I have so far: https://jsfiddle.net/dmcgrew/x85o0mgL/2/

在允许峰值"列中,我有一个data-search属性,设置了yescrestnocrest.我也想使用"Crest"复选框来进行过滤.

In the "crest allowed" column I have a data-search attribute with either yescrest or nocrest set. I'd like to use the "Crest" checkbox to be able to filter by that as well.

如果单击原始"和波峰"复选框,我应该看到两个允许波峰的原始项目.

If I click the Pristine and Crest checkboxes I should see the two pristine items that allow crests.

推荐答案

您可以查看 DataTables插件,它允许多列多标准过滤(包括联合选择).

You may check out this DataTables plug-in, which allows multiple-column-multiple-criteria filtering (including union selection).

这是工作中的 DEMO :

$(document).ready(function () {
	//Source data definition	
	var tableData = [
    {item: 'banana', category: 'fruit', color: 'yellow'},
    {item: 'pear', category: 'fruit', color: 'green'},
    {item: 'cabbage', category: 'vegie', color: 'green'},
    {item: 'carrot', category: 'vegie', color: 'red'},
    {item: 'apple', category: 'fruit', color: 'red'},
    {item: 'kiwi', category: 'fruit', color: 'brown'}
	];
	//DataTable definition	
	window.dataTable = $('#mytable').DataTable({
			sDom: 'tF',
			data: tableData,
			columns: [{
					data: 'item',
					title: 'Item'
				}, {
					data: 'category',
					title: 'Category'
				}, {
					data: 'color',
					title: 'Color'
		
			}]
	});

});

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.mfilter.tk/js/mfilter.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

这篇关于DataTables-如何在多个列之间进行过滤?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆