使用jQuery数据表在表中搜索选择框

Search with select box in a table with jQuery DataTables

本文关键字：搜索 选择 jQuery 数据表 使用      更新时间：2023-09-26

我有一个列表:

<select name="time">
   <option value="">Select time</option>
   <option value="AM">AM</option>
   <option value="PM">PM</option>
</select>
<table id="delivery">
   <thead>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Time</th>
     </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>A</td>
        <td>AM</td>
      </tr>
      <tr>
         <td>2</td>
         <td>B</td>
         <td>PM</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C</td>
         <td>AM</td>
      </tr>
   </tbody>
</table>

和我的脚本:

$.fn.dataTableExt.afnFiltering.push(
   function( oSettings, aData, iDataIndex ) {
      //filter on current position which is column 3            
      colFilterID = 3;
      //get our filter element
      filterElement = aData[colFilterID] * 1;
      //get our filter time from the SELECT drop down in header of column
      filterTime = $("select[name='time']").val();
      if(filterTime == '') {
         return true;
      }
      if(filterTime == filterElement ) {
         return true;
      }
});
$("select[name='time']").on('change', function() {
   oTable.fnDraw();
});
var table = $('#delivery');
var oTable = table.dataTable();

我无法通过AM和PM值的第三列过滤记录。

你的代码有几个问题:

  • 列索引为从零开始，因此第三列索引为2
  • 您正在尝试将字符串转换为aData[colFilterID] * 1的数字，这将字符串转换为NaN
  • 你的代码并不总是返回一个值，如果字符串不匹配，你需要返回false。
<

解决方案/strong> 

$.fn.dataTableExt.afnFiltering.push(
   function( oSettings, aData, iDataIndex ) {
      //filter on current position which is column 3 (zero-based index is 2)
      colFilterID = 2;
      //get our filter element
      filterElement = aData[colFilterID];
      //get our filter time from the SELECT drop down in header of column
      filterTime = $("select[name='time']").val();
      if(filterTime == '') {
         return true;
      }
      if(filterTime == filterElement) {
         return true;
      } else {
         return false;    
      }
});

相关文章：