JQuery DataTables несколько фильтров выбора столбца - PullRequest
Новая
       2

JQuery DataTables несколько фильтров выбора столбца

0 голосов
/ 15 января 2019

Я хотел бы получить превосходную фильтрацию по нескольким критериям для отдельных столбцов DataTables. Здесь я сталкивался с несколькими темами, касающимися стекового потока, но ни одна из них, похоже, не соответствует тому, что я ищу.

Пока у меня есть только образец таблицы, и я буду признателен за любые (даже самые высокоуровневые) указания относительно того, куда двигаться дальше. 

	var tableData = [
		{name: 'Clark Kent', city: 'Metropolis'},
	  {name: 'Bruce Wayne', city: 'Gotham'},
	  {name: 'Steve Rogers', city: 'New York'},
	  {name: 'Peter Parker', city: 'New York'},
	  {name: 'Thor Odinson', city: 'Asgard'}
	];

	var dataTable = $('#mytable').DataTable({
		sDom: 't',
	  data: tableData,
	  columns: [
		{data: 'name', title: 'Name'},
		{data: 'city', title: 'City'}
	  ]
	});
<!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>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

1 Ответ

0 голосов
/ 07 февраля 2019

Вы можете найти использование после DataTables plug-in . Я несколько расширил ваш пример для демонстрационных целей (он работает несколько медленнее, поскольку неминифицированные файлы обслуживаются из github через jsdelivr): 

$(document).ready(function () {
	//Source data definition	
	var tableData = [{
			name: 'Clark Kent',
			city: 'Metropolis',
			race: 'cryptonian'
		}, {
			name: 'Bruce Wayne',
			city: 'Gotham',
			race: 'human'
		}, {
			name: 'Steve Rogers',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Peter Parker',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Thor Odinson',
			city: 'Asgard',
			race: 'god'
		}, {
			name: 'Jonathan Osterman',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Walter Kovacs',
			city: 'New Jersey',
			race: 'human'
		}, {
			name: 'Arthur Curry',
			city: 'Atlantis',
			race: 'superhuman'
		}, {
			name: 'Tony Stark',
			city: 'New York',
			race: 'human'
		}, {
			name: 'Scott Lang',
			city: 'Coral Gables',
			race: 'human'
		}, {
			name: 'Bruce Banner',
			city: 'New York',
			race: 'superhuman'
		}
	];
	//DataTable definition	
	window.dataTable = $('#mytable').DataTable({
			sDom: 'tF',
			data: tableData,
			columns: [{
					data: 'name',
					title: 'Name'
				}, {
					data: 'city',
					title: 'City'
				}, {
					data: 'race',
					title: 'Race'
		
			}]
	});
});
<!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 type="application/javascript" 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...