I have created an HTML page with a static HTML table using DataTables, a category dropdown search box, and a text field search box. Everything works fine except when I try to add new categories besides the original 3 (Category 1, Category 2, Category 3). Each of these searches and filters the table correctly. However, if I add a new category (Draw), it tells me "no entries found" even though I tagged several rows of data with the new category. If I change one of the old category option values (Category 3 for example) to "Draw", it will filter the table and show all rows with td items tagged with Category 3. Why isn't the table accepting the new dropdown options and/or not finding the new options in the table?
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( function () { //load the document var oTable = $('#commandsTable').DataTable( { //build the table "paging": false, "ordering": 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
});
} );
Please let me know if you need any clarification. I also apologize if the formatting of the code is off.
