CODEWITHSUNDEEP
jquerysearchdatatables
Sameer Shinde
Sameer Shinde

Reputation: 37

Search within dropdowns searches all the dropdown options instead of selected option

We have implemented a jQuery DataTables and its column level search features using the code as given in link

https://datatables.net/examples/api/multi_filter.html

We have implemented dropdown on column using mrender of jquery datatable.

We are unable to search exact data in columns having drop-downs using column search. I observed that the search function searches within all option values of the drop down column instead of the "selected" value.

Can we avoid searching in all the options of the drop-down?

The other observation is that it searches within other related DOM elements also instead of the column data on which search function is applied.

DEMO

$(document).ready(
   function() {

       $('#example tfoot th').each(
               function() {
                   var title = $('#example thead th').eq(
                           $(this).index()).text();
                   $(this).html(
                           '<input type="text" placeholder="Search '
                                   + title
                                   + '" style="width: 85%;"/> '
                                   + $("#selectOpt").html());
               });

       var table = $('#example').DataTable({
           dom : 'RC<"clear">lfrtip',
           stateSave : true
       });
       window.mtable = table;
       $("#example tfoot input").on(
               'keyup change',
               function() {
                   var selOps = $(this.parentElement).find(
                           'select');
                   var regex = true;
                   var smart = false;
                   var val = this.value;
                   switch (selOps.val()) {
                   case "beginWith":
                       val = "^" + val;
                       break;
                   case "contains":
                       regex = false;
                       smart = true;
                       break;
                   case "doesNotContain":
                       val = "^((?!" + val + ").)*$";
                       break;
                   case "endsWith":
                       val = val + "$";
                       break;
                   case "equals":
                       val = "^" + val + "$";
                       break;
                   case "doesNotEqual":
                       val = "^(?!" + val + ")";
                       break;
                   }
                   var t1 = table.column($(this).parent().index()
                           + ':visible');
                   var t2 = t1.search(val, regex, smart);
                   t2.draw();
               });
   });
<!doctype html>
<html>
<head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
  
   <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/colreorder/1.1.3/css/dataTables.colReorder.min.css">
   <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.min.css">
   <script type="text/javascript" language="javascript" src="//cdn.datatables.net/colreorder/1.1.3/js/dataTables.colReorder.min.js"></script>
   <script type="text/javascript" language="javascript" src="//cdn.datatables.net/colvis/1.1.2/js/dataTables.colVis.min.js"></script>
</head>
<body>
   <div id="selectOpt">
      <select style="width: 19px;">
         <option value="beginWith">Begin's With</option>
         <option value="contains" selected>Contains</option>
         <option value="doesNotContain">Doesn't Contains</option>
         <option value="endsWith">Ends With</option>
         <option value="equals">Equals</option>
         <option value="doesNotEqual">Doesn't Equals</option>
      </select>
   </div>
   <a name="Example"></a>
   <h2 data-anchor="Example">Example</h2>
   <input type="button" class="btn btn-primary" value="Search" id="searchIBtn"/>
   <p>
   <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
         <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Vehicle</th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Vehicle</th>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td><input type="checkbox" class="chkBox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>
               <select>
                  <option selected value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
               </select>
            </td>
         </tr>
         <tr>
            <td><input type="checkbox" class="chkBox"></td>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
            <td>
               <select>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option selected value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
               </select>
            </td>
         </tr>
      </tbody>
   </table>
   </p>
</body>

Upvotes: 2

Views: 4584

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58890

SOLUTION

You can use columnDefs to target a specific column using zero-based index in targets option and render to return selected value during searching (type === 'filter') or sorting (type === 'order').

var table = $('#example').DataTable({
   columnDefs: [
      { 
         targets: 7, 
         type: 'string',
         render: function(data, type, full, meta){
            if(type === 'filter' || type === 'sort'){
               var api = new $.fn.dataTable.Api(meta.settings);
               var td = api.cell({row: meta.row, column: meta.col}).node();
               data = $('select, input', td).val();
            }

            return data;
         }
      }
   ]
});

Also you need to invalidate cell data once data changes as shown below (according to this solution).

$('tbody select, tbody input', table.table().node()).on('change', function(){
     table.row($(this).closest('tr')).invalidate();
});

DEMO

See this example for code and demonstration.

LINKS

See jQuery DataTables: How to search and order by INPUT or SELECT elements for more details.

Upvotes: 2

Related Questions