Заполните выпадающее меню из столбца, разделенного запятыми, в DataTable - PullRequest
Новая
       38

Заполните выпадающее меню из столбца, разделенного запятыми, в DataTable

0 голосов
/ 05 мая 2019

Я создаю таблицу данных с функцией поиска, аналогичной этой ссылке.

https://datatables.net/examples/api/multi_filter_select.html

Но я хочу иметь функцию поиска по тегам. В моей таблице есть столбец с именем Tag column. Каждая строка столбца Tag содержит строку, разделенную запятой. Таблица выглядит так: 

"#" |"Type"| "Tag Column"
1  | Type A |       Tag1, Tag2, Tag3
2  | Type A |       Tag1, Tag2
3  | Type B |       Tag4, Tag5
4  | Type A |       Tag6

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

Я хочу, чтобы он отображал только отфильтрованные строки; например, если я фильтрую «Тип столбца» для «Типа А», раскрывающееся меню должно отображать следующие теги: 

Tag1
Tag2
Tag3
Tag6

Я пробовал yadcf (код ниже), но когда я выбираю «Тип A», раскрывающееся меню тега по-прежнему показывает все теги 1-6. Я хотел бы удалить теги 4 и 5.

Есть предложения? 

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="jquery.dataTables.yadcf.js"></script>

<style>
.label {
  padding: 0px 10px 0px 10px;
    border: 1px solid #ccc;
    -moz-border-radius: 1em; /* for mozilla-based browsers */
    -webkit-border-radius: 1em; /* for webkit-based browsers */
    border-radius: 1em; /* theoretically for *all* browsers*/
}

</style>  

<script>
$(document).ready(function(){
  $('#example').dataTable().yadcf([
        {column_number : 1},
        {column_number : 2,  column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});
</script>
<meta charset=utf-8 />
</head>
 <body>
    <div id="container">
      <table id="example">
            <thead>
              <tr>
                <th>#</th>
                <th>Type</th>
                <th>Tags</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Type A</td>
                <td><span class="label">Tag 1</span><span class="label lightblue">Tag 2</span><span class="label lightblue">Tag 3</span></td>
              </tr>
              <tr>
                <td>2</td>
                <td>Type A</td>
                <td><span class="label lightblue">Tag 1</span><span class="label lightblue">Tag 2</span></td>
              </tr>
              <tr>
                <td>3</td>
                <td>Type B</td>             
                <td><span class="label lightblue">Tag 4</span><span class="label lightblue">Tag 5</span></td>
              </tr>
              <tr>
                <td>4</td>
                <td>Type A</td>
                <td><span class="label lightblue">Tag 6</span></td>
              </tr>
            </tbody>
          </table>

    </div>
  </body>
</html>

Спасибо

1 Ответ

0 голосов
/ 06 мая 2019

Учитывая вашу среду, я бы предложил использовать jQuery, а не DataTables API.

Следующий код демонстрирует одно из возможных решений: 

//assign DataTable to a variable
const dataTable = $('#example').DataTable({
  dom: 't'
})

//grab all unique 'tag' column entries into array
const tags = [...$('.label')].reduce((tags, tag) => {
  tag = $(tag).text();
  if(tags.indexOf(tag) == -1) tags.push(tag);
  return tags;
}, []);

//populate <select> with available tag options
$('#tagSelector').html(tags.reduce((options, tag) => options+=`<option value="${tag}">${tag}</option>`, '<option value="" selected></option>'));

//apply tag search
$('#tagSelector').on('change', function(){
  dataTable.column(2).search($(this).val()).draw();
});
.label {
  padding: 0px 10px 0px 10px;
    border: 1px solid #ccc;
    -moz-border-radius: 1em; /* for mozilla-based browsers */
    -webkit-border-radius: 1em; /* for webkit-based browsers */
    border-radius: 1em; /* theoretically for *all* browsers*/
}
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="application/javascript" src="test.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="test.css">
</head>
<body>
<select id="tagSelector"></select>
<table id="example">
	<thead>
		<tr>
			<th>#</th>
			<th>Type</th>
			<th>Tags</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Type A</td>
			<td><span class="label">Tag 1</span><span class="label lightblue">Tag 2</span><span class="label lightblue">Tag 3</span></td>
		</tr>
		<tr>
			<td>2</td>
			<td>Type A</td>
			<td><span class="label lightblue">Tag 1</span><span class="label lightblue">Tag 2</span></td>
		</tr>
		<tr>
			<td>3</td>
			<td>Type B</td>             
			<td><span class="label lightblue">Tag 4</span><span class="label lightblue">Tag 5</span></td>
		</tr>
		<tr>
			<td>4</td>
			<td>Type A</td>
			<td><span class="label lightblue">Tag 6</span></td>
		</tr>
	</tbody>
</table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...