gpt4 book ai didi

javascript - jQuery DataTables - 包含文本字段的列的自定义过滤器

转载 作者:行者123 更新时间:2023-11-30 18:16:52 27 4
gpt4 key购买 nike

我正在使用 jQuery DataTables 插件。

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

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

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

例如,我无法在没有找到每一行的情况下搜索 idform(文本 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 }
]

我已经尝试了很多与上述类似的东西,但似乎没有什么能像文档和在线示例那样工作。

我在任何论坛或其他问题中发现的任何问题均无效。

如果有人能告诉我我误解了什么,我将不胜感激。

最佳答案

为您的文本列试试这个:

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

关于javascript - jQuery DataTables - 包含文本字段的列的自定义过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13043458/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com