Question: How to do column search in DataTables when the column has more than one candidate value?

Question

How to do column search in DataTables when the column has more than one candidate value?

Answers 1
Added at 2017-11-08 15:11
Tags
Question

I am using Datatables to display table data in my JSP page. I have enabled search functionality in my datatable.

My row structure is in the fiddle

My first column consists of three elements

A bold tag with some data in it, A select element with some value selected, Another select element with some value selected

<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>

I want to enable search only on column 0 for the data inside the bold tag and only the values selected in the select tag(not on all the options in the select tag)

How do i make it happen. Currently the search is working on the data inside the bold tag as well as for all the available options inside the select tags.

Answers to

How to do column search in DataTables when the column has more than one candidate value?

nr: #1 dodano: 2017-11-09 06:11

You can

  • Use a custom filter to implement doctored search for your needs
  • Work on the DOM node instead of the text extract by using cell()
  • Use $= wildcard to find the selects, even if they are uniquely numbered
  • Compare the search term with a string aggregated from those elements you want to compare with

==

$.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
})

updated fiddle -> https://jsfiddle.net/1rde0nbm/3/

Source Show
◀ Wstecz