How to search only text in jquery datatables?

Question

I followed this example: http://www.datatables.net/development/filtering

But it's not working. If you input 'a' as search keyboard, all rows are still shown in the table because it searches the html tag <a>. What am I missing?

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

<script>
        $.fn.dataTableExt.ofnSearch['string'] = function ( sData )
        {
            return sData.replace(/\n/g," ").replace( /<.*?>/g, "" );
        };
        $(document).ready
        (
            function()
            {
                $('#search').dataTable
                (
                    {
                        aoColumns:[ 
                                    {'sType': 'string'}
                                ]
                    }
                );
            }
        );
</script>


</head>
<body>

<table id="search">
    <thead>
        <tr>
            <th>search</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="www.google.com">b</a></td>
        </tr>
        <tr>
            <td><a href="www.google.com">c</a></td>
        </tr>
        <tr>
            <td><a href="www.google.com">d</a></td>
        </tr>
        <tr>
            <td><a href="www.google.com">e</a></td>
        </tr>
        <tr>
            <td><a href="www.google.com">f</a></td>
        </tr>
        <tr>
            <td><a href="www.google.com">g</a></td>
        </tr>
    </tbody>
</table>
</body>
</html>

I guess there is something wrong in your Regex.

OQJF
– OQJF

2013-05-28 03:44:55 +00:00
Commented May 28, 2013 at 3:44 — OQJF
– OQJF, Commented May 28, 2013 at 3:44

Fikri Marhan · Accepted Answer · 2013-05-28 04:24:36Z

2

got this from the source code

* Note that as of v1.9, it is typically preferable to use <i>mData</i> to prepare data for
* the different uses that DataTables can put the data to. Specifically <i>mData</i> when
* used as a function will give you a 'type' (sorting, filtering etc) that you can use to 
* prepare the data as required for the different types. As such, this method is deprecated.
*  @type object
*  @default {}
*  @deprecated
*
*  @example
*    $.fn.dataTableExt.ofnSearch['title-numeric'] = function ( sData ) {
*      return sData.replace(/\n/g," ").replace( /<.*?>/g, "" );
*    }
*/
"ofnSearch": {},

So i come up with this

var filterFunc = function ( sData )
{
    return sData.replace(/\n/g," ").replace( /<.*?>/g, "" );
};
$(document).ready
(

function()
{
    $('#search').dataTable
    (
        {
            aoColumns:[ 
                {
                    'mData': function(source, type, val){
                        if (type === 'set') {
                          source.value = val;
                          source.value_display = val;
                          source.value_filter  = val=="" ? "" : filterFunc(val);
                          return;
                        }
                        else if (type === 'display') {
                          return source.value_display;
                        }
                        else if (type === 'filter') {
                          return source.value_filter;
                        }
                        // 'sort', 'type' and undefined all just use the integer
                        return source.value;
                    }

                }
            ]
        }
    );
}
);

here is the fiddle http://jsfiddle.net/pJG9f/1/

answered May 28, 2013 at 4:24

Fikri Marhan

3591 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhaval dave Over a year ago

Please read my comment, iam putting my code which gives error.

Dušan Maďar Over a year ago

Yep, checking type and returning accordingly is the right way

yvonnezoe · Accepted Answer · 2013-05-28 03:18:14Z

0

May be you should put a quote for your "a" or $selector.find (a).text()?

answered May 28, 2013 at 3:18

yvonnezoe

7,4478 gold badges35 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to search only text in jquery datatables?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related