File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<!-- js -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.js"></script>
<!-- searchpanes nightly -->   
<script src="https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.js?2022-06-01"></script>
<script src="https://nightly.datatables.net/searchpanes/js/searchPanes.bootstrap4.js?2022-06-01"></script>
<!-- select nightly -->
<script src="https://nightly.datatables.net/select/js/dataTables.select.js?2022-06-01"></script>
<!-- css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" rel="stylesheet" >
<link href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<!-- searchpanes nightly -->   
<link href="https://nightly.datatables.net/searchpanes/css/searchPanes.dataTables.css?2022-06-01" rel="stylesheet" type="text/css" />
<link href="https://nightly.datatables.net/searchpanes/css/searchPanes.bootstrap4.min.css?2022-06-01" rel="stylesheet" type="text/css" />
<!-- select nightly -->
<link href="https://nightly.datatables.net/select/css/select.dataTables.css?2022-06-01" rel="stylesheet" type="text/css" />
    <title>DataTables - JS Bin</title>
    <meta charset=utf-8 />
  </head>
  <body>
    <table id="debug" width="100%">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
        </tr>
      </thead>
    </table>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready(function() {
  var rowIds = [];
  var dataTable = $('table#debug').DataTable({
    dom: 'Bt',
    ajax: 'http://datatables.showroom.efficient.it/data/?simple',
    buttons: [
      {
        extend: 'searchPanes',
        config: {
          cascadePanes: true
        }
      }
    ],
    select: {
      style: 'multiple',
      selector: 'td.select-checkbox'
    },
    columns: [
      {
        name: 'selected',
        className: 'select-checkbox',
        defaultContent: '',
        searchPanes: {
          header: 'Selected?',
          show: true,
          options: [
            {
              label: 'yes',
              value: function(rowData, rowIdx) {
                if(rowIdx == 0) {
                  if(this.row(rowIdx, {selected: true}).any()) {
                    console.log('ROW 0 IS SELECTED');
                  }
                  else {
                    console.log('ROW 0 IS NOT SELECTED');
                  }
                }
                return this.row(rowIdx, {selected: true}).any();
              }
            },
            {
              label: 'no',
              value: function(rowData, rowIdx) {
                return !this.row(rowIdx, {selected: true}).any();
              }
            }
          ]
        }
      },
      {
        data: 'first_name'
      },
      {
        data: 'last_name'
      },
      {
        data: 'email'
      }
    ],
    stateSave: true,
    serverSide: true
  });
  dataTable.on('select.dt deselect.dt', function(event, dt, type, indexes) {
    var row = dataTable.row(indexes);
    var data = row.data();
    if(data) {
      switch(event.type) {
        case 'select':
          if(rowIds.indexOf(data['DT_RowId']) === -1) {
            rowIds.push(data['DT_RowId']);
            rowIds.sort();
            console.log('SELECT EVENT: REBUILD PANE 0');
            dataTable.searchPanes.rebuildPane(0, false);
            console.log('SELECT EVENT: REBUILD DONE');
          }
          break;
        case 'deselect':
          if(rowIds.indexOf(data['DT_RowId']) !== -1) {
            rowIds.splice(rowIds.indexOf(data['DT_RowId']), 1);
            console.log('DESELECT EVENT: REBUILD PANE 0');
            dataTable.searchPanes.rebuildPane(0, true);
            console.log('DESELECT EVENT: REBUILD DONE');
          }
          break;
      }
    }
  });
});
5 warnings
Line 30: Use '===' to compare with '0'.
Line 69: ['DT_RowId'] is better written in dot notation.
Line 70: ['DT_RowId'] is better written in dot notation.
Line 78: ['DT_RowId'] is better written in dot notation.
Line 79: ['DT_RowId'] is better written in dot notation.
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers