jQuery DataTables - 包含文本字段的列的自定義過濾器

Question

我正在使用jQuery DataTables插件。

我想爲包含文本字段的列創建自定義過濾器。

我想根據列中輸入字段的值屬性進行過濾。

我需要這樣做，所以我可以避免讓過濾器匹配html到搜索模式。

舉例來說，我不能搜索ID或形式沒有找到每一行（文字形式在ID被找到屬性的文本字段的）。

我發現很多問題和論壇，說mData是我的問題的答案。

無論我嘗試什麼，我都無法使它工作。

這是我如何定義我的專欄：

prefColumns: [ { bSortable: true, bSearchable: false, sSortDataType: 'dom-checkbox' }, 
       { bSortable: true, bSearchable: true }, 
       { bSortable: true, bSearchable: true, sSortDataType: 'dom-text' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false } 
       ] 

我給你上面的陣列到aoColumns屬性是這樣的：

// Find all the pref tables we want to turn into DataTables 

var $categoryTables = $('table[id$="cat-table"]'); 

// Create a jQuery dataTable for each pref category 

$categoryTables.dataTable({ 
    sScrollY: "350px", 
    bPaginate: false, 
    bAutoWidth: false, 
    sDom:  '<"prefsFilter"f>t', 
    aoColumns: prefColumns, 
    aaSorting: [[ 1, 'asc' ]] 
}); 

，一切工作正常。

下面是上面使用（以防萬一）我的自定義排序功能：

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) { 
    var aData = []; 
    $('td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
     aData.push(this.value); 
    }); 
    return aData; 
}; 

// Add a custom sort function for columns that might contain checkbox fields. 

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) { 
    var aData = []; 
    $('td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
     var $box = $(':checkbox', $(this)); 
     if ($box.length === 0) { 
      aData.push("1"); 
     } 
     else { 
      aData.push($box.is(':checked') ? "2" : "3"); 
     } 
    }); 
    return aData; 
}; 

// Add a custom sort function for columns with slider buttons 

$.fn.dataTableExt.afnSortData['slider'] = function (oSettings, iColumn) { 
    var aData = []; 
    var s = 'input:hidden[id$="State"]'; 
    $('td:eq('+iColumn+') ' + s, oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
     aData.push(this.value); 
    }); 
    return aData; 
}; 

---

的第三列在我的表是包含文本字段中的一個。

在試圖使用MDATA財產，我一直在修改我的列定義與這樣的東西：

prefColumns: [ { bSortable: true, bSearchable: false, sSortDataType: 'dom-checkbox' }, 
       { bSortable: true, bSearchable: true }, 

       // add a mData property to the third column 

       { bSortable: true, bSearchable: true, sSortDataType: 'dom-text', 
        mData: function (src, type, val) { return type === 'filter' ? $(src).attr('value') : src; } }, 

       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false } 
       ] 

我已經試過類似上面並沒有什麼似乎一堆東西像文檔和在線示例一樣工作。

沒有我發現在任何論壇或其他問題的工作。

如果有人能給我一些關於我誤解的線索，我會非常感激。

Answer 1

嘗試一下本作的文本列：

{ "bSortable": true , "bSearchable" : true, 
    "mData": function (source, type, val) { 
     if (type === 'set') { 
      source.disp = val 
      source.filter = $(val).attr('value'); 
      return; 
     } 
     else if (type === 'filter') { 
      return source.filter; 
     } 

     return source.disp; 
    } 

    } 

唯一的缺點是，如果你改變域，然後再次嘗試搜索 - 它不會考慮改變。所以，如果你會發現如何在運行中再次調用mData方法 - 一切都會按照它應該的方式工作。

Answer 2

您可以使用mRender屬性在aoColumns用於過濾

​​

如果您使用此方法指定選擇框的選擇值時，請注意你不應該上使用SortDataType =「DOM的選擇」該列