9

我正在使用jQuery DataTables 插件，并且其中的过滤功能有一点问题。如果我有一个内容为 的表格单元格<a href='foo6'>Blah</a>，并且我过滤了“6”，那么即使“Blah”中没有“6”，该单元格也会显示出来。我想做的是让 DataTables 插件在过滤时忽略 HTML。

我试过搜索 DataTables 网站，发现相互矛盾、无用的线索。一篇文章建议我sType:'html'在 aaColumns 的定义中需要一个选项，但我试过了，但没有帮助……另外，后来的一篇文章建议当前版本的 DataTables 自动检测 HTML sType。我还发现了这个代码片段：

// Make filtering ignore HTML (see http://datatables.net/plug-ins/filtering)
$.fn.dataTableExt.ofnSearch['html'] = function ( sData ) {
    var n = document.createElement('div');
    n.innerHTML = sData;
    if (n.textContent) {
        return n.textContent.replace(/\n/g," ");
    } else {
        return n.innerText.replace(/\n/g," ");
    }
};

这应该解决问题......但它没有。

所以，我的问题是：有没有人知道如何让 DataTables 在过滤行时忽略非文本（即 HTML）内容？

4

4 回答 4

6

原来我需要mRender在我的列标题上使用自定义函数。更重要的是（因为我一开始没有检查“类型”参数就尝试过这个），您需要使用提供给该函数的类型参数以使其仅在过滤时应用。

我的最终结果看起来像这样：

aaHeaders: [{
    mRender: function(data, type, full) {
        // If we're filtering, don't look at the HTML; only filter on the text
        return type == 'filter' ? $(data).text() : data
    }
}], //...
于 2012-09-20T22:01:32.087 回答
1

你可以试试这个：

$.fn.dataTableExt.ofnSearch['html'] = function ( sData ) {
    return $("<div/>").html(sData).text();
}
于 2012-09-20T17:11:19.383 回答
1

只需升级你的datatable.js ..我使用1.9.4并在升级到1.10.9后遇到同样的问题问题解决了..

于 2015-09-22T13:34:56.073 回答
0 
// To override basic search functionality of datatable
            $.fn.dataTable.ext.search.push(
                    function( settings, data, dataIndex ) {
                        var tableId = settings['sTableId'];
                        var searchTerm = settings.oPreviousSearch.sSearch;
                        if ( 'tableId' == tableId){
//I added tableId condition as I have multiple table on same page..
                            if(data[0].indexOf(searchTerm) > -1 ||data[2].indexOf(searchTerm) > -1||data[3].indexOf(searchTerm) > -1||data[4].indexOf(searchTerm) > -1||data[5].indexOf(searchTerm) > -1 || data[6].indexOf(searchTerm) > -1){
                                return true;
                            }else{
                                return false;
                            }
                        }
                        return true;
                    }
            );
于 2015-05-19T12:06:39.550 回答