單個字符不工作的jQuery數據表過濾器

Question

其中一個列值是每個行的單個字符，我需要使用複選框應用過濾器，文件管理器不工作，但它工作正常，如果列值超過1個字符。

Answer 1

// define the DaataTable dataTableObj, the table id is 'my_DataTable_Id' for example 

"aoColumns": 
[ 
    {title:'<th style="font-size: 100%; width: 4%;min-width: 40px;" ><font>Name</font></th>'}, 
    {title:'<th style="font-size: 100%; width: 7%;min-width: 70px;"><font>Area</font></th>',"sType": 'numeric'}, 
    {title:'<th style="font-size: 100%; width: 5%;min-width: 30px"><font>Dept</font></th>',"sType": 'numeric'}, // This is single value column 
    {title:'<th style="font-size: 100%; width: 5%;min-width: 30px"><font>Note</font></th>'} 
] 

var cExtraChar = "X"; 
var columnArray = []; 
// Start loop - to get an json dataObject from list of object 
columnArray[0] = '<td style="height:40px; width:10%;"> <input type="text" id="NAME_'+index+'" style="border:0;" value='+data[index].Name+'></input> </td>'; 
columnArray[1] = '<td style="height:40px; width:10%;"> <input type="text" id="AREA_'+index+'" style="border:0;" value='+data[index].Area+'></input> </td>'; 
// This is single char value column like Dept either one of 'A', 'B', 'C', 'D' 
// it has Single char value, it not support in dataTable filtering, so add hiden span to add comman extra char for each row. 
columnArray[2] = '<td style="height:40px; width:10%;"> <input type="text" id="DEPT_'+index+'" style="border:0;" value='+data[index].Dept+'></input> </td>' + 
       '<span style="visibility: hidden; display: none;">' + cExtraChar+data[index].Dept + '</span> </td>'; 
columnArray[3] = '<td style="height:40px; width:10%;"> <input type="text" id="NOTE_'+index+'" style="border:0;" value='+data[index].Note+'></input> </td>'; 

dataTableObj.fnAddData(columnArray,false); 

// End loop 

var aAreaFilters = data.AreaList; // It can dynamic values from response 
var aDeptFilters = ['A', 'B', 'C', 'D']; // It also dynamic values from response 
dataTableObj.columnFilter(
    { 
     sPlaceHolder: "head:before", 
     aoColumns: 
     [ null, 
      {type:"checkbox", values: aAreaFilters},     
      {type:"checkbox", values: aDeptFilters}, 
      null 
     ] 
    } 
); 

dataTableObj.fnDraw(); 

// Finally change the filter check box value (not lable value) for the column Dept. 
for(var i = 0; i < aDeptFilters.length; i++) { 
    var targetID = "my_DataTable_Id_cb_" + aDeptFilters[i]; 
    var targetVal = cExtraChar + aDeptFilters[i]; 
    $("#"+targetID).val(targetVal); 
}