[英]How to Get Data from checkbox selected row in dataTables
I'm using this data table .我正在使用这个数据表。
I need to get both ProductID
& ProductStatus
from the selected row where ProductID is embedded in the TR ID of each row.我需要从所选行中获取ProductID
和ProductStatus
,其中 ProductID 嵌入在每行的 TR ID 中。
I'm not displaying the productStatus in the table.我没有在表格中显示 productStatus。 But I need to get the status when the row is selected.但是我需要在选择行时获取状态。 Where can i add them ?我可以在哪里添加它们?
Please Guide me ....请指导我....
CODE代码
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 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>
For those td
which you don't want to display in DataTable, you just need to provide Visible:false
in your columnDefs
.对于那些不想在 DataTable 中显示的td
,您只需要在columnDefs
提供Visible:false
。 They will be hidden but you can retrieve their data if they are in selected rows.它们将被隐藏,但如果它们位于选定的行中,您可以检索它们的数据。
$('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}, {
"targets": [2],
"visible": false,
"searchable": false
}]
})
Another thing is you are using fnGetNodes
which is a legacy function for datatable v1.9 on selection which is not going to work for DataTable 10.1.另一件事是您正在使用fnGetNodes
,它是datatable v1.9的遗留函数,用于选择它不适用于 DataTable 10.1。 You can get selected rows as follow:您可以按如下方式获取选定的行:
table.rows('.selected').data();
This is going to return selected rows
even if you have selected multiple rows in different pages.即使您在不同页面中选择了多行,这也会返回selected rows
。
You can find a Demo here .您可以在此处找到演示。
As you can see in demo that for Employees data, their position
column in not visible in DataTable but its data is available while retrieving data of selected rows.正如您在演示中看到的,对于员工数据,他们的position
列在 DataTable 中不可见,但在检索选定行的数据时其数据可用。
Documentation here for Hidden columns 隐藏列的文档在这里
Update更新
I have updated your Fiddle.我已经更新了你的小提琴。 Updated Fiddle .更新了小提琴。
Try this, it helps you试试这个,它可以帮助你
var table = $('#example').DataTable(); $('#example tbody').on( 'click', '.checkbox', function () { if(this.checked==true) { console.log( table.row( this.closest('tr') ).data() ); } } );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/js/jquery.dataTables.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/css/jquery.dataTables.css" rel="stylesheet"/> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>check</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="checkbox" ></td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td><input type="checkbox" class="checkbox" ></td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table>
Try this ...尝试这个 ...
Add your productStatus
column to the HTML :将您的productStatus
列添加到 HTML 中:
'<td>' + productStatus + '</td>'
Let's say that's at column index 8. So add the following to the dataTables columnDefs
:假设它位于列索引 8。因此将以下内容添加到 dataTables columnDefs
:
{
'targets': 8,
'visible': false,
}
Now, in productDisable()
, you can get productID & productStatus from each selected row as follows :现在,在productDisable()
,您可以从每个选定的行中获取 productID 和 productStatus,如下所示:
function productDisable() {
table.rows(".selected").every(function() {
var row = this.node();
var productID = row.id;
var productStatus = this.data()[8];
console.log(productID, productStatus);
// do whatever with productID and productStatus
});
}
I a using Datatable 1.10 and this Code is Working for me "btnSubmit" is the Id of the Button when you click on the button selected checkbox data you will get我使用 Datatable 1.10并且此代码对我有用“btnSubmit”是按钮的 ID,当您单击您将获得的按钮选择的复选框数据时
// Handle form submission event
$('#btnSubmit').on('click', function() {
//Hold the Object Data what are the checkbox selected
var tblData = table.api().rows('.selected').data();
var tmpData;
//Iterate the Object and extract you one one by one row data With Hidden Id Also
$.each(tblData, function(i, val) {
tmpData = tblData[i];
alert(tmpData);
});
})
//You can use this one.
$( $('#example').DataTable().$('.checked').map(function ()
{
return $(this).closest('tr');
//want to get attribute
//var id = $(this).closest('tr').find('td.Select').attr('id');
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.