当列有多个候选值时，如何在 DataTables 中进行列搜索？

debugcn 发表于 Dev

车坦

我正在使用数据表在我的 JSP 页面中显示表数据。我在我的数据表中启用了搜索功能。

我的行结构在小提琴中

我的第一列由三个元素组成

一个带有一些数据的粗体标签，一个选择了一些值的选择元素，另一个选择了一些值的选择元素

<tr class="even" id="firstRow15" role="row">
  <td>
    <input class="allocationRange" id="employeeId" name="costAllocationVOs[15].empSeq" style="color: red;" type="hidden" value="228">
    <input class="allocationRange" id="employeeName" name="costAllocationVOs[15].employeeName" type="hidden" value="Sudarshan Goswami">
    <b>Donald Trump</b><br>
    <select class="selectDesignationDropDown" name="costAllocationVOs[15].empRole" required="'required'" style="background-color:#337ab7;border-radius:5px;border-color:#337ab7;color:white;font-weight:bold;width:50%;height:20px">
      <option data-rate="87.0" value="113">Software Engineer</option>
      <option data-rate="127.0" selected="selected" value="115">
        Software Consultant
      </option>
    </select> 
    <select name="costAllocationVOs[15].locationId" required="'required'" style="background-color:#FF7F27;border-radius:5px;border-color:#FF7F27;color:white;font-weight:bold">
      <option value="">Select</option>
      <option selected="selected" value="1">PUNE</option>
      <option value="2">UK</option>
      <option value="3">BLR</option>
    </select> 
    <i aria-hidden="true" class="fa fa-clone cloneclick" style="cursor:hand;color:#337ab7" title="clone the row"></i>
  </td><!-- January Column -->
  <td style="text-align: center; background-color: rgb(234, 245, 255);">
    <input class="allocationRange" data-dtmonth="1" data-dtyear="2017" id="janId" name="costAllocationVOs[15].janAllocPer" readonly size="250" step="any" style="color: rgb(38, 155, 42);" type="number" value="0.0"><br>
  </td><!-- February Column -->
  <td style="text-align: center; background-color: rgb(234, 245, 255);">
    <input class="allocationRange" data-dtmonth="2" data-dtyear="2017" id="febId" name="costAllocationVOs[15].febAllocPer" readonly size="250" step="any" style="color: rgb(38, 155, 42);" type="number" value="0.0"><br>
  </td>
</tr>

我只想在第 0 列上启用粗体标记内数据的搜索，并且只搜索在 select 标记中选择的值（不是在select 标记中的所有选项上）

我如何让它发生。目前，搜索正在处理粗体标签内的数据以及选择标签内的所有可用选项。

大卫康拉德

你可以

使用自定义过滤器根据您的需求实施篡改搜索
使用 DOM 节点而不是文本提取 cell()
使用$=通配符查找选择，即使它们是唯一编号的
将搜索词与从要比较的元素聚合的字符串进行比较

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
   var search = $('.dataTables_filter input').val().toLowerCase();
   var node = table.cell({ column: 0, row: dataIndex }).nodes().to$();

   var text = node.find('b').text();
   text += node.find('[name$=locationId] option:selected').text()
   text += node.find('[name$=empRole] option:selected').text();

   return text.toLowerCase().indexOf(search)>-1
})

更新小提琴 - > https://jsfiddle.net/1rde0nbm/3/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。