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

jquery dataTable过滤器，单个char无效

1 个答案: