搜索與選擇框在一個表中使用jQuery數據表

Question

我有一個列表表：

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

Answer 1

原因

有你的代碼夫婦的問題：

• 列索引都是從零開始，因此第三列的索引是2
• 你試圖將字符串轉換爲數字aData[colFilterID] * 1這將字符串轉換爲NaN
• 您的代碼並不總是返回值，如果字符串不匹配，則需要返回false。

SOLUTION

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

DEMO

見this jsFiddle代碼和演示。