如何在jquery数据表上的下拉选择框中添加删除线并根据它过滤掉
我有如下 jquery 数据表，还有一个删除线文本，我想让它可过滤，但到目前为止，它甚至没有在下拉列表中显示删除线。我的jquery数据表如下：
$(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>
在这里您可以看到floor1带有删除线文本的列，但它没有显示在下拉值上。
我什至尝试添加内联类：
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>' );
}
但是，这似乎不起作用。如何在选择框上添加删除线文本，并使其可过滤。
梦里花落09211回答
-
暮色呼如
我不确定你是否可以用 来做到这一点select option。也许可以使用jQueryandbootstrap来代替使用uland 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>
随时随地看视频慕课网APP
相关分类
JavaScript