Filter and sorting at same time?

Filter and sorting at same time?

ferran_munozferran_munoz Posts: 28Questions: 7Answers: 0

Hi!

I think that the question is easy but I don't know how can I do this... I search a word and the datatable show me the results. That's correct. But, when I sort for any column, the table sort all the information and don't sort for the filtered word). This, in terms of UX, makes confusion.

So, here exists 2 solutions:
1.- Clear the search filter when sort
2.- When sort, only sort the filtered information.

It can be possible?

Thanks.

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited December 2019

    You would need to use "search: applied". Here is an example from a different context.

    //custom button to select all rows of a data table
    $.fn.dataTable.ext.buttons.selectAll = {
        text: selectAllLabel,
        action: function ( e, dt, button, config ) {
            dt.rows({ search: 'applied' }).select();
        }
    };
    

    Could be something like:

    table
        .rows({ search: 'applied' })
        .order( [ 1, 'asc' ], [ 2, 'asc' ] )
        .draw();
    

    https://datatables.net/reference/api/order()

  • ferran_munozferran_munoz Posts: 28Questions: 7Answers: 0

    Hi rf1234.

    Sorry, but I don't know how I would can implement "search: applied" in sort event :s

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited December 2019

    There is not sort event. It's called order: https://datatables.net/reference/event/order

    You could try this:

    $('#example').on( 'order.dt', function () {
        table
            .rows({ search: 'applied' })
            .order( [ 1, 'asc' ], [ 2, 'asc' ] )
            .draw();
    } );
    

    Calling draw() might be redundant. I would just try both with and without draw().

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited December 2019

    I probably didn't understand this here:
    "But, when I sort for any column, the table sort all the information and don't sort for the filtered word"

    Well if the ordering wasn't done with the entire column value it would be meaningless, wouldn't it? In this case the value to order would only be the value of your searched word which by definition is identical in all rows of the result set of the search.

    But maybe I am not getting what you really want ...

  • ferran_munozferran_munoz Posts: 28Questions: 7Answers: 0

    Imagine this:

    Table with 2 columns: Id and Description.

    This table have 10 rows like this:
    Id: 1, Description: "Stephen Glad"
    Id: 2, Description: "Holly Hunter"
    Id: 3, Description: "Marcus Chad"
    Id: 4, Description: "Melanie Talls"
    Id: 5, Description: "Peter Hunter"
    Id: 6, Description: "Rod Brew"
    Id: 7, Description: "Robert Smith"
    Id: 8, Description: "Maria Rodriguez"
    Id: 9, Description: "Mary Smith"
    Id: 10, Description: "James Johnson"

    So, I have the filter box and I wrote: Smith

    Well, the datatable filters and the table only shows the rows 7 and 9. That's correct.

    But, when I order for the "Id" column, in the table appears all the rows again, don't order only with 7 and 9 row. You know?

    For this reason I told: If there're any possibility that filter with the results (you told me the filter: applied) or, if don't, when I order, reset the filter box for don't confuse the user.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    "But, when I order for the "Id" column, in the table appears all the rows again, don't order only with 7 and 9 row. You know?"

    Ok, then I should have it right. Because that is exactly what "search: applied" should help with: It restricts the input rows to the respective search results.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    @ferran_munoz, Looking at DT examples, the desired behaviour you describe is what I'm seeing.
    Are you using a custom filter input?

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited December 2019

    I do not use search applied for my ordering and I tested the behaviour:
    - For server side data tables all works fine: Only the searched for rows are being ordered. Which is a different behaviour from yours.
    - For client side data tables I have the same behaviour that you discovered: All rows come back again ... I don't like that either! So I will try a solution for this myself and publish it here afterwards.
    - Then I tried with a different client side data table: and it was like @tangerine described it. This is really confusing. The table that didn't work was very large by the way ... Amazing.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    edited December 2019

    @rf1234, This looked like like an interesting question, and I started wondering how to implement this behaviour in such a way that the user would understand what's going on.
    Then I looked at DT examples, and my own use of individual column filters, and I found that sorting only the filtered items is happening by default.
    Sad that I don't remember what my own application has been doing for years....

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    @ferran_munoz - Are you using a custom filter? The behaviour you require happens already with DT filter.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited December 2019 Answer ✓

    @tangerine, Sorry my statement that I found the same (wrong) behaviour was wrong! it is exactly like you describe. So @ferran_munoz problem must have a different cause.

    @ferran_munoz: I guess you have something in your code that kills the search somehow when ordering the table. Maybe you would like to post a test case please.
    For example: If you cleared the search field in your code prior to ordering you would have the behaviour that you currently have.

  • ferran_munozferran_munoz Posts: 28Questions: 7Answers: 0

    @tangerine No, is the filter of the datatable jquery :smile:

    @rf1234 you're right, I found it, the problem was that the last week I did the implementation with list.js for order the columns (before use the Datatable option of jQuery).

    And today, when I implement the Datatable, the code of the list.js still was in the page. And this is the reason. When I deleted the code of the list.js, all works like a charm (order, filter, order and filter...).

    Well, thanks for the help :smile:

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited December 2019

    you are welcome! But sometimes it is like @tangerine says:
    "Sad that I don't remember what my own application has been doing for years...." :)
    ... same here!

This discussion has been closed.