Блог

Нужен код начальной таблицы с флажком на кнопке сохранения, для этого нужно вернуть выбранную строку флажка.

 <button id="btnSelectedRows">
  Get Selected Rows
</button>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td></td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td></td>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td></td>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td></td>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td></td>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td></td>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td></td>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td></td>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td></td>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td></td>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>$198,500</td>
    </tr>
  </tbody>
</table>

var table;
$(document).ready(function() {
  table = $('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }, {
      "targets": [2],
      "visible": false,
      "searchable": false
    }],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    order: [
      [1, 'asc']
    ]
  });
});

$('#btnSelectedRows').on('click', function() {
  var tblData = table.rows('.selected').data();
  var tmpData;
  $.each(tblData, function(i, val) {
    tmpData = tblData[i];
    alert(tmpData);
  }); 
})
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js">
  

скрипка