在下拉列表中搜索会搜索所有下拉选项而不是选定的选项

时间：2015-08-17 10:42:56

标签： jquery search datatables

我们使用链接中给出的代码实现了jQuery DataTables及其列级搜索功能

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

我们使用jquery datatable的mrender实现了列的下拉列表。

我们无法使用列搜索在具有下拉列的列中搜索确切数据。我观察到搜索功能在下拉列的所有选项值中搜索而不是“选定”值。

我们可以避免搜索下拉菜单的所有选项吗？

另一个观察是它在其他相关DOM元素中搜索，而不是在应用搜索功能的列数据上搜索。

样本 

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

1 个答案:

答案 0 :(得分：0)

  

<强>解

您可以使用columnDefs在targets选项和render中使用从零开始的索引来定位特定列，以便在搜索（type === 'filter'）或排序期间返回所选值（ type === 'order'）。

var table = $('#example').DataTable({
   columnDefs: [
      { 
         targets: 7, 
         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;
         }
      }
   ]
});

如果数据发生变化，您还需要使单元数据无效，如下所示（根据this solution）。

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

<强>样本

＆＃13;
＆＃13; 
$(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,
           columnDefs: [
              {
                 targets: 7,
                 render: function(data, type, full, meta){                   
                    if(type === 'filter' || type === 'sort'){
                       var api = new $.fn.dataTable.Api(meta.settings);
                       var cell = api.cell({row: meta.row, column: meta.col}).node();
                       data = $('select, input', cell).val();
                    }
                   
                    return data;
                 }
              }               
           ]
       });
     
       $('tbody select, tbody input', table.table().node()).on('change', function(){
          table.row($(this).closest('tr')).invalidate();
       });       
     
       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();
               });
   });
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题