How to add a hidden column to display filter values in the dropdown?

Noodles12

I am using datatables from my project and it works great. However I am running into a problem with column filtering.

Position column has too long values. Using select.append( ''+d.substring(0,15)+'' ); doesn't work as I want the text to be different for each value.

Is there a way to use a hidden column with simple text to display for filtering so that I dont run into this?

So "System Architectghhghjjkjukjkj" for example would look Sys Architect in the column filter.

Link to my code - https://live.datatables.net/clone/7735/edit

Thanks.

kthorngren

doesn't work as I want the text to be different for each value.

How would you map "System Architectghhghjjkjukjkj" to "Sys Architect"? If you can programmatically do this then you can change this code:

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>');
    });

By programmatically changing the value of d in + d + '</option>. Leave the value="' + d as the original value.

You could use a hidden column but you would need to change the code to loop through all the rows so you can access both the Position column and the hidden column at the same time.

Please provide more details of how the mapping will work then we can offer some suggestions. Maybe you can update the test case with an example of the actual data and what you want the select text to look like.

Kevin

kthorngren

If this mapping comes from the server maybe you can make a separate object returned in the data with the mapping values. You can then use that JSON data, assuming you are using ajax, to build the select options.

Kevin

Noodles12

Hmm is there an example of this? I am not a developer so it would be helpful to see an example. Thanks

kthorngren

is there an example of this?

I provided a couple options. Which one?

It would help to understand how this mapping will work.

Kevin

Noodles12

I think this option is better. > By programmatically changing the value of d in + d + '</option>. Leave the value="' + d as the original value.

Here is my updated example. Thanks.

https://live.datatables.net/tesibise/1/edit

Noodles12

Another thing I noticed was since the column Position has html tags and special characters, the filtering crashes. My project has similar values in the table.

td><p>System: Architectghhghjjkjukjkj<p></td>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Sounds like there is a difference in what this code thinks the data is:

        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();

And what this is building as the option value:

column.data().unique().sort().each(function(d, j) {
  select.append('<option value="' + d + '">' + d + '</option>');
});

You can compare the two or update the test case to show the data you are having issues with so we can take a look.

Kevin

Noodles12

I figured out a better option. Using the hidden column (test case above link), I just modified the code to filter by column 6 instead of 1. It works now. Thanks for your time.

table.columns([0, 6, 2]).every(function()

kthorngren

Thats a simple solution!

Kevin