Checkboxes extension approach - minimal DOM

by princeofabyss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
<form id="questions-form">
  <table id="questions-pool" width="100%">
    <thead>
      <tr>
        <th></th>
        <th>Questions Pool</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="move-handle"></td>
        <td>Question 1?</td>
        <td>387</td>
        <td>387</td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 2?</td>
        <td>386</td>
        <td>386</td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 3?</td>
        <td>385</td>
        <td>385</td>
      </tr>
      <tr>
        <td class="move-handle"></td>
        <td>Question 4?</td>
        <td>384</td>
        <td>384</td>
      </tr>
    </tbody>
  </table>
</form>
<button id="get-selected" type="button">Get selected</button>

CSS

#questions-pool tr td:last-child,
#questions-pool tr th:last-child {
  text-align: right
}

#questions-pool tr td:not(.dataTables_empty):nth-child(1) {
  cursor: move;
  font-size: 13px;
}

.questions-postfields {
  display: flex;
  flex-direction: column;
}

#questions-pool tr td:not(.dataTables_empty):nth-child(1)::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-size: 13px;
}

#questions-pool_wrapper #upper-controls,
#questions-pool_wrapper #lower-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  background: #c1c1c1;
}

#questions-pool_wrapper #upper-controls #questions-pool_length,
#questions-pool_wrapper #lower-controls #questions-pool_info {
  padding-left: 15px;
}

#questions-pool_wrapper #upper-controls #questions-pool_filter {
  padding-right: 15px;
}

#questions-pool_wrapper #upper-controls #questions-pool_length label,
#questions-pool_wrapper #upper-controls #questions-pool_length select,
#questions-pool_wrapper #upper-controls #questions-pool_filter label {
  float: none;
  margin: 0;
}

#questions-pool_wrapper #upper-controls #questions-pool_length label,
#questions-pool_wrapper #upper-controls #questions-pool_filter label,
#questions-pool_wrapper #lower-controls #questions-pool_info {
  font-weight: 700;
}

#questions-pool_wrapper #upper-controls #questions-pool_length select,
#questions-pool_wrapper #upper-controls #questions-pool_filter input {
  font-weight: 400;
}

#questions-pool_wrapper #upper-controls #questions-pool_filter input {
  float: none;
  margin: 0 0 0 5px;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate a {
  color: #555;
}

#questions-pool_wrapper #lower-controls #questions-pool_paginate .paginate_button {
  display: inline-block;
  padding: 5px 10px;
  margin-left: 10px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 2px;
  font-weight: 700;
}

#questions-pool_wrapper...

JavaScript

jQuery(function($) {
  $('#questions-pool tbody').sortable({
    connectWith: '#questions-pool tbody',
    handle: 'td.move-handle',
  });

  var questions = $('#questions-pool').DataTable({
    ordering: false,
    dom: '<"#upper-controls"lf>t<"#lower-controls"ip>',
    lengthMenu: [
      [10, 50, 100, -1],
      [10, 50, 100, 'All']
    ],
    initComplete: function(settings) {
      var api = this.api();
      var selected = [387, 386];

      api.cells(
        api.rows(function(idx, data, node) {
          return (selected.indexOf(Number(data[2])) >= 0) ? true : false;
        }).indexes(),
        3
      ).checkboxes.select();
    },
    columnDefs: [{
      targets: 3,
      checkboxes: {
        selectAllPages: false,
      }
    }],
  });

  $('#get-selected').click(function(event) {
    var form = $('#questions-form');

    $(form).find('.questions-postfields').remove();

    console.log('Deleted previous fields');

    $.each(questions.column(3).checkboxes.selected(), function(index, rowId) {
      $(form).append(
        $('<input>')
        //  .attr('type', 'hidden')
        .attr('name', 'questions[]')
        .attr('class', 'questions-postfields')
        .val(rowId)
      );
    });
  });
});