自定义下拉搜索不允许我在使用DataTables时添加新项目
自定义下拉搜索不允许我在使用DataTables时添加新项目
提问于 2021-07-22 02:50:13
我使用DataTables创建了一个HTML页面，其中包含一个静态HTML表、一个类别下拉搜索框和一个文本字段搜索框。除了我尝试在原来的3个类别(类别1、类别2、类别3)之外添加新类别时，一切都很正常。其中的每一个都会正确地搜索和过滤表。但是，如果我添加了一个新类别(绘图)，即使我用新类别标记了几行数据，它也会告诉我“找不到条目”。如果我将一个旧的类别选项值(例如category 3 )更改为"Draw"，它将过滤表格并显示所有带有标记为Category 3的td项的行。为什么表格不接受新的下拉选项和/或在表格中找不到新的选项？
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>Javascript：
//This was coded using the DataTable jQuery library$( document ).ready( oTable () {//加载文档var oTable= $('#commandsTable').DataTable( {//建表“分页”：false，“排序”：false，"info"：false，"searchHighlight"：true，})；
$('#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
Stack Overflow用户
回答已采纳
发布于 2021-07-22 03:09:17
您的选项值当前设置如下：
<option value="4">Draw</option>这意味着您的代码正在使用值4进行搜索。将该选项更改为：
<option value="Draw">Draw</option>下面这行是从option元素中提取value属性的示例：
var searchValue = $(this).val();请注意，val() -它检索的是值，而不是可见的标签。
(还请记住，当您选择Category 1时，您只搜索1，依此类推。如果您将Alt. Category 1作为可能的值，也会干扰您的过滤器。您可能希望清理其他选项值，以便每个值都与标签完全匹配。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68475014
复制相关文章
相似问题
腾讯云开发者
