After using rows().select() to select all, why does it take a double click to deselect a given row?

After using rows().select() to select all, why does it take a double click to deselect a given row?

mparnelldmpmparnelldmp Posts: 5Questions: 1Answers: 0

Likewise, the behavior becomes flip-flopped after doing such a thing such that the selected rows stay checked in appearance, but don't appear to be populated in the array that I'm using to keep track of selected id's.

I've fought with it for a couple hours and wonder if a second set of eyes could perhaps help me figure out why this isn't working correctly?

I'm not really a js guy as much as I am strong in other languages, and so I realize there's probably also a better way to do some of this anyway.

               oTable.on('select', function (e, dt, type, indexes) {
                    selected = [];

                    var d = oTable.rows(indexes).data().toArray();
                    $(d).each(function () {
                        selected.push(this['DT_RowId']);
                    });
                });

                oTable.on('deselect', function (e, dt, type, indexes) {
                    var d = oTable.rows(indexes).data().toArray();
                    $(d).each(function () {
                        selected.push(this['DT_RowId']);
                    });
                });

                $('#selectall').click(function () {
                    selected = [];

                    if ($(this).hasClass('on')) {
                        oTable.rows().deselect();
                        $(this).removeClass('on');
                        oTable.page.len(25).draw();
                    } else {
                        var info = oTable.page.info();
                        if (info.recordsTotal > 250) {
                            alert('Select all is limited to 250 people at a time to prevent mistakes.');

                            oTable.page.len(250).draw();

                            oTable.rows().select();
                            $(this).addClass('on');
                        } else {
                            oTable.page.len(-1).draw();

                            oTable.rows().select();
                            $(this).addClass('on');
                        }
                    }
                });

Answers

  • mparnelldmpmparnelldmp Posts: 5Questions: 1Answers: 0

    Other than the above my initialization code is all standard, it's just select all followed by singular row deselection that is giving me fits.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    I copied your code into this test case:
    http://live.datatables.net/kucapule/1/edit

    I did make one change since my case uses arrays I populate the selected array with column 0 (name).

    Seems like it works correctly. Click "Select All" and all rows are selected. Click once on a row and all are deselected except the row clicked.

    Maybe I'm using a different version of select than you. Can you provide a link to your code or maybe update the test case to replicate the issue?

    Kevin

  • mparnelldmpmparnelldmp Posts: 5Questions: 1Answers: 0

    Interesting, I'll have to compare/contrast and get back to you.

    I'm using the version of select as generated in the download area here maybe 3 weeks ago?

  • mparnelldmpmparnelldmp Posts: 5Questions: 1Answers: 0
    edited November 2017

    Ok so I've figured out that the call to oTable.page.len(250).draw() is causing this, I'm guessing the rendering isn't done by the time that the call to select() is called.

    Any ideas on what I could do to make these two calls syncronous?

    ```

                            oTable.page.len(250).draw();
    
    
                                oTable.rows().select();
    
    
                            $(this).addClass('on');```
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    If you are using server-side processing, then no, as the draw is async.

    You'd need to listen for the draw event to know when the data is loaded - e.g.

    oTable
      .one( 'draw', function () {
        oTable.rows().select();
      } )
      .page.len(250)
      .draw();
    

    Allan

  • mparnelldmpmparnelldmp Posts: 5Questions: 1Answers: 0

    The master himself!

    I forgot to mention these being serverside, but with your input I figured out a workaround, where I check if I've set selectAll true, in which case we select the rows.

                                oTable.on('draw', function () {
                                    if (selectAll) {
                                        oTable.rows().select();
                                        selectAll = false;
                                    }
                                });
    
    

    Thank you sir!

This discussion has been closed.