jQuery DataTables – 包含文本字段的列的自定义filter
我正在使用jQuery DataTables插件。
我想为包含文本字段的列创建自定义filter。
我想根据列中输入字段的value属性进行过滤。
我需要这样做，所以我可以避免filter匹配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: '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方法 – 一切都将按预期工作。
您可以在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’