数据表搜索标题搜索列上的完全匹配
Posted
技术标签:
【中文标题】数据表搜索标题搜索列上的完全匹配【英文标题】：Datatables Search exact match on header search column 【发布时间】：2021-12-04 17:16:18 【问题描述】：我是编码新手，有发布重复问题的风险。我已经看到了很多这样的问题，但我还没有找到一个答案来帮助我在下面的代码中实现我需要的需求。我需要搜索功能来匹配精确的数学。因此，当用户输入 Anneke 时，它不应该显示 Janneke，或者当用户输入 4 时，它应该只显示 4 而不是 14、24 等。我被困在我的代码中实施正则表达式，我希望这里有人知道如何在下面的代码中执行此操作。
$('#OBTable thead tr')
.clone(true)
.addClass('filters')
.appendTo('#OBTable thead');
$('#OBTable thead tr:eq(1) th').text("");
var table = $('#OBTable').dataTable(
"ajax":
"url": "SelectData.php",
"dataSrc": "data",
,
orderCellsTop: true,
select: true,
initComplete: function ()
var api = this.api();
// For each column
api
.columns([0,6])
.eq(0)
.each(function (colIdx)
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="search" class="form-control form-control-sm" placeholder="Filter.." />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e)
e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '(search)'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('search', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
);
);
,
【问题讨论】：
试试这个 - ***.com/questions/8609577/… 感谢您的反应。找到了很多这样的答案。但是我不知道如何在上面的代码中实现它..我一定是笨蛋什么的.. 以下是我目前所拥有的。但是这种方式在移除输入时结果不会恢复到原始状态。所以这没有解决方案.. live.datatables.net/mowobugu/3/edit 还发现了以下内容。但我不知道这如何在我的代码示例中帮助我......所以如果有人能够提供帮助。请帮忙 ！ datatables.net/examples/api/regex.html 【参考方案1】：有多种方法可以实现精确搜索。以下方法使用your example 作为起点 - 但有以下更改：
-
添加了以下行以清除第二个标题中的标题：
$('#example thead tr:eq(1) th').text("");
-
替换了以下行：
var title = $(cell).text();
用这个：
var title = $('#example thead tr:eq(0) th:eq(' + colIdx + ')').text();
这允许您在相关数据输入字段中显示一些默认文本（在本例中为标题单元格中的文本）。
这些点都与“精确搜索”没有直接关系——但我还是添加了它们，因为我认为这很有用。
-
注释掉这些行，因为它们在这里没有任何用处：
// Get the search value
//$(this).attr('title', $(this).val());
//var regexr = '(search)'; //$(this).parents('th').find('select').val();
-
对于精确搜索，我添加了一些逻辑以确保在搜索项为空时显示所有数据。为此，我将空字符串
"" 替换为以下正则表达式 .* - 这意味着“任何字符”（. 点）重复任意次数（* 星号）。
这意味着，对于空字段，而不是以以下正则表达式结尾...
^$
...你实际上是这样结束的：
^.*$
表示从字段开头 (^) 到字段结尾 ($) 的“任何内容”。
这是执行此操作的代码：
var searchTerm = $(this).val();
if (searchTerm.trim() === "")
searchTerm = ".*";
console.log( searchTerm ); // just for testing purposes
api
.column(colIdx)
.search("^" + searchTerm + "$", true, false, true)
.draw();
这是一个您可以运行的演示：
$(document).ready(function()
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
$('#example thead tr:eq(1) th').text("");
var table = $('#example').DataTable(
orderCellsTop: true,
initComplete: function()
var api = this.api();
// For each column
api
.columns([0, 2])
.eq(0)
.each(function(colIdx)
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $('#example thead tr:eq(0) th:eq(' + colIdx + ')').text();
$(cell).html('<input type="text" placeholder="Enter ' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function(e)
e.stopPropagation();
// Get the search value
//$(this).attr('title', $(this).val());
//var regexr = '(search)';
//$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
var searchTerm = $(this).val();
if (searchTerm.trim() === "")
searchTerm = ".*";
console.log( searchTerm );
api
.column(colIdx)
.search("^" + searchTerm + "$", true, false, true)
.draw();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
);
);
,
);
);<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>Exact column search</title>
<style>
body
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
</style>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Anneke</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Janneke</td>
<td>javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$3,750</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$3,120</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$3,120</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$3,600</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$4,965</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td>$4,965</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td>$2,875</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$4,525</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td>$4,080</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td>$3,750</td>
</tr>
<tr>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$2,875</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td>$3,750</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$6,730</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$6,730</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$4,080</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$3,750</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$4,080</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$4,200</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$4,965</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$5,000</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td>$3,600</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$3,600</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$4,800</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td>$6,730</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$4,800</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$2,875</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$4,800</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$3,120</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$5,300</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td>$4,080</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>更新
后续问题是：
是否也有可能在此示例中仅第 0 列和第 2 列使用精确搜索，而第 1 列和第 4 列例如使用常规搜索？
您已经拥有处理此问题所需的各种部件，但这里有一些注意事项：
-
更改列列表以包含您要搜索的额外列：
.columns([0, 1, 2, 4])
-
如果列索引为
0 或2，则使用if 语句（或类似逻辑）执行“精确”搜索 - 否则执行“标准”搜索。
这就是逻辑：
// Search the column for that value
var searchTerm = $(this).val();
if ( colIdx === 0 || colIdx === 2 )
// we are doing an "exact" search:
if (searchTerm.trim() === "")
searchTerm = ".*";
api
.column(colIdx)
.search("^" + searchTerm + "$", true, false, true)
.draw();
else
// we are doing a standard search:
api
.column(colIdx)
.search(searchTerm, false, true, true)
.draw();
您可以阅读更多关于各种search() 参数here 的信息。
【讨论】：
谢谢！你的救命稻草再一次！一个后续问题（对不起！）。是否也有可能在此示例中仅第 0 列和第 2 列使用精确搜索，而第 1 列和第 4 列例如使用常规搜索？ 我鼓励您下一次自己研究和尝试 - 并在新问题中展示您的尝试。这通常是一种更好的学习方式。话虽如此，我在答案中提供了一种可能的方法。 非常感谢！你的评论被注意到了！您有关于如何搜索此类内容的提示吗？因为我用谷歌搜索了很多，但没有任何信息可以给我你现在给我的结果。 “如何搜索” - 这是一个很好的问题。很难给出建议，但我会尝试... 如果您对编码比较陌生，那么这些具体问题涉及 JavaScript 代码以及 DataTables 功能。因此，(1) 你编写的 JavaScript 越多，学习的 JavaScript 教程越多——那么你就会越熟悉该语言的功能，以及有效搜索答案所需的术语。 那么，（2）学会调试你的小程序。开始执行此操作的最简单（但不是唯一）方法是使用console.log() 语句，因此您可以在代码中的不同位置查看变量的值。最后（3）对自己要有耐心。如果你被卡住了，别担心——我们都被卡住了。把问题放在一边，稍后再回来。以上是关于数据表搜索标题搜索列上的完全匹配的主要内容，如果未能解决你的问题，请参考以下文章
使用 Postgres 全文搜索搜索完全匹配的最佳方法是啥？