Deselect the previously selected rows from start, with a single click

Deselect the previously selected rows from start, with a single click

julitopjulitop Posts: 3Questions: 1Answers: 0

Hi, I have a Datatable with select (checkbox style) and the rows are shown selected or deselected depending on a value in the DB. When I deselect one of this rows selected by start I have to do double click. I suppose because "select" was thought in order to work selecting at start in the toggle working mode instead of deselecting. How can I resolve this, and diselecting this first time with one single click?

(Note: the followings selectings and deselectings works fine with one only click. The problem is only with the first deselecting)

Thanks.

This question has an accepted answers - jump to answer

Answers

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

    Without actually seeing it in action its hard to say. My guess is its how you are selecting the rows when the table is loaded. Are you using the select API to do the initial selection?

    For help in debugging please post a link to your page or a test case replicating the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • julitopjulitop Posts: 3Questions: 1Answers: 0

    Hi Kevin!

    how you are selecting the rows when the table is loaded

    In the "complete" section:

    var tablista=$("#tablista").DataTable({      
          "processing": true,
          "jQueryUI":   true,
          "pagingType": "full_numbers",
    
          [...]
    
          "columnDefs": [{
                         "targets": 0,               
                         "orderable": false,
                         "className": "select-checkbox"
                         },
                         { "visible": false, "targets": 2 }],
          "select": {
                "style": "multi",
                "selector": "td:first-child",
                "info": false
          },
    
          [...]
    
          "complete": function(){
                          tablista.rows().every(function(index){
                                                  if (this.data()[6]=="S")
                                                    tablista.row(index).nodes().to$().find(".select-checkbox").parent().addClass("selected");
                                                });
                        }
           }
    

    Thanks!

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited March 2019 Answer ✓

    I'm guessing that the "complete" option is a copy/paste error because it should be "initComplete". I think that if you comment out the line "info": false in your select options you will find that it doesn't display the selected rows count/ . You will need to do more than just add the selected class. You will need to use the select() API. Something like this should work:

                                                  if (this.data()[6]=="S")
                                                    this.select();
    

    Kevin

  • julitopjulitop Posts: 3Questions: 1Answers: 0

    Hi Kevin,

    It worked. Thanks. I needed to use the methods of the API instead of adding and removing the class "selected".

    The "complete" option was OK because it's inside an ajax section that I omitted...sorry.
    The line "info" was pretty useful, thanks again.

    By the way, How can I use the API in order to know if a row is selected or not?
    I can't find any method like isSelected() or so on. At moment I'm using something like this:

    if ($(this).hasClass("selected"))
      (do A)
    else
      (do B)
    

    ...but I would like to use the API instead of managing the class "selected" like I've done before.

    Thanks again.
    Julio

This discussion has been closed.