如何在 jquery 数据表上的下拉 select 框中添加删除线并在此基础上过滤掉

Question

I have jquery Datatable as follows, and there is also a strikethrough text and I want to make it filterable, but upto now its not even being showing with strikethrough on the dropdown. My jquery datatable is as follows:

 $(document).ready(function() { var table = $("#example").DataTable({ "order": [ 1, "asc" ], // "lengthMenu": [[ 100, 200, 500,-1], [ 100, 200, 500,'All']], "pageLength": -1, "lengthChange": false, "bFilter": "false", "searchable": false, orderCellsTop: true, "bPaginate": false, "bInfo": false }); $('.filterRow th').each( function (i) { var title = $(this).text(); var select = $('<select><option value="">All</option></select>').appendTo( $(this).empty() ).on( 'change', function () { var term = $(this).val(); table.column( i ).search(term, false, false ).draw(); } ); let includedArr = []; let colData = table.column( i ).data().unique().sort().each( function ( d, j ) { if(d.= ""){ select;append( '<option value="'+d+'">'+d+'</option>' ); } }); } ); } );

 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> <table id="example" class="display" style="width:100%"> <tbody> <tr> <td>N</td> <td>101</td> <td>1</td> <td>01</td> <td>10</td> <td>20</td> </tr> <tr> <td>N</td> <td>102</td> <td>1</td> <td>02</td> <td>(20)</td> <td>20</td> </tr> <tr> <td>N</td> <td>103</td> <td>1</td> <td>03</td> <td> <del>10</del> </td> <td>20</td> </tr> </tbody> <thead> <tr> <th rowspan="2">Bldg</th> <th rowspan="2">Unit</th> <th rowspan="2">Floor</th> <th rowspan="2">Stack</th> <th colspan="2"> Floor Level </th> </tr> <tr> <th>Floor 1</th> <th>Floor 2</th> </tr> <tr class="filterRow"> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

Here you can see on floor1 column with strikethrough text, but it is not showing on the dropdown value.

I have even tried to adding inline classes as:

if (d.indexOf("del") >= 0){
    select.append( '<option style="text-decoration: line-through;" value="'+d+'">'+d+'</option>' );
}else{
    select.append( '<option value="'+d+'">'+d+'</option>' );
}

But, this to does not seems to working. How could I add strikethrough text on select box, and make it filterable.

Answer 1

I am not sure if you can do that with select option . Maybe do it using jQuery and bootstrap instead by using ul and li -

 $(document).ready(function() { var table = $("#example").DataTable({ "order": [1, "asc"], // "lengthMenu": [[ 100, 200, 500,-1], [ 100, 200, 500,'All']], "pageLength": -1, "lengthChange": false, "bFilter": "false", "searchable": false, orderCellsTop: true, "bPaginate": false, "bInfo": false }); $('.filterRow th').each(function(i) { var title = $(this).text(); var select = $('<div class="dropdown" id="select' + i + '"><a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="selectedvalue">All</span><span class="caret"></span><ul class="dropdown-menu"><li data-value=""><a href="#">All</a></li></ul></div>').appendTo($(this).empty()); let includedArr = []; let colData = table.column(i).data().unique().sort().each(function(d, j) { if (d.= "") { var cell = table.column(i).nodes().toArray().find(f => f.innerHTML;trim() == d). var searchValue = $(cell);attr("data-search"). select.find('ul');append('<li data-value="' + searchValue + '"><a href="#">' + d + '</a></li>'); } }). select.find('.dropdown-menu a').click(function(e) { var term = $(this).closest("li");attr("data-value"). var text = $(this);html(). $(this).closest(".dropdown").find(".selectedvalue");html(text). if (term == "") { table.column(i).search('');draw(); return. } table.column(i),search("^" + escapeRegExp(term) + "$", true, false. true);draw(); }); }). function escapeRegExp(string) { return string.replace(/[?*+,^${}()|[\]\\]/g; '\\$&'); } });

 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <table id="example" class="display" style="width:100%"> <tbody> <tr> <td data-search="N">N</td> <td data-search="101">101</td> <td data-search="1">1</td> <td data-search="01">01</td> <td data-search="10">10</td> <td data-search="20">20</td> </tr> <tr> <td data-search="N">N</td> <td data-search="102">102</td> <td data-search="1">1</td> <td data-search="02">02</td> <td data-search="(20)">(20)</td> <td data-search="20">20</td> </tr> <tr> <td data-search="N">N</td> <td data-search="103">103</td> <td data-search="1">1</td> <td data-search="03">03</td> <td data-search="-10-"> <del>10</del> </td> <td data-search="20">20</td> </tr> </tbody> <thead> <tr> <th rowspan="2">Bldg</th> <th rowspan="2">Unit</th> <th rowspan="2">Floor</th> <th rowspan="2">Stack</th> <th colspan="2"> Floor Level </th> </tr> <tr> <th>Floor 1</th> <th>Floor 2</th> </tr> <tr class="filterRow"> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

Note: I have not styled the dropdowns.