Search HTML tags with search()

hadrien01

Hi!

I'm trying to modify the Column Filtering code. Because I have quite an amount of HTML in the table, I use a span tag with the raw information (which is also useful to sort dates by year instead of days in the European format).

For example, one cell would have this code :

<span class="tri hidden">1998-01-02</span><a href="#">02/01/1998</a>

I already have the code to get the values in the select, but I can't get to work search().

Here's my test case : http://live.datatables.net/guvuhax/1/watch?html,js,output

Hoping for help, thanks, Hadrien

$("#datatable thead .tri th")
    .each(function (i) {
        var select = $('<select><option value=""></option></select>')
            .appendTo($(this)
                .empty())
            .on('change', function () {
                var val = $(this)
                    .val();
                console.log($(this)
                    .val());
                table.column(i)
                    .search('^' + $(this).val() + '$', true, false)
                    .draw();
            });
        arr = new Array();
        table.column(i)
            .data()
            .sort()
            .each(function (d, j) {
                arr[j] = element = $(d)
                    .filter(".tri")
                    .text();
                arr = arr.filter(function (value, index, self) {
                    return self.indexOf(value) === index;
                });
                arr = arr.sort();
            });
        arr.forEach(function (e) {
            select.append('<option value="' + e + '">' + e + '</option>');
        });
    });

rhino

Do you have the option of putting the Users full name into a hidden column, so that it's not in the <span> tag of the first column? Then you could just do a plain search on the hidden column. Is that an option for you?

hadrien01

No. I'd prefer to keep with one column per "content", if that's not a problem?

My question is more on the usage of search(). I tried using a regex searching explicitly for the span with the content inside, but it seems datatables.js doesn't respect it (even if it's right according to regexr.com).

daniel_r

you can check out my yadcf plugin http://live.datatables.net/fapiley/1/edit (<-- you might needed to click on the "Run with JS" button of jsbin) it might be not a perfect fit for current use case(because you got several tags per td) but its close enough (and less code :) )

take a look at the showcase for more example... http://yadcf-showcase.appspot.com/DOM_source_chosen.html

hadrien01

I just checked your example and modified it. I added spans, and they're registered in the select filter. What I did in the end, always in the same example is, since in the end only the first level of tags is recognized, I added an empty surrounding tag around the non-hidden content.

It's a really interesting solution, I'm going to check it further see if it works for me, and if I can make it work with the Datatables object (which is not the case now).

hadrien01

In the end I take it. It works, even if it doesn't do everything I want it to do.

daniel_r

Read the docs to know all yadcf features, there are plenty :)