'select' and 'deselect' events triggering multiple times on row select

greggo47

I'm noticing, when I click on a checkbox to select/deselect a row, the select/deselect events trigger multiple times, causing the row to be added to my "selectedRows" array multiple times. I've read into using the table.rows( { selected: true } ).data(); function to get this data as well, but I would rather only store the necessary information instead of the whole row object, as my table is quite large (can be up to 40000 rows depending on how is logged in), and the less data in the array the better. Is there anything wrong with my event functions that could cause this issue? Has anyone seen an issue like this before?

``` groupTable
.on('select', function(e, dt, type, indexes) {

  const rowData = groupTable.row(indexes[0]).data();
  const portID = rowData.portID;

  $(`input.portCheckbox[data-id="${portID}"]`).prop('checked', true);
  addPort(portID); // adds portID to array keeping track of selected rows
})

groupTable
  .on('deselect', function(e, dt, type, indexes) {
    const rowData = groupTable.row(indexes[0]).data();
    const portID = rowData.PortID;

    $(`input.portCheckbox[data-id="${portID}"]`).prop('checked', false);
    removePort(portID); // removes portID to array keeping track of selected rows
  });```

kthorngren

Are you using the select checkbox as sown in this example. I build a test case from that example to show the checkbox selection/deselection causes only one event to occur:
http://live.datatables.net/popaviru/1/edit

Please update the test case to show the issue or provide a link to your page so we can help you debug why multiple events are occurring.

Kevin

greggo47

I believe the issue could be because I am using a columnDefs.render as my checkbox, and forcing a check upon selection. Here is my entire data table initialization code. Do you see any issues?

groupTable = $("#portsGroup").DataTable({
    data: data,
    columns: [
      { data: "PortID" },
      { data: "LocName" },
      { data: "NetPortID" },
      { data: "Network" },
      { data: "Model" },
      { data: "Connector(s)[,</br> ]" },
      { data: "Level" },
      { data: "Address" },
      { data: "City" },
      { data: "Province" },
      { data: "Postal Code" },
    ],
    columnDefs: [
      {
        targets: [0],
        className: "select-checkbox",
        render: function(data, type, row, meta) {
          return `<div class="rowHeight d-flex align-items-center">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input portCheckbox" data-id="${row.PortID}" value="${row.PortID}" netcode="${row.NetCode}" netPortID="${row.NetPortID}" type="checkbox">
                        <span class="form-check-sign"></span>
                      </label>
                    </div>
                  </div>`;
        }
      },
    ],
    select: {
      style: 'multi',
      selector: 'td:first-child, td:first-child input.portCheckbox'
    },
    drawCallback: function() {
      let api = this.api();
 
      api.rows().every(function(rowIdx, tableLoop, rowLoop) {
        let data = this.data();
 
        if(selectedPorts.find(port => port.PortID === data.PortID)) {
          api.row(rowIdx).select();
        }
      });
    },
    order: [[1, "asc"]],
    bPaginate: true,
    orderCellsTop: true,
  });

kthorngren

api.row(rowIdx).select();

This in the rowCallback will cause the select event to fire each time its called. Maybe you want to use user-select if you are wanting the event to fire only when the user selects a row.

Kevin

greggo47

Turns out the issue was related to my custom checkboxes. I am now using the datatable select extension to auto generate the checkbox, and I modified their CSS to get to look I need. This is a much simpler implementation and does not require an on select event listener. Thanks for your help