Have a range of years in datatable column and when search in the range, find the items

liviu.daniel

Hi,

Is it possible to have a column with rows for example : 2010 - 2017, and when searching for 2014 to find the row that has the values 2010 - 2017?

Thank you!

kthorngren

I don't believe there is a built-in way of doing this. You would need to create a custom search plugin. This blog provides a detailed example of how to do this.

Kevin

allan

This example might also be of use.

Allan

liviu.daniel

Hi @allan,
As a workaround, is it possible to have a column with cells that contains the ranges ex: 2017-2020, and another column with all the elements in the range, ex: 2017, 2018, 2019, 2020. The second column would be hidden for the user. Is it possible when searching in the first column to redirect the search to the second one?

Also I would want the 2nd column to be ignored also in the export functions (pdf, print, etc.).

liviu.daniel

I already did the hidden column with all the elements in the range, I manage to hide it also in the print function, now, I have the following search function:

    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

Is it possible that when searching in the visible column to redirect the search in the hidden column, so it will show the result from the hidden column?

kthorngren

It might be easier to use columns.render and apply your elements in the range to the filter type. This way you don't need the extra column.

Kevin

liviu.daniel

Hi @kthorngren ,

I just read the doc, but I didn't understand how could I apply it to my problem. Could you provide an example? I can make the template to a live demo if necessary.

liviu.daniel

This example https://datatables.net/examples/plug-ins/range_filtering.html works only if I search for the begin and end, in my case I have the begin and end in the same cell in table and when I search for a value in that range to return the cell by the search function.

kthorngren

I created a demo using columns render. Thanks for the offer of building the template. I'm not much for Javascript so there may be a better way to parse the 2010 - 2017 string to build the range of years. I leave it to you to validate the render function and make it more efficient

http://live.datatables.net/zajoxanu/1/edit

Essentially the way it works is the render function checks to see if the type being rendered is filter. If it is the code will build the date range and return that range. If its not then it just returns the original data. Not being display and other types.

I don't think this functionality is intuitive in the doc page. But there is a pointer to this page which provides a more detailed explanation.

https://datatables.net/manual/data/renderers

Kevin