如何从数据表中的复选框选定行中获取数据

Question

我正在使用这个数据表。

我需要从所选行中获取ProductID& ProductStatus，其中 ProductID 嵌入在每行的 TR ID 中。

我没有在表格中显示 productStatus。但是我需要在选择行时获取状态。我可以在哪里添加它们？

请指导我....

代码

function loadClick() {

  const databaseRef = firebase.database().ref('S01/Products');
  var query = databaseRef.orderByKey().startAt("C09M03S03").endAt("C09M03S04").limitToFirst(6);

  query.once("value")
    .then(function (snapshot) {
      snapshot.forEach(function (childSnapshot) {

        var t = $('#products_table').DataTable();

        var key = childSnapshot.key;

        var MID = childSnapshot.child("productMID").val();
        var SID = childSnapshot.child("productSID").val();
        var ProductID = childSnapshot.child("productID").val();
        var name = childSnapshot.child("productName").val();
        var unit = childSnapshot.child("productUnit").val();
        var productMRP = childSnapshot.child("productMRP").val();
        var price = childSnapshot.child("productSellingPrice").val();
        var buying_price = childSnapshot.child("productBuyingPrice").val();
        var productstatus = childSnapshot.child("productStatus").val();

        var row = "";

        t.row.add(['<td class="cell-60 responsive-hide"></td><td class="cell-300"><a class="avatar" href="javascript:void(0)"><img class="img-responsive" src="../../../global/portraits/1.jpg"alt="..."></a></td>', '<td>' + name + '</td>',
        '<td>' + unit + '</td>', '<td tabindex="1">' + productMRP + '</td>', '<td tabindex="2">' + price + '<\/td>',
        '<td tabindex="3">' + buying_price + '<\/td>']).node().id = ProductID;
        t.draw(false);

      });
    });
}

function EditProdStatus(ProductID, ProductStatus) {
  var statusRef = firebase.database().ref('S01/Products').child(ProductID).child("productStatus");
  statusRef.set(!ProductStatus);
  console.log("Product Status changed to " + ProductStatus);
}

$(document).ready(function () {
  loadClick();
  var table = $('#products_table').DataTable({
    'columnDefs': [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    },
    {
      'targets': 3,
      'createdCell': function (td, cellData, rowData, row, col) {
        $(td).attr('tabindex', '1');
      }
    },
    {
      'targets': 4,
      'createdCell': function (td, cellData, rowData, row, col) {
        $(td).attr('tabindex', '2');
      }
    },
    {
      'targets': 5,
      'createdCell': function (td, cellData, rowData, row, col) {
        $(td).attr('tabindex', '3');
      }
    }
    ],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    order: [[1, 'asc']]
  });

});

function productDisable() {

  var oTable = $('#products_table').dataTable();
  $(".select-checkbox:checked", oTable.fnGetNodes()).each(function () {
    console.log($(this).val());
  });
}

HTML

   <table id="products_table" class="table is-indent tablesaw" cellspacing="0" width="100%">
                      <thead>
                            <tr>
                                  <th class="pre-cell"></th>
                                  <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">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>
                            </tr>
                      </thead>
                </table>

jsFiddle 演示

Answer 1

对于那些td您不想在 DataTable 中显示的内容，您只需要Visible:false在您的columnDefs. 它们将被隐藏，但如果它们位于选定的行中，您可以检索它们的数据。

$('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }, {
      "targets": [2],
      "visible": false,
      "searchable": false
    }]
})

另一件事是您正在使用fnGetNodes哪个是datatable v1.9的遗留函数，但它不适用于 DataTable 10.1。您可以按如下方式获取选定的行：

table.rows('.selected').data();

selected rows即使您在不同页面中选择了多行，这也会返回。

你可以找到一个Demo here.

正如您在演示中看到的，对于员工数据，他们的position列在 DataTable 中不可见，但在检索选定行的数据时其数据可用。

隐藏列的文档在这里

更新

我已经更新了你的小提琴。. Updated Fiddle