jQuery DataTables - 包含文本字段的列的自定义过滤器 [英] jQuery DataTables - custom filter for column that contains text field
问题描述
我正在使用jQuery DataTables插件。
我想为包含文本字段的列创建自定义过滤器。
我想根据列中输入字段的值属性进行过滤。
我需要要做到这一点，所以我可以避免将过滤器与搜索模式匹配。
例如，我无法搜索 id 或表单，而不查找文本字段的 id属性中的每一行（文本表单）。
我发现很多问题和论坛说，mData 是我问题的答案。
无论如何
这是我如何定义我的列：
prefColumns：[{bSortable：true，bSearchable：false，sSortDataType：'dom-checkbox'}，
{bSortable：true，bSearchable：true}，
{ bSortable：真，bSea rchable：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属性，如下所示：
//查找我们要转换为DataTables的所有pref表
var $ categoryTables = $（'table [id $ = cat-table]'）;
//为每个pref类别创建一个jQuery dataTable
$ categoryTables.dataTable（{
sScrollY：350px，
bPaginate：false，
bAutoWidth：false，
sDom：'<prefsFilterf> 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）;
}）;
返回aData;
};
//为可能包含复选框字段的列添加自定义排序函数。
$ .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）;
}
}）;
返回aData;
};
//为带有滑块按钮的列添加自定义排序函数
$ .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）;
}）;
返回aData;
};
第三列在我的表格中是包含文本字段的表。
为了使用 mData 属性，我一直在修改我的列定义与这样的东西：
prefColumns：[{bSortable：true，bSearchable：false，sSortDataType：'dom-checkbox'} ，
{bSortable：true，bSearchable：true}，
//将mData属性添加到第三列
{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： sSortDataType：'slider'}，
{bSortable：true，bSearchable：false，sSortDataType：'slider'}，
{bSortable：true，bSearchable：false}
]
我已经尝试了一堆类似于上述的东西，似乎没有像文档和在线示例那样工作。 / p>
在任何论坛或其他问题中找不到任何内容。
如果有人能给我一个线索关于我的误会，我真的很欣赏
尝试这个为您的文本列：
{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方法 - 一切都会正常工作。
I am using the jQuery DataTables plugin.
I'd like to create a custom filter for a column that contains a text field.
I want to filter based on the value attribute of the input field in the column.
I need to do this so I can avoid having the filter match the html to the search pattern.
For example, I can't search for id or form without finding every row (the text form is found in the id attributes of the text fields).
I've found many questions and forums that say mData is the answer to my problem.
No matter what I try, I can't get it to work.
Here is how I define my columns:
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 }
]
I assign the above array to the aoColumns property like this:
// 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' ]]
});
Everything works fine.
Here are my custom sort functions used above (just in case):
$.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;
};
The third column in my table is the one that contains the text field.
In an attempt to use the mData property, I've been modifying my column definitions with stuff like this:
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 }
]
I've tried a bunch of stuff similar to the above and nothing seems to be working like the docs and online examples.
Nothing I've found in any forums or other questions has worked.
If anybody could give me a clue about what I'm misunderstanding, I would really appreciate it.
try this for your text column:
{ "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;
}
}
Only downside is that if you change the field and then try to search again - it will not take into account changes. So if you'll find how to invoke mData method again on fly - everything will work as it should.
这篇关于jQuery DataTables - 包含文本字段的列的自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
