javascript - jQuery datatables-如何在表中搜索具有 html 标签的列中的文本？

Question

我的页面有搜索框来过滤特定列数据。单元格中的文本使用 html 属性显示，如 <i>和<b> .

所以用 <i> 过滤文本对我来说是一个挑战或<b> .

这是搜索框的 html 代码。

<form>
     <span>EnglishStaffname</span>
        <input type='text' id='EnglishStaffname_search' value=""></input> 
</form>

创建数据表的脚本如下:

  function createWidget(table) {
    column_data = [
    {title: "User ID", visible: false, data: "id"},
    {title: "Location", visible: true, data:"location"},
    title: "Details",
        data: "details",
        sortable: false,
        render: {
            display: function(data) {
                json = jQuery.parseJSON(data);
                s = "";

                if ("subjects" in json)
                {
                    s += "<b>subjects:</b><br />";
                    $.each(json["subjects"], function(key, value) {
                        s += " - <i>" + key + ": </i>" + value + "<br />";
                    });

                    s += "<b>hours:</b><br />";
                    $.each(json["hours"], function(key, value) {
                        s += " - <i>" + key + ": </i>" + value + "<br />";
                    });
                }
                else 
                {
                    $.each(json, function(key, value) {
                        s += "<b>" + key + ": </b>" + value + "<br />";
                    });

                }

                return s;
            }
        }
    }];}

表格显示如下详细信息列

第一行:

主题:

-英语:Meena.K

-数学:Ramya.v

时间:

-星期一:8

第二行:

英语:Kiran.K

数学:Ramya.v

我尝试使用jquery过滤英语的详细信息列，如下所示:

$("EnglishStaffname_search").keyup(function() {
        try {
            item = $(this).val();
            table.column(2).search(item, true, false).draw();
        } catch(e) {

        }
    });

但是上面的内容是搜索整个单元格，而不仅仅是英语。我也尝试过正则表达式，但没有得到完全匹配。

任何人都可以建议我无论 html 标签如何都获得精确匹配吗？

网页表:

Answer 1

我们可以使用RegEx来做到这一点.
尝试以下代码-

$(document).ready(function() {
    var table = $('#example').DataTable( {
        responsive: true
    });

    $('input[type="search"]').keyup(function(){
        var term = $(this).val();
        if(term =='') {
            regex = '';
        } else{
            regex = 'English:'+ term ;
        }   
        table.search( regex, true, false ).draw();
    })
});

工作中jsfiddle .