I am using datatables for my project and it works great. However I am not able to firgure out how to customize the filter dropdown values. Reason - some of the values are too long for example "Financial Controller abcdef tedfdffgg". I would like it to say just "Financial Controller" instead. Please see my code below. Thanks
Here is what I have. Link to the code - https://live.datatables.net/xocipofo/1/edit
<!DOCTYPE html>
<html>
<head>
<script src="https://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>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>
</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>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<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>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer more information</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 abcdef tedfdffgg</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></tbody></table>
</div>
$(document).ready(function() {
const person = [{name:'Ashton Cox',position:'Technical Author',office:'San Francisco'},{name:'Brielle Williamson',position:'Integration Specialist',office:'New York'},{name:'Cedric Kelly',position:'Javascript Developer',office:'Edinburgh'}];
var table = $('#example').DataTable({
responsive: true,
searching: true
});
$('#dropdown1').on('change', function () {
table.columns(0).search( this.value ).draw();
let myname = this.value;
let myoffice, myposition;
$.each(person,function(key, val) {
if(val.name == myname) {
myoffice = val.office;
myposition = val.position;
}
});
$('#dropdown2 option').each(function() {
if($(this).text() !== myposition) {
$(this).attr('disabled','');
}
});
$('#dropdown3 option').each(function() {
if($(this).text() !== myoffice) {
$(this).attr('disabled','');
}
});
});
$('#dropdown2').on('change', function () {
table.columns(1).search( this.value ).draw();
let myposition = this.value;
let myoffice, myname;
$.each(person,function(key, val) {
if(val.position == myposition) {
myname = val.name;
myoffice = val.office;
}
});
$('#dropdown1 option').each(function() {
if($(this).text() !== myname) {
$(this).attr('disabled','');
}
});
$('#dropdown3 option').each(function() {
if($(this).text() !== myoffice) {
$(this).attr('disabled','');
}
});
} );
$('#dropdown3').on('change', function () {
table.columns(2).search( this.value ).draw();
let myoffice = this.value;
let myposition, myname;
$.each(person,function(key, val) {
if(val.office == myoffice) {
myname = val.name;
myposition = val.position;
}
});
$('#dropdown1 option').each(function() {
if($(this).text() !== myname) {
$(this).attr('disabled','');
}
});
$('#dropdown2 option').each(function() {
if($(this).text() !== myposition) {
$(this).attr('disabled','');
}
});
} );
});
This line of code
select.append( '<option value="'+d+'">'+d+'</option>' );
is where it makes the drop down list.
The first d is where it sets what is searched for the second is here it changes the display -- so if you change it to
select.append( '<option value="'+d+'">new: '+d+'</option>' );
every option will have a new before it.
similarly if you change it to
select.append( '<option value="'+d+'">'+d.substring(0,10)+'</option>' );
You will only get the first 10 characters in the display