Is there a way to use 'multi' and 'single' selection together?

sol

Hi all,
It's been a lot of help. Thank you always.

I put the check box in the first column of the table. (by using datatables.net-select-dt)
I want to use these checkboxes for multi selection, and use rows for single selection.
(Just in case you don't understand, let me give you a reference. It's the same with AWS EC2 instance Table....)

For your information, it's a vue-based project.
I try these things.

• Multi Selection (both row and checkbox)

<DataTable
   :options="{
      select: {
          style: 'multi',
      },
   },
></DataTable>

• Single Selection (both row and checkbox)

<DataTable
   :options="{
      select: true,
   },
></DataTable>

• Single Selection for first-child (checkbox)

<DataTable
   :options="{
      select: {
          selector: 'td:first-child',
      },
   },
></DataTable>

• Single X Multi Selection (It's just my idea, haha, Of course it's failed )

<DataTable
   :options="{
      select: [
         {
             style: 'single',
             selector: 'tr',
         },
         {
             style: 'multiple',
             selector: 'td:first-child',
         },
      ],
   },
></DataTable>

sivakumarlanka

var table=    $('#id').DataTable({
       "paging": 'false',
       "searcing":'false',
       "order": [],
       "dom": 'Bfrti', 
       columnDefs: [ {orderable: false,className: 'select-checkbox',targets:   0} ],select: {style:    'os',selector: 'td:first-child' },
       buttons: [{extend :'csv',text: 'Export CSV',exportOptions: {columns: ':not(.notexport)'}}],
       select: true,
        'select': {
        'style': 'multi'
        }, 
        'checkboxes': {
        'selectRow': true
        },                                                                          
      });

This might help

sol

@sivakumarlanka , Thanks for your comment.
I'm sorry but is your comment 'to multiple select the checkboxes and single select of row'?
It doesn't work to me

Your code has 3 select tags, and I'm afaid that there will be conflict along them.
1. select: {style: 'os',selector: 'td:first-child' },
2. select: true,
3. 'select': { 'style': 'multi' },

and also, checkboxes : { selectRow: true} <-- Is this option Gyrocode's?
Several discussions has that option, but maybe because I don't use gyrocode, that option doesn't work to my code..

allan

I want to use these checkboxes for multi selection, and use rows for single selection.

Build into Select, no, there isn't a way to do what you are looking for I'm afraid. Its event handler operates in one of the modes only.

However, what you want could be achieved using the API. Set up Select to work on the first child in multi or os mode. Then add an event listener to all the other columns (td:not(.select-checkbox) for example as the selector), which will call rows().deselect() and then row().select() on the row clicked on. That would do what you are looking for.

Allan

sol

@allan , Hi,
I'm trying to do what you said, and I wonder the way to add hyperlink in the table.

I mean,
1. td:first-child is using to select 'multi' row,
2. can click the row for single,
3. one column has router-link(or button.. whatever)

Can I apply these 3 kinds of selecting event in one table?

column = [ {
title: 'Name'
data: 'name'
render: function(data) {
 return `<router-link to='/detail'>`+data+`</router-link>`
} ]

it doesn't work...

allan

Yes it is possible, but you'd need some custom code - specifically the event handler for option 2 - single click to select a single row.

The first one can be done like this.

Then add an event listener to the other columns (or perhaps just td:not(first-child) would be better) that will call rows().deselect() to first deselect any selected rows, and then row().select() on the row that was clicked on.

Finally use the API to select the row required from a button.

Allan