如何在jquery数据表上的下拉选择框中添加删除线并根据它过滤掉

Question

我有如下 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>' );

}

但是，这似乎不起作用。如何在选择框上添加删除线文本，并使其可过滤。

Answer 1

我不确定你是否可以用 来做到这一点select option。也许可以使用jQueryandbootstrap来代替使用uland li-$(document).ready(function() {&nbsp; var table = $("#example").DataTable({&nbsp; &nbsp; "order": [1, "asc"],&nbsp; &nbsp; // "lengthMenu": [[ 100, 200, 500,-1], [ 100, 200, 500,'All']],&nbsp; &nbsp; "pageLength": -1,&nbsp; &nbsp; "lengthChange": false,&nbsp; &nbsp; "bFilter": "false",&nbsp; &nbsp; "searchable": false,&nbsp; &nbsp; orderCellsTop: true,&nbsp; &nbsp; "bPaginate": false,&nbsp; &nbsp; "bInfo": false&nbsp; });&nbsp; $('.filterRow th').each(function(i) {&nbsp; &nbsp; var title = $(this).text();&nbsp; &nbsp; 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>')&nbsp; &nbsp; &nbsp; .appendTo($(this).empty());&nbsp; &nbsp; let includedArr = [];&nbsp; &nbsp; let colData = table.column(i).data().unique().sort().each(function(d, j) {&nbsp; &nbsp; &nbsp; if (d != "") {&nbsp; &nbsp; &nbsp; &nbsp; var cell = table.column(i).nodes().toArray().find(f => f.innerHTML.trim() == d);&nbsp; &nbsp; &nbsp; &nbsp; var searchValue = $(cell).attr("data-search");&nbsp; &nbsp; &nbsp; &nbsp; select.find('ul').append('<li data-value="' + searchValue + '"><a href="#">' + d + '</a></li>');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; select.find('.dropdown-menu a').click(function(e) {&nbsp; &nbsp; &nbsp; var term = $(this).closest("li").attr("data-value");&nbsp; &nbsp; &nbsp; var text = $(this).html();&nbsp; &nbsp; &nbsp; $(this).closest(".dropdown").find(".selectedvalue").html(text);&nbsp; &nbsp; &nbsp; if (term == "") {&nbsp; &nbsp; &nbsp; &nbsp; table.column(i).search('').draw();&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; table.column(i).search("^" + escapeRegExp(term) + "$", true, false, true).draw();&nbsp; &nbsp; });&nbsp; });&nbsp; function escapeRegExp(string) {&nbsp; &nbsp; return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');&nbsp; }});<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%">&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td data-search="N">N</td>&nbsp; &nbsp; &nbsp; <td data-search="101">101</td>&nbsp; &nbsp; &nbsp; <td data-search="1">1</td>&nbsp; &nbsp; &nbsp; <td data-search="01">01</td>&nbsp; &nbsp; &nbsp; <td data-search="10">10</td>&nbsp; &nbsp; &nbsp; <td data-search="20">20</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td data-search="N">N</td>&nbsp; &nbsp; &nbsp; <td data-search="102">102</td>&nbsp; &nbsp; &nbsp; <td data-search="1">1</td>&nbsp; &nbsp; &nbsp; <td data-search="02">02</td>&nbsp; &nbsp; &nbsp; <td data-search="(20)">(20)</td>&nbsp; &nbsp; &nbsp; <td data-search="20">20</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td data-search="N">N</td>&nbsp; &nbsp; &nbsp; <td data-search="103">103</td>&nbsp; &nbsp; &nbsp; <td data-search="1">1</td>&nbsp; &nbsp; &nbsp; <td data-search="03">03</td>&nbsp; &nbsp; &nbsp; <td data-search="-10-">&nbsp; &nbsp; &nbsp; &nbsp; <del>10</del>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td data-search="20">20</td>&nbsp; &nbsp; </tr>&nbsp; </tbody>&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th rowspan="2">Bldg</th>&nbsp; &nbsp; &nbsp; <th rowspan="2">Unit</th>&nbsp; &nbsp; &nbsp; <th rowspan="2">Floor</th>&nbsp; &nbsp; &nbsp; <th rowspan="2">Stack</th>&nbsp; &nbsp; &nbsp; <th colspan="2">&nbsp; &nbsp; &nbsp; &nbsp; Floor Level&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Floor 1</th>&nbsp; &nbsp; &nbsp; <th>Floor 2</th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="filterRow">&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; </tr>&nbsp; </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>