CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
Chetan
Chetan

Reputation: 5085

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

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.

Upvotes: 1

Views: 121

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

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/

Upvotes: 1

Related Questions