第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在jquery數(shù)據(jù)表上的下拉選擇框中添加刪除線并根據(jù)它過濾掉

如何在jquery數(shù)據(jù)表上的下拉選擇框中添加刪除線并根據(jù)它過濾掉

夢里花落0921 2023-12-14 14:19:25
我有如下 jquery 數(shù)據(jù)表,還有一個刪除線文本,我想讓它可過濾,但到目前為止,它甚至沒有在下拉列表中顯示刪除線。我的jquery數(shù)據(jù)表如下:$(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帶有刪除線文本的列,但它沒有顯示在下拉值上。我什至嘗試添加內(nèi)聯(lián)類: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>' );}但是,這似乎不起作用。如何在選擇框上添加刪除線文本,并使其可過濾。
查看完整描述

1 回答

?
暮色呼如

TA貢獻(xiàn)1853條經(jīng)驗 獲得超9個贊

我不確定你是否可以用 來做到這一點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>


查看完整回答
反對 回復(fù) 2023-12-14
  • 1 回答
  • 0 關(guān)注
  • 184 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號