使用自定义样式从过滤器中剥离HTML标记

Strip HTML tags from filter with custom sType

本文关键字：剥离 HTML 标记 过滤器 自定义 样式      更新时间：2023-09-26

我有一个定义为

的数据表
        $('#group').dataTable( {
         "sDom": '<"H"fi>t<"F">', 
        "aaSorting": [ [2,'asc'], [1,'asc'] ],
        "aoColumnDefs": [
            {"aTargets": [ 0 ],      "sType": null,         "bSortable": false, "bSearchable": false },       
            {"aTargets": [ 1, 2 ],   "sType": "html",       "asSorting": [ "asc", "desc" ] },      
            {"aTargets": [ 3 ],      "sType": "gcse-grade", "asSorting": [ "desc", "asc" ] },      
            {"aTargets": [ "_all" ], "sType": "grade",      "asSorting": [ "desc", "asc" ] } 
        ],
        "bAutoWidth": false,
        "bFilter": true,
        "bInfo": true,
        "bLengthChange": false,
        "bPaginate": false,
        "bScrollAutoCss": true,
        "bScrollCollapse": true,
        "bSort": true,
        "oLanguage": { "sSearch": "_INPUT_" }
     }
    );

正如你所看到的，我使用了自定义类型grade和gcse_grade。我有自定义排序工作良好使用oSort。但是，当我创建表时，这些列有时会在其中带有HTML标记。

我如何过滤这些，以便它首先从内部剥离HTML标记。也就是说，过滤器只看到文本，而不是标签(因为我不想让过滤器拾取任何，或标签)。

这里有一个小提琴

要在过滤器搜索中去掉html标签，可以使用如下命令:

"aoColumnDefs": [
    {   "aTargets": [0],
        "mRender": function ( data, type, full ) {
            if (type === 'filter') {
                return data.replace(/(<([^>]+)>)/ig,"");
            }
            return data;
        }
    }
]

如果这只是为了排序的目的，可以试试:

jQuery.fn.dataTableExt.oSort['gcse-grade-asc']  = function (a, b) {
    var x = $('<div />').append(a).text();      // append to div element and get [inner]text to strip tags
    var y = $('<div />').append(b).text();      // append to div element and get [inner]text to strip tags
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));  // sort like normal
};
jQuery.fn.dataTableExt.oSort['gcse-grade-desc'] = function (a, b) {
    var x = $('<div />').append(a).text();      // append to div element and get [inner]text to strip tags
    var y = $('<div />').append(b).text();      // append to div element and get [inner]text to strip tags
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));  // sort like normal
};
jQuery.fn.dataTableExt.oSort['grade-asc']  = function (a, b) {
    var x = $('<div />').append(a).text();      // append to div element and get [inner]text to strip tags
    var y = $('<div />').append(b).text();      // append to div element and get [inner]text to strip tags
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));  // sort like normal
};
jQuery.fn.dataTableExt.oSort['grade-desc'] = function (a, b) {
    var x = $('<div />').append(a).text();      // append to div element and get [inner]text to strip tags
    var y = $('<div />').append(b).text();      // append to div element and get [inner]text to strip tags
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));  // sort like normal
};

如果您需要它来过滤(和排序等)，只需使用fnRowCallback函数来在绘制表之前操作实际内容:

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    var gcse = $('td:eq(2)', nRow),     // cache lookup
        grade = $('td:eq(3)', nRow);    // cache lookup
    gcse.html(gcse.text());
    grade.html(grade.text());
}
相关文章：