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

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

Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

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.

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2023

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    is there an example of this?

    I provided a couple options. Which one?

    It would help to understand how this mapping will work.

    Kevin

  • Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

    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

  • Noodles12Noodles12 Posts: 107Questions: 38Answers: 2
    edited March 2023

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

    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()

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Thats a simple solution!

    Kevin

Sign In or Register to comment.