I am using datatables that cascades information from one column to another. Data is directly pulled from the table except for first column (name) as the requirement is to show the dropdown values in certain way and not ascending order. Datatables puts the values in ascending order.
Problem: Everything works fine except when I choose a value from ‘Name’ column such as Ashton, and then the related position, I am still given the option to choose another name, such as Test1 or Garrett. Changing the name causes the cascading to break down.
The behavior should be – When I choose a Name, simply keep that choice and prevent the user from selecting any other option in the Name column just like other drop-downs or disable other values only for Name column until user selects Reset button.
Is this possible? Here is the link to my code – https://live.datatables.net/yamifera/14/edit
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true,
columnDefs: [
{
target: 6,
visible: false,
searchable: true,
}
],
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
// 'colvis'
],
});
buildSelect(table);
table.on('draw', function() {
buildSelect(table);
});
$('#test').on('click', function() {
table.search('').columns().search('').draw();
});
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select><option value="">select me</option></select>')
.appendTo($('#dropdown' + counter).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
if ( column.index() === 0 ) {
['Garrett', 'Test1', 'Ashton'].forEach((d) => {
select.append('<option value="' + d + '">' + d + '</option>');
});
} else {
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
}
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// ** MY CHANGE **
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
}
});
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox">
<p>Name:
<span id="dropdown1">
</span>
</p>
<p>Postion: <span id="dropdown2">
</span>
</p>
<p>Office: <span id="dropdown3">
</span>
</p>
<button type="button" id="test">Clear Filters</button>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
<th> </th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Hidden Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Test1</td>
<td>test</td>
<td>test3</td>
<td>test4</td>
<td>2011/04/25</td>
<td>$3,120</td>
<td>Sys Architect</td>
</tr>
<tr>
<td>Garrett</td>
<td>Director: fgghghjhjhjhkjkj</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
<td>Director:</td>
</tr>
<tr>
<td>Ashton</td>
<td>Technical Authorjkjkjk fdfd h gjjjhjhk</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
<td>Tech author</td>
</tr>
</tr></tbody></table>
</div>Here is my code –
https://live.datatables.net/yamifera/14/edit