Select all table rows from all pages (not only current page data)

Select all table rows from all pages (not only current page data)

adrdgradrdgr Posts: 9Questions: 6Answers: 0

Hi,

I have created a select all button using datatables. Also, I loaded data table with values using Ajax.
Then, I tested select all button functionality and I realised an issue: it selects only the current page data.
As I saw, similar cases were solved using: initComplete, serverside:true, {page:"all"} or select:true, but any of these options solved my issue.

Finally, code side, I selected all table rows using "table.rows().select();"

Does anyone have a previous experience on this?

Answers

  • rf1234rf1234 Posts: 3,021Questions: 88Answers: 421
    edited April 2022

    Yes, it's simple, isn't it? I got one, too. But I want a potential search filter applied.

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

    By the way data tables has its own selectAll and its own selectNone button.

    If I recall it correctly I didn't like the built-in selectAll button and hence created my own. But I use the built-in selectNone button.

    You would need to take care of the language defaults if you use languages other than English.

    This is the code of the built-in buttons:

    selectAll: {
            text: i18n( 'selectAll', 'Select all' ),
            className: 'buttons-select-all',
            action: function () {
                    var items = this.select.items();
                    this[ items+'s' ]().select();
            }
    },
    selectNone: {
            text: i18n( 'selectNone', 'Deselect all' ),
            className: 'buttons-select-none',
            action: function () {
                    clear( this.settings()[0], true );
            },
            init: function ( dt, node, config ) {
                    var that = this;
                    config._eventNamespace = '.select'+(_buttonNamespace++);
    
                    dt.on( namespacedEvents(config), function () {
                            var count = dt.rows( { selected: true } ).flatten().length +
                                        dt.columns( { selected: true } ).flatten().length +
                                        dt.cells( { selected: true } ).flatten().length;
    
                            that.enable( count > 0 );
                    } );
    
                    this.disable();
            },
            destroy: function ( dt, node, config ) {
                    dt.off( config._eventNamespace );
            }
    }
    
  • adrdgradrdgr Posts: 9Questions: 6Answers: 0
    edited April 2022

    Thank you for the response.

    I tried selectAll and selectNone buttons (i.e. not built-in buttons) as well, but I got the same problem. Meaning that, only table rows of the current page are selected.

    @rf1234 In your case, do you use ajax? I think there are restrictions on row selection when use ajax data source.

  • rf1234rf1234 Posts: 3,021Questions: 88Answers: 421
    edited April 2022

    I use Editor with ajax.
    selectAll can only select what was downloaded to the client. In case you use server side processing you are probably only loading the current page to the client. At least that would be Editor's behavior.
    In that case: Turn off paging or turn off server side so that all records get downloaded to the client.
    (Server side is hardly ever needed by the way. Many people turn it on without needing it. I would turn off server side first.)

    P.S.: Hard to help without seeing any of your code :smile: Guesswork ...

  • adab44adab44 Posts: 2Questions: 1Answers: 0

    @adrdgr did you find how to do it?

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974

    @adrdgr See my answer in your other thread.

    Kevin

Sign In or Register to comment.