Filter out columns

Filter out columns

54696d2054696d20 Posts: 75Questions: 18Answers: 0

I'm trying to filter out and only show the columns that only have red values and images

My example doesn't show img
http://live.datatables.net/vipifute/26/edit

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,301Questions: 26Answers: 4,769

    First you have a syntax error:

    VM50:6 Uncaught SyntaxError: missing ) after argument list

    Fixed that and now the code runs. Since you have multiple columns you will want to include the flatten() API as shwon in the second example of the filter() docs. Updated example here:
    http://live.datatables.net/vipifute/27/edit

    Kevin

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0
    edited November 2019

    Thanks @kthorngren . I did noticed that after. But even your example. It's not filtering, meaning showing only that data when clicking on the filter check box

  • kthorngrenkthorngren Posts: 20,301Questions: 26Answers: 4,769

    Are you saying you want to filter the table rows? If so then filter() is not what you want to use. The filter() docs state this:

    The filter() method provides a way of filtering out content in an API instance's result set which does not pass the criteria set by the provided callback method. This method should not be confused with search() which is used to search for records in the DataTable - i.e. the filter method does not change the rows that are displayed in the DataTable.

    It is meant to fetch the data, meeting the requirements, from the table to use in Javascript.

    Some options to look at are Orthogonal data and Search Plugins. Using Orthogonal data is easier but depends on how your data is populated. We can help you with this further but want to make sure we know how your table is populated. Is the example you provided accurate or are you getting data via ajax or javascript?

    Kevin

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0

    I've tried that too before the filter option.. I've updated the code http://live.datatables.net/vipifute/29/

  • kthorngrenkthorngren Posts: 20,301Questions: 26Answers: 4,769

    Looks like the same code as your original. It has the same syntax error. Did you post the correct link?

    Kein

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0

    Sorry, I didn't (too many windows open lol). http://live.datatables.net/jigejeqa/1/

  • kthorngrenkthorngren Posts: 20,301Questions: 26Answers: 4,769

    One problem is you need to use draw() to perform the search:
    http://live.datatables.net/cilituno/1/edit

    But the result is not what you want. The HTML (span) is not part of the actual data so the search doesn't work. This is why you need to use orthogonal data. If your table is DOM sourced then you can use HTML5 Attributes. If your data is ajax or javascript sourced then you will use the filter type and set the value to to something to search on.

    We will need more info about your data source and how/where you are creating the span element.

    Kevin

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0
    edited November 2019

    @kthorngren Long day. I did forget the draw(). But your right. That's not what i'm looking for. I did think that I could target the span and have it work. My data comes from ajax. The example didn't show that, but shows how the data is presented in code. The logic is worked out before passing to the front. I add a <span style=\"color: red\"> + value + </span> tag around the value to make it red in the table. Instead of searching/scrolling for values that are red. I wanted to create a filter that would show only those values. Not in my example, but I also use <img> tags to replace a true value with an green check mark img. I wanted to filter by that too just not at the same time

  • kthorngrenkthorngren Posts: 20,301Questions: 26Answers: 4,769
    edited November 2019

    Here is an example using columns.render that should help.
    http://live.datatables.net/yovurava/1/edit

    I'm replacing your Ajax data with Javascript data. In the JS data there is a span tag. For the filter type it looks for the span and returns red (can be whatever you want) if it exists. Otherwise it just returns the data.

    I can do the same for img tags. This is an example of using orthogonal data.

    EDIT: If you want to run the same render function for multiple columns you can use columnDefs with the columnDefs.targets set to the columns that can have span or img tags.

    Kevin

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0

    Okay, but now you can't search (in your example) "Accountant" in the search bar. You have to use search box "Red" and it will pop up. I'm not looking for that functionality. I want to control it by a checkbox. and control the image by another checkbox.

  • kthorngrenkthorngren Posts: 20,301Questions: 26Answers: 4,769

    Then you will need to use a search plugin. Here is an example with checkboxes:
    http://live.datatables.net/vipifute/1/edit

    Kevin

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0
    edited November 2019

    Ok.... Seems that we are going in circles. Search would work if I could target a HTML Span inside a TD tag. Tried a "<\s*span[^>]*>(.*?)<\s*/\s*span>" regex, but that didn't work. Does @allan have an idea. I really appreciate the help.

  • kthorngrenkthorngren Posts: 20,301Questions: 26Answers: 4,769
    Answer ✓

    Sorry I posted the wrong search plugin example. It wasn't a search plugin example at all :-)

    I updated my example to show how the search plugin might work for you.
    http://live.datatables.net/vosiduna/1/edit

    The advantage of the search plugin is you have access to the raw data via the rowData parameter. You can look at the searchData parameter and you will see the HTML has been removed. Which is what I think you are running into with your attempts. The other advantage is the checkbox will be examined each time the table is drawn, ie, searched. So other searches will also include the checkbox. You can check the box then search acc to see further filtering capabilities.

    The only other option I can think of is to update replace part of the HTML string so Datatables doesn't remove the HTML. Something like this example:
    http://live.datatables.net/yefemeto/1/edit

    Kevin

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0

    Thanks @kthorngren . That makes a lot more since. Thanks again.

This discussion has been closed.