DataTable checkbox / DataTable with select

jmlp1327 commented 5 years ago

The rows must be selected, using the "click" or the "checkbox"

The rowers are not selected. The other tables work in a correct way. I tried to load an external script and I also write the code in a local script, inside the file but it does not work and the browser console does not display any kind of error.

I'm using MAMP and the version of MDB is the MDB-Free_4.7.5. I run in in Safari and Chrome.

Resources (screenshots, code snippets etc.)

I followed all the steps in the tutorial, including the scripts for the tables

<link href="css/addons/datatables.min.css" rel="stylesheet">

<script type="text/javascript" src="js/addons/datatables.min.js"></script>

Here is the complete code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design Bootstrap</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
  <!-- MDBootstrap Datatables  -->
  <link href="css/addons/datatables.min.css" rel="stylesheet">
</head>

<body>

<table id="dt-select" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

<table id="dt-basic-checkbox" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th class="th-sm">Position
      </th>
      <th class="th-sm">Office
      </th>
      <th class="th-sm">Age
      </th>
      <th class="th-sm">Start date
      </th>
      <th class="th-sm">Salary
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td></td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name
      </th>
      <th>Position
      </th>
      <th>Office
      </th>
      <th>Age
      </th>
      <th>Start date
      </th>
      <th>Salary
      </th>
    </tr>
  </tfoot>
</table>

  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- MDBootstrap Datatables  -->
  <script type="text/javascript" src="js/addons/datatables.min.js"></script>
  <!-- DataTables Select CSS -->
  <link href="css/addons/datatables-select.min.css" rel="stylesheet">
  <!-- DataTables Select CSS -->
  <script href="css/addons/datatables-select.min.js" rel="stylesheet"></script>
  <script>
    var dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011-04-25", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011-07-25", "$170,750"]
];

$(document).ready(function () {
  $('#dt-basic-checkbox').dataTable({

  columnDefs: [{
    orderable: false,
    className: 'select-checkbox',
    targets: 0
  }],
  select: {
    style: 'os',
    selector: 'td:first-child'
  }
});

  var table = $('#dt-select').DataTable({
    data: dataSet,
    columns: [{
        title: "Name"
      },
      {
        title: "Position"
      },
      {
        title: "Office"
      },
      {
        title: "Extn."
      },
      {
        title: "Start date"
      },
      {
        title: "Salary"
      }
    ],

    dom: 'Bfrtip',
    select: true,
    buttons: [{
        text: 'Select all',
        action: function () {
          table.rows().select();
        }
      },
      {
        text: 'Select none',
        action: function () {
          table.rows().deselect();
        }
      }
    ]
  });
});

  </script>
</body>

</html>

jmlp1327 commented 5 years ago

I found the error. I had a bad reference for the datatables-select.min.js

The right reference is: <script src="js/addons/datatables-select.min.js" rel="stylesheet"></script>

jmlp1327 commented 5 years ago

Please, fix that error on the mdbootstrap page. https://mdbootstrap.com/docs/jquery/tables/datatables/

pglejzer commented 5 years ago

I added this to our list to do with high priority, we will fix this as soon as possible. Thanks and have a nice day.

jmlp1327 commented 5 years ago

This bug has been solved :) Thank you 👍

mdbootstrap / material-design-for-bootstrap

DataTable checkbox / DataTable with select #226