Question

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

我的行结构位于fiddle

我的第一栏包含三个要素

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

<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标记中的所有选项）

我如何实现这一目标。目前，搜索正在处理粗体标记内的数据以及select标记内的所有可用选项。

Answer 1

你可以

使用custom filter实施针对您的需求的doctored搜索
使用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
})

更新小提琴 - ＆gt;的 https://jsfiddle.net/1rde0nbm/3/

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

1 个答案: