我正在使用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 }
]
我尝试过类似上面的一些东西,似乎没有像文档和在线示例那样工作。
我在任何论坛或其他问题中找不到的任何内容都有效。
如果有人能给我一些关于我误解的信息,我会非常感激。
答案 0 :(得分: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方法 - 一切都将按预期工作。
答案 1 :(得分: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'