Cara mengambil data dari baris datatable

kami membagikan tutorial Cara mengambil data dari baris datatable mudah mudahan bermanfaat buat yang sedang mengerjakan project dan membutuhkan fitur ini pada datatablenya, semoga bermanfaat.

buat yang butuh demo disini demonya

Kode HTML

berikut kode html nya

<button id="btnSelectedRows">
  Tampilkan Value
</button>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th> <!-- this th is for checkbox-->
      <th>Product Name</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product Unit</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product MRP</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Selling Price</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Buying Price</th>
      <th></th> <!-- this th is for product status-->
    </tr>
  </thead>

  <tr id="C01P01">
    <td></td><!-- this td is for checkbox-->
    <td>Name 1</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td><!-- this td is for product status which is hidden-->
  </tr>

  <tr id="C01P02">
    <td></td><!-- this td is for checkbox-->
    <td>Name 2</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td><!-- this td is for product status which is hidden-->
  </tr>

  <tr id="C01P03">
    <td></td>
    <td>Name 3</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">false</td>
  </tr>

  <tr id="C01P04">
    <td></td>
    <td>Name 4</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td>
  </tr>

  <tr id="C01P05">
    <td></td>
    <td>Name 5</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td>
  </tr>
</table>

Kode Javascript

lalu kode javascriptnya

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

$('#btnSelectedRows').on('click', function() {

  $.each(table.rows('.selected').nodes(), function(i, item) {
    var id = item.id;
    var data = table.row(this).data();

    alert("Produt Id : " +
      id + " && product Status:  " + data[6]);
  });
})

admin

Seorang pengajar dan pembelajar yang mengurus lembaga pelatihan dan kursus komputer bernama LKP Naura

Baca Juga  Belajar Microsoft Excel: Meniadakan Hyperlinks Tanpa Mengganti Format