Как опустить конкретный раздел из фильтра поиска в DataTables?

Question

Я хочу опустить ul>li из поискового фильтра в Datatable. Функция поиска работает нормально, когда я фильтрую без ul. Но я хочу ul раздел списка там, а также datatable не должен включать список в поиск. Как опустить этот ul>li в нужный поиск?

Я добавил здесь свой код.

HTML:

<table id="warranty_table"> 
    <thead> 
     <tr> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td data-id="1" id="STS1" > 
       <span data-toggle='dropdown' id='Covered_btn' aria-expanded='false'><span class='status'>Covered</span></span> 
       <ul class="dropdown-menu" role="menu" style="position: absolute; top:initial; left:initial; min-width: 110px;"> 
        <li><a href="javascript:;" id="1" class="status_change">Determine issue</a></li> 
        <li><a href="javascript:;" id="2" class="status_change">Covered</a></li>  
        <li><a href="javascript:;" id="3" class="status_change">Not covered</a></li> 
        <li><a href="javascript:;" id="4" class="status_change">Assign Vendor</a></li> 
        <li><a href="javascript:;" id="5" class="status_change">Followup with HO</a></li> 
        <li><a href="javascript:;" id="6" class="status_change">Followup with Vendor</a></li>  
        <li><a href="javascript:;" id="7" class="status_change">Diagnose issue</a></li> 
        <li><a href="javascript:;" id="8" class="status_change">Give Vendor Authorization</a></li> 
        <li><a href="javascript:;" id="9" class="status_change">Close claim</a></li> 
       </ul> 
      </td>    
     </tr> 
     <tr> 
      <td data-id="2" id="STS2" > 
       <span data-toggle='dropdown' id='Covered_btn' aria-expanded='false'><span class='status'>Assign Vendor</span></span> 
       <ul class="dropdown-menu" role="menu" style="position: absolute; top:initial; left:initial; min-width: 110px;"> 
        <li><a href="javascript:;" id="1" class="status_change">Determine issue</a></li> 
        <li><a href="javascript:;" id="2" class="status_change">Covered</a></li>  
        <li><a href="javascript:;" id="3" class="status_change">Not covered</a></li> 
        <li><a href="javascript:;" id="4" class="status_change">Assign Vendor</a></li> 
        <li><a href="javascript:;" id="5" class="status_change">Followup with HO</a></li> 
        <li><a href="javascript:;" id="6" class="status_change">Followup with Vendor</a></li>  
        <li><a href="javascript:;" id="7" class="status_change">Diagnose issue</a></li> 
        <li><a href="javascript:;" id="8" class="status_change">Give Vendor Authorization</a></li> 
        <li><a href="javascript:;" id="9" class="status_change">Close claim</a></li> 
       </ul> 
      </td> 
     </tr> 
     <tr> 
      <td data-id="36" id="STS36" > 
       <span data-toggle='dropdown' id='Determine _btn' aria-expanded='false' class='btn btn-warning btn-xs dropdown-toggle status_changespan '><span class='status'>Determine issue</span><span class='caret fiveML'></span></span> 
       <ul class="dropdown-menu" role="menu" style="position: absolute; top:initial; left:initial; min-width: 110px;"> 
        <li><a href="javascript:;" id="1" class="status_change">Determine issue</a></li> 
        <li><a href="javascript:;" id="2" class="status_change">Covered</a></li>  
        <li><a href="javascript:;" id="3" class="status_change">Not covered</a></li> 
        <li><a href="javascript:;" id="4" class="status_change">Assign Vendor</a></li> 
        <li><a href="javascript:;" id="5" class="status_change">Followup with HO</a></li> 
        <li><a href="javascript:;" id="6" class="status_change">Followup with Vendor</a></li>  
        <li><a href="javascript:;" id="7" class="status_change">Diagnose issue</a></li> 
        <li><a href="javascript:;" id="8" class="status_change">Give Vendor Authorization</a></li> 
        <li><a href="javascript:;" id="9" class="status_change">Close claim</a></li> 
       </ul> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Javascript:

$(document).ready(function() { 
$('#warranty_table').DataTable(); 
}); 

Answer 1

Вы можете создать свою собственную пользовательскую функцию поиска:

$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) { 
     var match = false; 
     var input = $('#search').val().toLowerCase(); 
     var noOfRows = data.length; 
     var rowData = ''; 

     rowData = table.row(dataIndex).data(); 

     var startIndex = rowData.toString().indexOf('<ul'); 
     var endIndex = rowData.toString().indexOf('</ul>') + 5; 
     var strUl = rowData.toString().slice(startIndex, endIndex); 

     rowData = rowData.toString().replace(strUl, ''); 
     rowData = $(rowData).text(); // remove HTML tags 

     if (input.length == 0) { 
      return true; 
     } else if (rowData.toString().toLowerCase().indexOf(input) >= 0) { 
      return true; 
     } 
     return false; 
    }); 

Эта функция будет получить исходные данные для каждой строки таблицы, вычеркните ul, а затем выполните сравнение, основанное на обновленной строке.

Я добавил новое поле ввода поиска, которое можно использовать для переопределения поиска по умолчанию.

Просмотреть мою демонстрацию here. Надеюсь, поможет.