Javascript 如何从数据表中的复选框选定行中获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43422959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Get Data from checkbox selected row in dataTables
提问by user3467240
I'm using this data table.
我正在使用这个数据表。
I need to get both ProductID& ProductStatusfrom 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. But I need to get the status when the row is selected. Where can i add them ?
我没有在表格中显示 productStatus。但是我需要在选择行时获取状态。我可以在哪里添加它们？
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>
回答by mmushtaq
For those tdwhich you don't want to display in DataTable, you just need to provide Visible:falsein your columnDefs. They will be hidden but you can retrieve their data if they are in selected rows.
对于那些td您不想在 DataTable 中显示的内容，您只需要Visible:false在您的columnDefs. 它们将被隐藏，但如果它们位于选定的行中，您可以检索它们的数据。
$('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}, {
"targets": [2],
"visible": false,
"searchable": false
}]
})
Another thing is you are using fnGetNodeswhich is a legacy function for datatable v1.9on selection which is not going to work for DataTable 10.1. You can get selected rows as follow:
另一件事是您正在使用fnGetNodes哪个是datatable v1.9的遗留函数，但它不适用于 DataTable 10.1。您可以按如下方式获取选定的行：
table.rows('.selected').data();
This is going to return selected rowseven if you have selected multiple rows in different pages.
selected rows即使您在不同页面中选择了多行，这也会返回。
You can find a Demo here.
你可以找到一个Demo here.
As you can see in demo that for Employees data, their positioncolumn 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.
我已经更新了你的小提琴。.Updated Fiddle
回答by Nobita
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>0,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>0,750</td>
</tr>
</tbody>
</table>回答by Roamer-1888
Try this ...
尝试这个 ...
Add your productStatuscolumn 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
});
}
回答by Abhijit Patra
I a using Datatable 1.10and 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);
});
})
