How to add strikethrough to dropdown select box on jquery datatable and filter out on the basis of it

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.

Did you check this? - https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element — HymnZzy, Dec 18 '20 at 10:33

Nikhil Patil · Accepted Answer · 2020-12-19T06:04:49.383

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.

Filtration doesnot seems to work, is it possible to make it filterable? — Aayush Dahal, Dec 19 '20 at 04:12
I like the idea of using data-search with `-neg_val-` and works perfectly fine. However, I am using bootstrap 4 and shows double caret there, even I tried by removing ``. Could you please help me making the option list cleaner. Here is the jsfiddle code for that one: https://jsfiddle.net/2echxj7u/ Here you can see there are, caret, caret all, 10, 20 and -10- but I just want All,10,20 and -10- — Aayush Dahal, Dec 19 '20 at 06:55
Don't append the `All` element when you append the entire dropdown, append it after initial append. Check here - https://jsfiddle.net/m5zf7sk9/ — Nikhil Patil, Dec 19 '20 at 07:57
Patel Could You help me on allowing multiselect on the dropdown above something like http://davidstutz.github.io/bootstrap-multiselect/ I am happy to create new question if I need to. — Aayush Dahal, Dec 21 '20 at 14:30

How to add strikethrough to dropdown select box on jquery datatable and filter out on the basis of it

1 Answers1