1

我正在使用 jQuery DataTables 插件。

我想为包含文本字段的列创建自定义过滤器。

我想根据列中输入字段的值属性进行过滤。

我需要这样做，这样我就可以避免让过滤器将 html 与搜索模式匹配。

例如，如果没有找到每一行，我就无法搜索id或form （文本表单在文本字段的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 } 
              ]

我已经尝试了一堆类似于上面的东西，但似乎没有像文档和在线示例那样工作。

我在任何论坛或其他问题中都没有发现任何问题。

如果有人能告诉我我的误解是什么，我将不胜感激。

4

2 回答 2

2

试试这个你的文本列：

{ "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 方法 - 一切都会正常运行。

于 2012-10-24T14:52:28.513 回答
0

可以使用aoColumns中的mRender属性来指定选择框的选中值进行过滤

"mRender": function ( data, type, full ) {
    if (type === "filter")
    {
          node = $.parseHTML(data);
          var val = $(node).find("select option:selected").text();                     
              return val;
    }
    return data;
}

如果您使用此方法，请注意您不应在该列上使用 SortDataType='dom-select'

于 2013-11-07T13:14:19.660 回答