时间戳

首页 > 解决方案 > 从 DataTable 中的逗号分隔列填充下拉菜单

javascript - 从 DataTable 中的逗号分隔列填充下拉菜单

问题描述

我正在构建一个具有类似于此链接的搜索功能的 DataTable。

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

但我想要一个标签搜索功能。我的表中有一个名为 Tag 列的列。Tag 列的每一行都包含一个逗号分隔的字符串。该表如下所示：

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

如何从标签列中填充下拉菜单，使每个选项只有一个标签。

我希望它只显示过滤的行；例如，如果我为“类型 A”过滤“列类型”，下拉菜单必须显示以下标签：

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>

谢谢

标签： javascripthtmldrop-down-menudatatablestags

解决方案

考虑到您的环境，我建议使用 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>

推荐阅读