How to deselect all elements across all pages on serverside table?

How to deselect all elements across all pages on serverside table?

DocaDoca Posts: 4Questions: 3Answers: 0

Link to test case: This can be seen in the serverside table example

Description of problem:
I have noticed that when some elements are selected on page 1, then we go on page 2 and select other elements, Deselect All (selectNone) only deselects the elements on the current page, and those on the other pages remain selected.
How can I clear the selection across the entire table?

Thank you!

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,670Questions: 26Answers: 5,017
    edited February 20 Answer ✓

    The example you linked to states this:

    Additionally, the selectAll button and checkbox header (when used with checkbox selection) will only select the currently displayed rows. This is because the client-side can't know what other rows there are that can be selected.

    Basically this means the Select extension operates on the client side rows only which are just the rows displayed on the page. I haven't seen the select.cumulative() API before nor the example. The docs aren't posted for the API which @allan will need to look at.

    I looked through the select code and it looks like the private variable _select_set may have been added to keep track of the server side row IDs that are selected. The only thing I could come up with is to create this API plugin:

    DataTable.Api.register( 'select.deselectAll()', function ( klass ) {
        return this.iterator( 'table', function ( ctx, index ) {
          var dt = new DataTable.Api(ctx);
          ctx._select_set = [];
          dt.draw('page');
        } );
    } );
    

    Basically it clears the private variable of row indexes and redraws the table, to update the info element, staying on the same page. See the draw() for more details.

    I modified the example to use the API to deselect all rows in this example:
    https://live.datatables.net/yaroyala/81/edit

    @allan can comment if there is a better way or if he is planning to provide this functionality. Possibly this API can be added to the select extension.

    Kevin

  • tschmittschmit Posts: 16Questions: 5Answers: 0
    edited February 20

    This solution is perfect for my actual situation (just I prefer ctx._select_set.length = 0).
    But one limitation is that it does not trigger the corresponding deselect events.

  • kthorngrenkthorngren Posts: 21,670Questions: 26Answers: 5,017
    edited February 20

    @tschmit

    Using ctx._select_set.length = 0 is probably better. I didn't think about firing the deselect event. I don't think the indexes parameter will be accurate as only the rows on the page displayed can be deselected with server side processing. The indexes are a client side index only and not useful with SSP. Maybe something like this would be better:

    DataTable.Api.register( 'select.deselectAll()', function ( klass ) {
        return this.iterator( 'table', function ( ctx, index ) {
          var dt = new DataTable.Api(ctx);
          ctx._select_set.length = 0;
          dt.rows().deselect().draw('page');
        } );
    } );
    

    Updated test case:
    https://live.datatables.net/yaroyala/82/edit

    Kevin

  • tschmittschmit Posts: 16Questions: 5Answers: 0
    edited February 20

    may be:

    DataTable.Api.register('select.deselectAll()', function (mode) {
        return this.iterator('table', function (ctx, index) {
            if (ctx && ctx._select_set && ctx._select_set.length > 0) {
                var dt = new DataTable.Api(ctx);                    
                dt.trigger("deselect", [dt, "row", ctx._select_set]);
                ctx._select_set.length = 0;                    
                dt.rows({ selected: true }).deselect().render();
            }
        });
    });
    

    with render() preventing the hit to the server and an event with rowIds and not indexes (I agree with you for the event).

  • kthorngrenkthorngren Posts: 21,670Questions: 26Answers: 5,017

    You can send the rowIds and not indexes to the deselect event. You can add code to determine which is sent to handle them properly as other deselect API calls or user interaction will still send the indexes.

    I might be wrong but I don't believe there is a render() API. The only way I know to refresh the display is with draw(). However @allan might entertain a new render() API.

    If you are going to trigger the deselect event then you probably will just want to use dt.draw('page'); and not add rows().deselect() to keep from firing deselect more than once.

    Kevin

  • allanallan Posts: 64,010Questions: 1Answers: 10,554 Site admin

    Apologies, I need to dash out, but I'll take a more detailed look at this tomorrow and see if I can come up with a way built into Select to do a deselect all.

    Allan

Sign In or Register to comment.