How to display only the value and not the HTML in the searchBuilder and searchPanes components

How to display only the value and not the HTML in the searchBuilder and searchPanes components

sloloslolo Posts: 75Questions: 15Answers: 1

Link to test case: https://live.datatables.net/pebisamu/1/edit
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

I'm trying to use HTML code in the cells of my DataTable.
As you can see in my test case, it works fine.
However, I'd like the "searchPanes" component to only see the value and not the rendered HTML code (see quantity filed).

Is there a way to do this?

Also, I don't understand why I have to put an invisible span so that the value is correctly taken into account for the "searchBuilder" component.

<span class="invisible">1</span>

Without the invisible span, the value for quantity filed is empty:

Thanks in advance for your help and have a nice day.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,912Questions: 26Answers: 5,063

    To have different values for filtering and what is displayed in the table use Orthogonal Data. See this SearchBuilder example and this SearchPanes example.

    Kevin

  • sloloslolo Posts: 75Questions: 15Answers: 1

    Hello @kthorngren,

    I have already seen these examples.
    They use ajax data and the rendering is done in columns property.
    In my case, the table is already generated before calling oTable.datatable() method.
    I don't know if it possible to change the rendering if the table already exists in the dom.

    And in my test case, you can see that I already use orthogonal data:
    ex: data-sort="1" data-search="1" data-filter="1"

  • kthorngrenkthorngren Posts: 21,912Questions: 26Answers: 5,063
    edited April 16

    Try this for SearchBuilder, found in the example:

                searchBuilder: {
                    orthogonal: {
                        display: 'filter'
                    }
                },
    

    I expect this will display your orthogonal filter data in the SearchBuilder values.

    Do the same for SearchPanes.

    https://live.datatables.net/pebisamu/2/edit

    Kevin

  • sloloslolo Posts: 75Questions: 15Answers: 1

    Thanks for the tips.

    Do you think it is a good way to do what I am trying to do?

    I have added a class to th columns and add this to columnDefs

    { "targets": "td-numericInput",
    "searchBuilder": { "orthogonal": { "display": "filter" } },
    "searchPanes": { "orthogonal": { "display": "filter" } }
    },

    See: https://live.datatables.net/pebisamu/6/edit

    This seems to work but I don't know if it's the right way to do it.

    Thanks in advance for your help.

  • kthorngrenkthorngren Posts: 21,912Questions: 26Answers: 5,063

    I can't think of a different way to handle this. Are you questioning the use of the classname or the orthogonal data definition?

    Kevin

  • kthorngrenkthorngren Posts: 21,912Questions: 26Answers: 5,063

    You might be able to set columnDefs.targets to "_all" and have SearchPanes and SearchBuilder use the filter orthogonal data for each column.

    Kevin

  • sloloslolo Posts: 75Questions: 15Answers: 1

    I can't think of a different way to handle this. Are you questioning the use of the classname or the orthogonal data definition?

    I was talking about using the class. Using "orthogonal" seems to be the only way to do what I want without having to go through json formatted data.

    You might be able to set columnDefs.targets to "_all" and have SearchPanes and SearchBuilder use the filter orthogonal data for each column.

    I have already tried to use "_all" instead of the class but for some reason the searchPanes component no longer works correctly (it only displays the "code" and "quantity" columns)

    Maybe I did something wrong. Can you confirm that "_all" is not working properly?

  • kthorngrenkthorngren Posts: 21,912Questions: 26Answers: 5,063
    Answer ✓

    The problem is there are two columns.searchPanes configuration settings defined for some of the columns. Only one will be applied. You will need to combine "searchPanes": {"show": true} with

            searchPanes: {
              orthogonal: {
                display: 'filter'
              }
            },
    

    Updated test case:
    https://live.datatables.net/pebisamu/8/edit

    Kevin

  • sloloslolo Posts: 75Questions: 15Answers: 1

    @kthorngren,

    You are my hero :)

    I've been using the DataTables component for several years and I'm still learning more about it, and it continues to surprise me over time.

    Thank you so much for everything.

Sign In or Register to comment.