jQuery数据表 - 如何搜索表中有HTML标签的列中的文本？ [英] jQuery datatables-how to search text in column that has html tags in a table?

问题描述

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

所以对我来说，使用< i> code>或< b> 。

这是搜索框的HTML代码。 >

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

创建datatable的脚本如下：

  function createWidget（table）{
 column_data = [
 {title：User ID，visible：false，data：id}，
 {title：Location，visible：true，data：location}，
 title：Details，
 data：details，
 sortable：false，
渲染：{
显示：function（data）{
 json = jQuery.parseJSON（data）; 
 s =; 
 
 if（主体在json中）
 {
 s + =< b>主题：< / b>< br />; 
 $ .each（json [subjects]，function（key，value）{
s + = - < i>+ key +：< / i> < br />; 
}）; 
 
 s + =< b>小时：< / 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

我尝试过滤细节列> English 使用jquery这样的东西：

  $（EnglishStaffname_search）。keyup（function（）{
 try {
 item = $（this）.val（）; 
 table.column（2）.search（item，true，false）.draw（）; 
} catch （e）{
 
} 
}）; 
  

但是以上是搜索整个单元格不是只有英文。我也尝试过正则表达式，但没有得到完全匹配。

任何人都可以建议我完全匹配，无论html标签如何？

网页表：

解决方案

我们可以使用 RegEx 。

尝试以下代码 -

  $（document）.ready（function（）{
 var table = $（'＃example'）。DataTable（{
（）（）（$（$（$））$（$）
 
 $（'input [type =search]'）keyup（function（）{
 var term = .val（）; 
 if（term ==''）{
 regex =''; 
} else {
 regex ='Eng lish：'+ term; 
} 
 table.search（regex，true，false）.draw（）; 
}）
}）; 
  

工作 jsfiddle 。

My page has search box to filter particular column data.The text in the cell is displayed using html properties like <i> and <b>.

So it is a challenge for me to filter the text with <i> or <b>.

Here is html code for search box.

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

The script to create datatable is below:

  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;
            }
        }
    }];}

The table displays the details column like below

1st row :

subject:

-English:Meena.K

-Maths:Ramya.v

hours:

-monday:8

2nd row:

English:Kiran.K

Maths:Ramya.v

I have tried to filter details column for English using jquery something like this:

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

        }
    });

But the above is searching for whole cell not for only English.I have tried regex also but not getting exact match.

Can any one suggest me to get exact match irrespective of html tags?

Web page table:

解决方案

We can do it using RegEx.
Try following code-

$(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();
    })
});

Working jsfiddle.

这篇关于jQuery数据表 - 如何搜索表中有HTML标签的列中的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！