dimanche 3 mars 2019

Pre-selection of rows for datatable when checkbox plugin used

Haven't yet seen an example of this anywhere. My multi-selection datatable loads from an array and uses a Gyrocode checkbox plugin to build a checkbox column. I'm fine with assigning user selections to an array - see button at top of table which outputs to console. However, I need to send one, or several, pre-selections to the datatable on initialisation so that the table starts up with those selections already highlighted and checked. Those selections can change, so I guess they'd need to be sent to the table as a variable of some sort. I'm stumped as to how to do this with my data structured as it is, although ideally I want to keep it as it is. Any ideas anyone? https://jsfiddle.net/sg0o3bwL/1/

<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.10/js/dataTables.checkboxes.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css" rel="stylesheet" />

<button id="myselections" type="button" style="height: 20px; width: 150px;">See selections</button>

<form id="frm-example" action="/nosuchpage" method="POST">
  <table id="example" class="display select" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th></th>
        <!-- invisible col. for enable/disable separation -->
        <th>Order</th>
        <th>Sort</th>
        <th>Sort</th>
        <th>Sort</th>
        <th>Province</th>
        <th>City</th>
        <th>Status</th>
        <th>Sort</th>
        <th>Type</th>
      </tr>
    </thead>
  </table>
</form>




  $(function() {

  var MYdataSet1 = [
    ["", "1", "Bahrain", "Foulath", "Bahrain Steel BSCC", "Cobham", "Venice", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "2", "Bombay", "Foulath", "United Stainless Steel Company", "Ealing", "Rome", "x", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "3", "Bahrain", "Foulath (51%) :: Yamato Kogyo (49%)", "United Steel Company (Sulb)", "Kingston", "Milan", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "4", "Universal Rolling", "", "", "acton", "Arson", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "5", "Abul Khair Steel Products (AKSP)", "Jackson", "", "Barnes", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM", ""],
    ["", "6", "Bangladesh", "Anwar Isphat", "", "Sheen", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "7", "Baizid Steel", "Baizid Steel", "", "Mayfair", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "8", "Bengalh Steel Rolling Mills (BSRM)", "", "", "Park lane", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
  ];


// 'Initialise' DataTable

  var TradeDatatable = $('#example').DataTable({
    data: MYdataSet1,
    orderCellsTop: true,
    fixedHeader: true,
    scrollCollapse: true,
    paging: false,
    processing: true,
    orderCellsTop: true,

    'columnDefs': [{
        targets: 0,
        visible: false
      }, // This refers to the invisible column only - used to sort enabled from disabled rows

      {
        'targets': 1, // Refers to the Checkbox col. only
        'checkboxes': {
          'selectRow': true
        },
      },
      ],

    'select': {
      'style': 'multi'
    },

    "order": [
      [2, "asc"]
    ], // Default sorted column no.

    orderFixed: [0, 'desc'],
  });

//------------------

// List all ticked row selections

  $('#myselections').click(function(e) {

    var form = this;

    // Assume chkbxes to be in column 1 (col 0 is purposely blank)
    var rows_selected = TradeDatatable.column(1).checkboxes.selected();

    // Iterate over all selected checkboxes
    $.each(rows_selected, function(index, rowId) {

      // Create a hidden element
      $(form).append(
        $('<input>')
        .attr('type', 'hidden')
        .attr('name', 'id[]')
        .val(rowId)
      );
    });

    // Raw list of selected rows
    var RawRowNumbers = rows_selected.join(",");
    var CurrentSelectedArray = RawRowNumbers.split(','); // split string on comma

    function sortNumber(a, b) {
      return a - b;
    }
    CurrentSelectedArray.sort(sortNumber);
    console.log('Table selected_rows:', CurrentSelectedArray)

  });

});




Aucun commentaire:

Enregistrer un commentaire