How to migrate DataTables 1.10 select-checkbox to the new select extension

ltdeta

With dt 1.10.23 I am using a checkbox at first td as following

PHP variable output with a single-row example data

columnsDef: array (
  0 => 
  (object) array(
     'title' => '<input  type=\'checkbox\'  id=\'configCboToggle\' style=\'padding:4px 0 0 0;\' value=\'0\' title=\'alle\'/>',
     'visible' => true,
     'className' => 'dt-head-center dt-body-center',
     'orderable' => false,
     'searchable' => false,
     'targets' => 
    array (
      0 => 0,
    ),
  ),
  1 => 
  (object) array(
     'title' => 'ID',
     'visible' => true,
     'className' => 'dt-head-center dt-body-center',
     'orderable' => true,
     'searchable' => true,
     'targets' => 
    array (
      0 => 1,
    ),
  ),
)

data: array (
  0 => 
  array (
    0 => 
    array (
      'text' = '<div class="chkWrap configCbo" style="display:inline-block;"><input type="checkbox" id="configCbo0" />
               <i class="fa-regular fa-trash-can fa-custom-hl fa-lg icon-rowDel" title="not deletable"></i>
               <i class="fa fa-gear fa-custom-hl fa-lg icon-rowAction" title="no action!"></i>
             </div>'
      'dataConfig' => 'id&trade;ID&#9638;12&#9638;fedit1&#9638;12&loz;rowdel&trade;1&loz;rowedit&trade;1&loz;rowzaction&trade;1&loz;idza&trade;',
    ),
    1 => '17',
  ),
)

js snippet setting the data into the table

  rowCallback: function(nRow, aData) {
      $('td:eq(0)', nRow).html(aData[0].text);
      $('td:eq(0)', nRow).attr('data-config', aData[0].dataConfig);
  }

html code looks like

<tr>
 <td class="dt-head-center dt-body-center"
    data-config="id&trade;Spalte1&#9638;17&#9638;fedit1&#9638;17&#9638;Spalte9&#9638;&#9638;fedit10&#9638;&loz;rowdel&trade;2&loz;rowedit&trade;1&loz;rowzaction&trade;0&loz;idza&trade;COL1&OElig;17~COL2&OElig;ROUTE1~COL4&OElig;K'KGGGOOO~COL5&OElig;"
    style="cursor: pointer;">
    <div class="chkWrap configCbo" style="display:inline-block;">
        <input type="checkbox" id="configCbo0">
        <i class="fa-regular fa-trash-can fa-custom-hl fa-lg icon-rowDel" title="not deletable"></i>
        <i class="fa fa-gear fa-custom-hl fa-lg icon-rowAction" title="no action!"></i>
    </div>
</td>

</tr>

How can I use the new select extension without losing my custom div

allan

How can I use the new select extension without losing my custom div

You can't I'm afraid. If you want to use Select's checkbox, it is in a column on its own.

You should be able to continue using your existing code though - I don't see anything there that would cause backwards compatibility issues. You wouldn't get the benefits of Select's API integration though, which is perhaps what you want?

Allan

ltdeta

I believe I’ve found a solution. By styling the checkbox <td> and using the select extension, it works as expected. I also created a few test buttons that make use of some select features.

What do you think about that?

checkbox & select extension
https://jsbin.com/setinuz/2/edit?html,css,js,output

checkbox & select extension & scroller
https://jsbin.com/kunazef/1/edit?html,css,js,output