使用 DataTables 时，自定义下拉搜索不允许我添加新项目
Posted
技术标签:
【中文标题】使用 DataTables 时，自定义下拉搜索不允许我添加新项目【英文标题】：Custom Drop down search won't allow me to add new items when using DataTables 【发布时间】：2021-09-29 03:42:59 【问题描述】：我使用 DataTables、类别下拉搜索框和文本字段搜索框创建了一个带有静态 html 表的 HTML 页面。一切正常，除非我尝试在原始 3（类别 1、类别 2、类别 3）之外添加新类别。这些搜索和过滤表中的每一个都正确。但是，如果我添加一个新类别（绘图），它会告诉我“未找到条目”，即使我用新类别标记了几行数据。如果我将旧类别选项值之一（例如类别 3）更改为“绘制”，它将过滤表格并显示所有带有 td 项目标记为类别 3 的行。为什么表格不接受新的下拉选项和/ 或未在表中找到新选项？
HTML：
<section id="autocad-table">
<div class="table-container">
<div class="category-filter">
<label for="Category">What Type Of Code Do You Need?</label>
<select class="dropdown" name="Category" id="categoryFilter">
<option value="">All</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Draw</option>
</select>
</div>
<table id="commandsTable" class="stripe hover">
<thead>
<th>Command</th>
<th>Description</th>
<th>Category</th>
</thead>
<tbody id="commandsTableBody">
<tr>
<td>0_FILLET</td>
<td>Create a 0" radius fillet</td>
<td>Category 1</td>
</tr>
<tr>
<td>ALLFLAT</td>
<td>Flatten all objects in all blocks & layouts</td>
<td>Category 2</td>
</tr>
<tr>
<td>ANNO_TO_SQUEEZE</td>
<td>Convert an annotation to the SQUEEZE text style</td>
<td>Category 2</td>
</tr>
<tr>
<td>ARR</td>
<td>Creates an array of a selected object at a specified angle</td>
<td>Category 2, Category 1</td>
</tr>
<tr>
<td>ATC</td>
<td>Changes an arc into a circle</td>
<td>Category 3</td>
</tr>
<tr>
<td>BA</td>
<td>Bend Allowance</td>
<td>Category 3</td>
</tr>
<tr>
<td>BB</td>
<td>BOM Ball</td>
<td>Category 3</td>
</tr>
<tr>
<td>BC</td>
<td>Add 'BC' to dimensions</td>
<td>Category 3</td>
</tr>
<tr>
<td>CENT</td>
<td>Change Entities</td>
<td>Category 3</td>
</tr>
<tr>
<td>CH</td>
<td>CHPROP</td>
<td>Category 3</td>
</tr>
<tr>
<td>CO</td>
<td>COPY</td>
<td>Category 3</td>
</tr>
<tr>
<td>COPLAY</td>
<td>Sets current layer to that of a selected entity</td>
<td>Category 3</td>
</tr>
<tr>
<td>CREATE_BOUNDARY</td>
<td>Creates a boundary (polyline) from objects made with CVFLAT-D or NTFLAT-D</td>
<td>Category 3</td>
</tr>
<tr>
<td>CS</td>
<td>Copies items on a selected layer</td>
<td>Category 3</td>
</tr>
<tr>
<td>CSM</td>
<td>Copies items on multiple selected layers</td>
<td>Category 3</td>
</tr>
<tr>
<td>CVEDGE</td>
<td>Draws edges for a Curve section. Uses Command line prompting.</td>
<td>Draw</td>
</tr>
<tr>
<td>CVEDGE-D</td>
<td>Using a dialog box, draws all edges of a Curve section and dimensions</td>
<td>Draw</td>
</tr>
<tr>
<td>CVFLAT</td>
<td>Draws the flat views (with holes) of plates used for covers, dividers, and bottoms of curved conveyor sections</td>
<td>Draw</td>
</tr>
<tr>
<td>CVFLAT-D</td>
<td>Similar to CVFLAT, but uses a dialog box and can draw multiple views with dimensions</td>
<td>Draw</td>
</tr>
<tr>
<td>CV_CLEANOUTFLAT (CVCO)</td>
<td>Develop flat bar for self-cleaning Tails.</td>
<td>Category 3</td>
</tr>
<tr>
<td>CWEIGHT</td>
<td>Weight calculator for carbon steel</td>
<td>Category 3, Category 1</td>
</tr>
<tr>
<td>DC</td>
<td>Dimension Circle - dimension alignment guide</td>
<td>Category 3</td>
</tr>
<tr>
<td>DD</td>
<td>DIMSTYLE</td>
<td>Category 3</td>
</tr>
<tr>
<td>DF</td>
<td>Double Fillet - Fillets the inside and outside of a corner</td>
<td>Category 3</td>
</tr>
<tr>
<td>DXW</td>
<td>NMC_DxfOut - shortcut for main command</td>
<td>Category 1</td>
</tr>
<tr>
<td>DYNOFF</td>
<td>Dynamic Offset</td>
<td>Category 1</td>
</tr>
<tr>
<td>EP</td>
<td>EXPLODE</td>
<td>Category 1</td>
</tr>
<tr>
<td>ES</td>
<td>Erases items on a selected layer</td>
<td>Category 1</td>
</tr>
<tr>
<td>F_LINE</td>
<td>Reliance Electric Firstline Bearing Templates</td>
<td>Category 1, Category 2</td>
</tr>
<tr>
<td>GA</td>
<td>Add 'GA' to dimensions</td>
<td>Category 1</td>
</tr>
<tr>
<td>H</td>
<td>Draws a standard hole side view</td>
<td>Draw</td>
</tr>
<tr>
<td>LD2MLD</td>
<td>Changes selected Leader and MText into a MultiLeader</td>
<td>Category 1</td>
</tr>
<tr>
<td>LF</td>
<td>Changes selected dimensions' length factor to 0.25</td>
<td>Category 1</td>
</tr>
<tr>
<td>MI</td>
<td>MIRROR</td>
<td>Category 1</td>
</tr>
<tr>
<td>MLL</td>
<td>Makes a custom layer selected from a list and sets it current</td>
<td>Category 1</td>
</tr>
<tr>
<td>MOS</td>
<td>Moves items on a selected layer</td>
<td>Category 1</td>
</tr>
<tr>
<td>NMC_LoadDwgs</td>
<td>Load (open) the list of drawings previously saved with NMC_SaveDwgs</td>
<td>Draw</td>
</tr>
<tr>
<td>NMC_Object_Property_Correction (NOPC)</td>
<td>Corrects select object properties to match NMS layer standards. </td>
<td>Category 1</td>
</tr>
<tr>
<td>NMC_SaveDwgs</td>
<td>Save the currently open drawings to a list</td>
<td>Category 2</td>
</tr>
<tr>
<td>OH</td>
<td>Offset objects to HIDDEN layer</td>
<td>Category 2</td>
</tr>
<tr>
<td>OO</td>
<td>Offset an object and then delete it</td>
<td>Category 2</td>
</tr>
<tr>
<td>ZW</td>
<td>ZOOM Window</td>
<td>Category 1</td>
</tr>
</tbody>
</table>
</div>
</section>
//This was coded using the DataTable jQuery library
$(document).ready( function () //加载文档 var oTable = $('#commandsTable').DataTable( //建表 “分页”：假， “排序”：错误， “信息”：错误， “搜索高亮”：是的， );
$('#categoryFilter').change(function () //check the status of the drop down menu and filter accordingly
var selectedValue = $(this).val();
oTable.column(2).search(selectedValue).draw();
)
$('input[type=search]').addClass('search-box'); //add class to DataTable search box
$('.search-box').after('<button class="close-icon" type="reset"></button>'); //add reset button to search box
$('.close-icon').hide(); //set close button to be hidden as default
//Check if the box is empty
$('.search-box').on("input", function()
var searchValue = $(this).val(); //store search box value as a variable
if(searchValue != "") //if search field is not empty, show the reset button
$('.close-icon').show();
else
$('.close-icon').hide();
;
);
$('.close-icon').click(function() //clicking the reset button clears the field
$('.close-icon').hide(); //hide reset button
oTable.columns().every(function() //set search field to "empty"
this.search('');
);
oTable.search('').draw(); //if search field is empty, redraw the table
);
);
如果您需要任何说明，请告诉我。如果代码的格式被关闭，我也很抱歉。
【问题讨论】：
【参考方案1】：您的选项值当前设置如下：
<option value="4">Draw</option>
这意味着您的代码使用值4 进行搜索。将选项更改为：
<option value="Draw">Draw</option>
以下行是从option 元素中提取value 属性的示例：
var searchValue = $(this).val();
注意val() - 这是检索值，而不是可见标签。
（请记住，当您选择Category 1 时，您只是在搜索1，依此类推。如果您将Alt. Category 1 作为可能的值，那也会干扰您的过滤器。您可以想清理其他选项值，使每个值与标签完全匹配。）
【讨论】：
用刘海把头撞在桌子上 呵呵。我早该知道。非常感谢！ 我很熟悉那种感觉。顺便说一句，如果你想使用标签，你可以使用text()而不是val()。
我不知道 text()。谢谢！以上是关于使用 DataTables 时，自定义下拉搜索不允许我添加新项目的主要内容，如果未能解决你的问题，请参考以下文章
使用 Angular 4 在 datatables.net 中实现自定义搜索