如何在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() {

  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>