columnDefs: [
      {
        targets: 0,
        className: 'select-checkbox'
      }
    ],

stopped working.
It seems that it happened in version 3.1.1.

Checkbox works with DataTables styling.

Test case:
https://live.datatables.net/moyefodo/1/edit

KR,
Björn H

<table id="dt_system" class="table table-hover headingTable" width="100%">

the css color variables look like this:

/* Define Global Variables to be used throughout the sheet */
:root {
  --FontFamily: Aptos, "Trebuchet MS", Tahoma, Calibri, Roboto, Helvetica;
  --SmallFontFamily: "Aptos Narrow", Tahoma, Calibri, "Roboto Condensed", Helvetica;
  --LineHeightCompact: 1.1;
  --MenuBG: #525357;  /* Typically same as ParamBG */
  --MenuFontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --MenuFontSize: 8pt; /* Typically same as SubDataFontSize */
  --SubMenu1BG: #3A3A3D; /* Typically 10% darker/lighter ParamBG */
  --SubMenu1FontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --SubMenu2BG: #222224; /* Typically 20% darker/lighter ParamBG */
  --SubMenu2FontColor: #E5E2DA; /* Typically same as ParamFontColor */
  --ParamBG: #525357;
  --ParamFontColor: #E5E2DA;
  --ParamInputBG: #DEE1D6; /* Typically same as ParamFontColor */
  --ParamInputFontColor: #171A18; /* Typically same as ParamBG */
  --ParamFontSize: 12pt;
  --HeadBG: #394E60; 
  --HeadFontColor: #E5E2DA;
  --HeadFontSize: 18pt;
  --SubHeadBG: #635554;
  --SubHeadFontColor: #E0E5CF;
  --SubHeadInputBG: #F0F8FF; /* Typically same as SubHeadFontColor */
  --SubHeadInputFontColor: #191970; /* Typically same as SubHeadBG */
  --SubHeadFontSize: 12pt;
  --DataBG: #848973;
  --DataBGHover: #ACB396; /* to highlight selected row */
  --DataFontColor: #171A18;
  --DataFontSize: 10pt;
  --DataLinkHover: #C7CCB8; /* Typically same as SubDataBG */
  --SubDataBG: #C7CCB8;
  --SubDataFontColor: #171A18;
  --SubDataFontSize: 8pt;
  --subDataLinkHover: #635554; /* Typically same as SubNeadBG */
  --DataSelectedOutline: #C7CCB8; /* Typically same as SubDataBG */
  --dt-row-selected: #C7CCB8; /* Typically same as SubDataBG */
}

the current css attempt looks like this but i tried so many combinations without success

/* Selected Row Background */
table.dataTable tbody > tr.selected td {
  box-shadow: var(--DataSelectedOutline) !important;
  background-color: var(--DataBG) !important;
  color: var(--DataFontColor) !important;
}

/* Selected Cell Background, outline, fontColor */
table.table tr.data td.focus {
  box-shadow: var(--DataSelectedOutline) !important;
  outline-color: var(--DataSelectedOutline) !important;
  background-color: var(--DataBG) !important;
  color: var(--DataFontColor) !important;
}

the javascript has this for the keys and select options

keys: {
      editor: systemEditor,
      blurable: true,
      columns: '.editable'
},

select: {
     selector: 'td:first-child',
     blurable: true,
     style:    'os',
     headerCheckbox: false
},

It is probably a stupid question but I am not able to do the following things below:
1./ How to copy, export, ... all lines from a DataTable if no lines are selected (even if I see 10 lines on 50)

Yet in this example it works just fine without doing anything special:
https://datatables.net/extensions/buttons/examples/html5/simple.html

2./ How to avoid to select a line when clicking on the button "Action" (see DataTable without checkbox)

Othewise, if you select all lines (with checkbox in header) and unselect all, there is a small issue in html (see screenshot)

can you confirm this behavior.

thanks in advance for your help and have a nice day.

Description of problem:

When a table has links and are selected, the following CSS rule is applied causing the link to be too dark (at least in my opinion):

table.dataTable > tbody > tr.selected a {
    color: rgb(9, 10, 11);
    color: rgb(var(--dt-row-selected-link));
}

There might be a reason for this, but I always find myself overwriting it with the standard selected CSS to show the link as white:

/* Make links white when selected */
table.table.dataTable>tbody>tr.selected a {
    box-shadow: inset 0 0 0 9999px rgb(13, 110, 253);
    box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
    color: rgb(255, 255, 255);
    color: rgb(var(--dt-row-selected-text));
}

I would vote to just use the normal CSS to make the link white and let a user modify it for the cases where they want a different color.

Debugger code (debug.datatables.net): https://debug.datatables.net/ufixot

Error messages shown: No Error Messages.

Description of problem:
I'm using the "Select" extension in combination with "Editor" and utilizing server side processing for CRUD operations. When I select a row(s) and edit them, they often come off the list due to a change in it's data after the .draw() event. This is expected and desired, but the selected rows (positionally, not in terms of data) remain selected. So in effect, whatever new rows replaced the position of the rows I edited, are now selected instead.

My approach was to hook into the "XHR.DT" or "DRAW" events and utilize the API to deselect the rows. However it seems there is a race condition of some sort, because nothing appears to happen. But if I wrap the .deselect() statement in a SETTIMEOUT for 5000ms, the rows are deselected as expected.

So, my question is this: Is there an option which deselects rows in this type of scenario? If there isn't, which event should I hook into in order for my call to the .deselect() function to have its effect?

If I were to click the edit button first, close the edit form and then repeat the above, the delete button will then work as expected.

// data-tables-productsection.js
// set in base.html.twig
let sectionId = typeof entityId === "undefined" || !entityId ? {} : entityId;

var productEditor = new $.fn.dataTable.Editor({
    ajax: '/ajax/product-section-products/' + sectionId,
    fields: [
        {
            label: 'Ref:',
            name: 'ref'
        },
        {
            label: 'Name',
            name: 'name'
        }
    ]
})

var editor = new $.fn.dataTable.Editor( {
    ajax: '/ajax/product-section/' + sectionId,
    table: '#productsection-datatable',
    fields: [
        {
            label: "Rank:",
            name: "product_section.rank",
            fieldInfo: 'Enter an existing rank only.  It will become that rank and increase or decrease the ones inbetwen to make room.  Alternatively drag and drop.',
            attr: {
                type: 'number',
                min: 1,
                max: 999,
                step: 1
            }
        },
        {
            label: "Product:",
            name: "product_section.product_id",
            type: "datatable",
            editor: productEditor,
            optionsPair: { // needed to pre-select the product id
                value: "id"
            },
            config: {
                ajax: '/ajax/product-section-products/' + sectionId,
                columns: [
                    {
                        title: 'Ref:',
                        data: 'ref'
                    },
                    {
                        title: 'Name',
                        data: 'name'
                    }
                ]
            }
        },
        {
            label: "",
            name: "product_section.section_id",
            attr: {
                type: 'number',
                style: 'display:none;'
            },
            def: function() {
                return sectionId;
            }
        }
    ]
} );

// this event isn't triggered, but would be good for validating server side.
// editor.on('validatedCreate', function() {
//  console.log('here');
// });

editor

.on( 'postCreate postRemove postEdit', function () {
// After create or edit, a number of other rows might have been effected -
// so we need to reload the table, keeping the paging in the current position
table.ajax.reload( null, false );
} );

var table = $('#productsection-datatable').DataTable({
dom: 'Bfrtip',
ajax: '/ajax/product-section/' + sectionId,
paging: false,
rowReorder: {
dataSrc: 'product_section.rank',
editor: editor,
selector: 'td:first-child'
},
columns: [
{
data: null,
className: "dt-center w-5 reorder",
defaultContent: '<i class="dripicons-menu"></i>',
orderable: false
},
{
data: "product_section.rank",
className: "dt-center w-5",
orderable: true
},
{
data: "product.ref",
className: "",
orderable: false
},
{
data: "product.name",
className: "",
orderable: false
}
],
columnDefs: [

],
keys: true,
info: true,
select: true,
order: [[1, 'asc']],
buttons: [
    { extend: 'create', editor: editor, text: 'Add' },
    { extend: 'edit',   editor: editor },
    { extend: 'remove', editor: editor }
],

});

// DataTablesAjaxController.php

#[Route('/ajax/product-section/{section}')]
#[IsGranted('IS_AUTHENTICATED_REMEMBERED')]
public function productSection(Section $section, EntityManagerInterface $em, Request $request): Response
{
    $sectionId = $section->getId();
    $db = new Database(array(
        "type" => "Mysql",
        "pdo" => $em->getConnection()->getNativeConnection()
    ));

    $json =
        Editor::inst($db, 'product_section')
            ->fields(
                Field::inst('product_section.rank')
                    ->validator(Validate::notEmpty()),
                Field::inst('product_section.id'),
                Field::inst('product_section.product_id')
                    ->validator(Validate::notEmpty()),
                Field::inst('product_section.section_id'),
                Field::inst('product.ref'),
                Field::inst('product.name'),
                Field::inst('product.rank'),
                Field::inst('product.id'),
            )
            ->leftJoin('product', 'product_section.product_id', '=', 'product.id')
            ->where('section_id', $section->getId())
            ->on('preRemove', function ($editor, $id, $values) use ($sectionId) {
                // On remove, the sequence needs to be updated to decrement all rows
                // beyond the deleted row. Get the current reading order by id (don't
                // use the submitted value in case of a multi-row delete).
                $order = $editor->db()
                    ->select('product_section', 'rank', array('id' => $id))
                    ->fetch();

                $editor->db()
                    ->query('update', 'product_section')
                    ->set('rank', '`rank`-1', false)
                    ->where('rank', $order['rank'], '>')
                    ->and_where('section_id', $sectionId, '=')
                    ->exec();
            })
            ->on('preEdit', function ($editor, $id, $values) {
                // checks if we're editing via form or drag and drop.  name only present on editing form.
                if (isset($values['product_section']['product_id']) ?? false) {
                    $values = $values['product_section'];

                    $targetRank = (int)$values['rank'];
                    // check rank exists aleady
                    $order = $editor->db()
                        ->select('product_section', 'id', array('rank' => $targetRank))
                        ->fetch();
                    // don't allow user to enter a rank that doesn't already exist as this will create gaps
                    if ($order === false) {
                        return false;
                    }

                    $originalRank = (int)$editor->db()
                        ->select('product_section', 'rank', array('id' => $id))
                        ->fetch()['rank'];

                    if ($targetRank === $originalRank) {
                        return true;  // valid, but don't re-order anything
                    }

                    // higher rank (lower those inbetween to make room)
                    if ($targetRank > $originalRank) {
                        $editor->db()
                            ->query('update', 'product_section')
                            ->set('rank', '`rank`-1', false)
                            ->where('rank', $originalRank, '>')
                            ->and_where('rank', $targetRank, '<=')
                            ->and_where('section_id', (int)$values['section_id'], '=')
                            ->exec();
                    }

                    // lower rank (increase those inbetween to make room)
                    if ($originalRank > $targetRank) {
                        $editor->db()
                            ->query('update', 'product_section')
                            ->set('rank', '`rank`+1', false)
                            ->where('rank', $originalRank, '<')
                            ->and_where('rank', $targetRank, '>=')
                            ->and_where('section_id', (int)$values['section_id'], '=')
                            ->exec();
                    }
                }
            })
            ->on('preCreate', function ($editor, $values) {
                $values = $values['product_section'] ?? null;
                if (isset($values['product_section']['product_id']) ?? false) {
                    // If no value submitted, then use the max+1 as the new value
                    $next = $editor->db()->sql('select IFNULL(MAX(`rank`)+1, 1) as next FROM product_section WHERE section_id = ' . (int)$values['section_id'])->fetch();
                    $editor->field('rank')->setValue($next['next']);
                } else {
                    // On create update all the other records to make room for our new one
                    $editor->db()
                        ->query('update', 'product_section')
                        ->set('rank', '`rank`+1', false)
                        ->where('rank', $values['rank'], '>=')
                        ->and_where('section_id', (int)$values['section_id'], '=')
                        ->exec();
                }
            })
            ->process($_POST)
            ->json(false); // false to return the json instead of echo.

    return JsonResponse::fromJsonString($json);
}

I have tried to create a test case but there is any issue adding the libs. If you can give me any clue about how to finish the test case I will: https://live.datatables.net/kaquqexa/3/

I have one field of type select2 (blend) with option: multiple and other (format) allowing only single values. When I load the first time the page and edit a row the modal editor is loaded without the selected values. However, if I edit a second time the values are loaded.

var editor = new DataTable.Editor({
        ajax: {
            create: '/save/${id}',
            edit: '/update/',
            remove: '/delete/',
            idSrc: 'id'
        },
        fields: [
            {
                name: 'DT_RowId',
                type: 'hidden',
            },
            {
                label: 'Blend',
                name: 'blend',
                type: "select2",
                separator: ":",
               opts: {
                    "multiple": true,
                    "allowClear": true,
                    "separator": ":",
                       "placeholder": {
                           "id": "",
                           "text":"(Select blends)"
                       }
                },
                options: [
                    { label: '', value: '' },
                    { label: '9000 Extra', value: '9000'},                    
                    { label: '9001 RA', value: '9001'},                    
                    { label: '9001 Col', value: '9001'},                    
                    { label: '900R Classic', value: '900R'}
                    
                ]
            },
            {
                label: 'Format',
                name: 'format',
                type: 'select2',
                options: [
                    { label: '', value: '' },
                    { label: '0000 Auxiliary Materials', value: '0000' },                    
                    { label: '0001 Lid 50g.', value: '0001' },
                ]
            },
            {
                label: 'Reference',
                name: 'reference',
                type: 'datatable',
                config: {
                    columns: [
                        {
                            title: 'Reference',
                            data: 'label'
                        }
                    ]
                },
                options: [
                        {label:'', value:''},
                        {
                            label: '9022 sp.20 Kg',
                            value: '8020'
                        },
                        
                        {
                            label: '22G0 spr.300Kg.',
                            value: '8023'
                        },
                        
                    ]
            },
            {
                label: 'Quantity',
                name: 'quantity'
            },
            {
                label: 'Unit',
                name: 'unit',
                def: 'KG',
                type: 'select',
                options: [
                     {label: 'Caja', value: 'BOX'},                    
                     {label: 'Kilo', value: 'KG'},
                ]
        },
        {
            label: 'Status',
            name: 'status',
            def: 'NO_ACTIVED',
            type: 'select',
            options: [
                {label: 'Activo', value: 'ACTIVED'},                
                {label: 'No activo', value: 'NO_ACTIVED'},
            ]
        },
        {
            label: 'quantity to reduce',
            name: 'quantityToBeReduced',
        },
                
        ],
            table: '#items'
        })
    ;




   var table = new DataTable('#items', {
        ajax:  {
            url: '/list/${id}'
        },
        columns: [
            { data: 'blends.description' },
            { data: 'formats.description' },
            { data: 'references.description' },
            { data: 'quantity' },
            { data: 'units.description' },
            { data: 'statuses.description' }            
        ],
        layout: {
            topStart: {
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'edit', editor: editor },
                    { extend: 'remove', editor: editor }
                ]
            }
        },
        select: true
    });

Thank you very much.

I actually thought that it works flawless with two or more sort order configurations, but it turns out that there is a similar flaw. When setting the sort order of the table to none by clicking on the first column and pressing the reset button ends up in just resetting the second column. Where as doing it on any column > 1, it always resets the correct order.

I added the state to the table, because we have it too, but it turned out that it seems not to impact the behaviour.
Is this behaviour intended? Is there any way to prevent this?

Please let me know if anything is unclear.

I could not find an entry in the DataTablesStaticRender for the DataTable.render.select = function (valueProp, nameProp)

would it be possible to add it?

I have a table with toggleable set to true. I use the selected row to filter a secondary table (which is actually done using ajax.reload() on the secondary table during the main table's select event.

If I select Row A and then Row B, it fires deselect on Row A and select on Row B, which reloads the secondary table like I would like, but when I deselect Row B for no other row it does not reload the secondary table because there was no select.

If I add the ajax.reload() on the secondary table to the deselect event on the main table then when I select Row A and then Row B, deselect fires on Row A and select fires on Row B causing the secondary table to do two ajax.reload() although only one is needed.

I can introduce a new variable outside the tables themselves to address this, but I was hoping something out-of-the-box exists.

I've recently upgraded to DataTables v2 and appreciate the improved checkboxes feature on the Select plugin. One thing I noticed though - if I call destroy() on my DataTable, the header <input> field remains and I have to remove it manually like this:

$('#main-table > thead > tr > th > input').remove();

Not a big problem, but I would have expected the HTML to be reset to the original state, per the documentation.

-David.

For example, using the Select initialization example: https://www.datatables.net/extensions/select/examples/initialisation/simple.html

1) Go to Page 6 and select "Zorita Serrano"
2) In the search type "S" for San Francisco

The table is reset to the first page of the search results and the selected record goes to the second page.

I've tried to use the (excellent) row().show() plugin or the plan old page() on the search but then it requires a draw(), which in turn triggers another search, which triggers another draw(), etc., causing an overflow.

Although this ability would be helpful overall, it would be particularly useful when using DataTables as an input so that it is highlighted to the user that there is already a selection made even though they are searching.

Any suggestions that would help me escape that search draw() loop?

<span class='.ServerTag'>myhostname.mydomain.com</span>

I use the "select" extension to be able to select some rows out of the whole list.

Is there a way to get all the "Host Names" with the class "ServerTag" from the selected list ?

Best regards,
David

My use case:
The user selects a record, all non-selected records are excluded from display. The user edits the record and saves it. Since the table order is influenced by the editing the selected record is usually no longer on the same page. Hence the user sees an empty page because the selected record - which is the only visible record - is no longer on that page. I would like to navigate to the page of the selected record on "submitSuccess".

Referencing the docs here: https://datatables.net/reference/option/select.selector

select: {
    style: 'single',
    selector: 'td:not(:last-child)' // no row selection on last column
},

OR

select: {
    style: 'single',
    selector: 'td:not(:first-child)' // no row selection on first column
},

Both of these work as expected but I want to combine them. I have tried:

select: {
    style: 'single',
    selector: 'td:not(:first-child), td:not(:last-child)'
},

but that breaks it completely. What am I missing, any thoughts? Thanks!

First up, thanks Allan and co for all your work on DataTables! I've been using it for a while now and find it very useful...

I've got a situation where I have several similar (not identical, but close) datatables in different tabs on a single page. I want to enable 'os' style selection and somehow keep the selected items synchronised between the tables. i.e. any user initiated select action on any table propagates to the other tables.

See the test case of a scaled down example where I have implemented something similar to what I need, by using the the 'user-select' event, and basically re-implementing the select action. In this example though I've basically replicated the 'multi' select style, whereas I want the select style to be the 'os' style.

I've looked at using the 'select' event, which gives indexes of the new selection, except that this event is triggered whether the select is initiated by the user or the API. I need to act on the event if it's initiated by the user, but not the API, otherwise I would just create an endless loop.

Am I missing an obvious way to do this? Any ideas or suggestions?

Thanks,
Nick

The select tick mark is too big and placed too low compared to the checkbox. I have modified the select.bootstrap.css file as follows to have the corrected.

table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
  content: "\2714";
  font-size: 13px;
  margin-top: -11px;
  margin-left: -4px;
  text-align: center;
  /*text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;*/
}

May be should be corrected in your css file.

This is my table:

  <table id="stekTable" class="table table-hover">
  <!-- <table id="stekTable" class="table table-striped table-hover"> -->

    <thead style="color: #F8F8FF; background-color: #191919 ">
      <tr>
        <th>Id</th>
        <th>Stek</th>
        <th>Type</th>
        <th>Water</th>
        <th>Beschrijving</th>
        <th>Plaats</th>
        <th>Latitude</th>
        <th>Eigenaar</th>
      </tr>
    </thead>
    <tbody>
      {% for stek, user, stektype in stekken %}
        <tr>  
          <td>{{ stek.id }}</td>
          <td>{{ stek.name }}</td>
          <td>{{ stektype.stektype }}</td>
          <td>{{ stek.water }}</td>
          <td>{{ stek.description }}</td>
          <td>{{ stek.place }}</td>
          <td>{{ stek.latitude }}</td>
          <td>{{ user.username }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

This is my JS:

  <script>
    $(document).ready(function () {
      var table = $('#stekTable').DataTable( {
          dom: 'Bfrtip',
          buttons: ['copy','excel'],        
          paging: true, 
          pageLength: 50,
          scrollY: '50vh',
          scrollCollapse: true,
          columns: [null, {orderable: false}, {orderable: false}, null, null, null,null, null],
          rowGroup: {
            dataSrc: '0',
            startRender: function ( rows, group ) {return group +' ('+rows.count()+' stekTypen)'}
          },
          select: { items: 'row', style:'single' }
      });

      table.on( 'select', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            var x = table.rows().data().pluck('Stek');
            document.getElementById('selectedStek').value = x;  
            document.getElementById("selectedStek").style.color = "blue"; 
        }
      });

      table.on( 'deselect', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            document.getElementById('selectedStek').value = "Geen stek geselecteerd"; 
            document.getElementById("selectedStek").style.color = "blue"; 
        }
      });
      
    });
   
  </script>

I think the problem is in this code block:

      table.on( 'select', function ( e, dt, type, indexes ) {
        if ( type === 'row' ) {
            var x = table.rows().data().pluck('Stek');
            document.getElementById('selectedStek').value = x;  
            document.getElementById("selectedStek").style.color = "blue"; 
        }
      });

I have tried many things and almost threw my laptop out of the window.

With this statement for x I get [object Object] - that's is something !

But I am not able to access the properties.
I tried x[0], x[1], x.name, ...

I need some help with this.

I know the main table can be filtered using $aaa->where( '$table.$field', $target, '=');
but i also need the options to be filtered....

Something like adding 'WHERE user = $variable at the location shown with the ///// below

$table = Main Datatable Source
$table has two fields (field 1 & 4) in it corresponding to lists from 2 other tables (table1 and table4)

$selects = array('field1', 'field4');
$selectstable = array('table1', 'table4');
$selectslabels = array('field2', 'field5');

(field2 would be a value from table1 corresponding to field1)
(field5 would be a value from table2 corresponding to field4)

While table4 may have 15 items in it, I only want the items where possibly field 7 from table 4 is 0

foreach($selects as $select){
    $aaa ->field(Field::inst($table.'.'.$select)
                  ->options( Options::inst()->table( $selectstable[$cycle] )
                      ->value( 'id' )
                         ->label( $selectslabels[$cycle] ))
                         ->validator( Validate::dbValues()));
    $aaa ->field(Field::inst( $selectstable[$cycle].'.'.$selectslabels[$cycle]));
    $aaa ->leftJoin( $selectstable[$cycle],$selectstable[$cycle].'.id', '=', $table.'.'.$select//// );
    $cycle = $cycle + 1;
}

table.on("select.dt deselect.dt", function (e, dt, type, indexes) { /* my code */ })

For the logic of my app, I need to pass some data along when calling deselect(). But deselect(), doesn't take in any parameter.
I tried to 'simulate' the deselect.dt event via:

table.trigger('deselect.dt', {dataToBePassed});

But the _on() _listener callback won't be called.
Any Idea on how I could deselect all row while passing data to the event?

Thanks!!!

http://live.datatables.net/siracilo/1/edit

Link to test case: http://live.datatables.net/qifibobo/1/edit

Description of problem:
I use the latest version of Datatables with Bootstrap 5. I use the Select extension with Internationalization with Spanish language and Checkbox selection.

My problem is that the information of rows, columns and cells is always shown without selecting, using Datatables without language this does not happen, it only shows this information only when a row, column or cell is selected.

Is there a way to hide the row, column, and cell information when these have not been selected and only show the information once one of them is selected, as is the case with Datatables in English.

I hope I have explained myself well. Thanks in advance.

I have uploaded source code here, issue is when I click any row it is not highlighting. Initially, it worked but after sometime it stopped working.

can someone please help me with this issue.

I've tried with rowCallback

      rowCallback: function(row, data, index) {

              var cellValue = data["descrizione"];

              if($(cellValue).find('.favourite')){

               dataTable.row().select();

              }
            }

But all it does is select the first row and not the one with .favourite class. Can anybody help me please? many thanks

For Bootstrap4 and Bootstrap5 the margin-top was previously -6px but now it is set to -2px which is to low as seen in the example. For the DataTables CSS it is still set at -6px.

Select CheckBox and Bootstrap5 CSS

Select CheckBox and DataTable CSS

Here's the code of table initialization:

prestDaSelezionareTable = $('#prestDaSelezionareTable').DataTable({
                    ajax: {
                        url: url,
                        dataSrc: ""
                    },
                    columns: [
                        {"data": "codice"},
                        {"data": "prestazione"},
                        {"data": "statoPrestazione"},
                        {"data": "giorno"},
                        {"data": "sconto"}
                    ],
                    columnDefs: [
                        {
                            targets: 'thHidden',
                            visible: false
                        },
                        {
                            targets: COLONNA_GIORNO,
                            render: $.fn.dataTable.render.moment('MMM D, YYYY HH:mm:ss A', 'DD/MM/YYYY')
                        }],
                    language: {
                        "url": "//cdn.datatables.net/plug-ins/1.11.3/i18n/it_it.json"
                    },
                    select: {
                        style: 'api',
                        info: false
                    },                   
                });

Thanks for the suggestions.
Regards