如何使用 jQuery 使用 column() 访问数据表中的列?
How to access column in dataTables by using column() using jQuery?
我在 dataTable 中所做的是我有两个复选框,它们与我的列 (0) 和列 (6) 分开,我的代码正在让复选框检查我的所有元素,但问题是我可以仅指定列 (0)。如何访问带有复选框的数据表中的第 (6) 列?
这是我的代码示例。
$("#select_all").on('click', function() {
$('#dataTables').DataTable()
.column(0)<<<<<<<<<<<<<<<<<<< this is my problem, it only specifies
column(0)
.nodes()
.to$()
.find('input[type="checkbox"]:enabled:visible')
.prop('checked', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Emailed Data for approval
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th>
<center>
Select Data
<input type="checkbox" id="select_all">
</center>
</th>
<th> Control Number </th>
<th> Tools Specification </th>
<th> Supplier </th>
<th>
<center> Status </center>
</th>
<th>
<center> Reason for transfer </center>
</th>
<th class="hide_me">
<center>
####
<input name="chk_id[]" type="checkbox" class="subCheckbox" value="<?php echo $row['tools_req_id'];?>">
</center>
</th>
</tr>
</thead>
<td>
<center>
<input name="chk_status[]" class="is_checked_status" type="checkbox" value="<?php echo $row['req_stats'];?>">
</center>
</td>
<td>
<center>
<label data-id="<?php echo $row['ID'];?>" class="statusButton <?php echo ($row['req_stats'])? 'label-success': 'label-danger'?>">
</label>
</center>
</td>
<td>
<center>
<p>
</p>
</center>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
您可以使用 columns()
而不是 column()
- 并使用数组 select 或指定您想要 select 的索引:[ 0, 6 ]
。
(其实这里还有很多种这样的selector options可以用,另外还有一个基本的索引整数,还有我的索引整数数组)
这是我的代码版本:
$("#select_all").on('click', function() {
var nodesObj = $('#dataTables').DataTable().columns( [ 0, 6 ] ).nodes().to$();
var nodesArray = nodesObj[0].concat( nodesObj[1] );
$(nodesArray).find('input[type="checkbox"]:enabled:visible').prop('checked', 'true');
});
在上面的代码中,columns( [ 0, 6 ] )
函数 returns 包含 2 个数组的对象 - 每个 selected 列一个。
所以我们必须将它们合并到一个数组中:nodesObj[0].concat( nodesObj[1] )
.
之后,我们可以将 jQuery find
应用到结果数组 jQuery 对象中。
我在 dataTable 中所做的是我有两个复选框,它们与我的列 (0) 和列 (6) 分开,我的代码正在让复选框检查我的所有元素,但问题是我可以仅指定列 (0)。如何访问带有复选框的数据表中的第 (6) 列?
这是我的代码示例。
$("#select_all").on('click', function() {
$('#dataTables').DataTable()
.column(0)<<<<<<<<<<<<<<<<<<< this is my problem, it only specifies
column(0)
.nodes()
.to$()
.find('input[type="checkbox"]:enabled:visible')
.prop('checked', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Emailed Data for approval
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th>
<center>
Select Data
<input type="checkbox" id="select_all">
</center>
</th>
<th> Control Number </th>
<th> Tools Specification </th>
<th> Supplier </th>
<th>
<center> Status </center>
</th>
<th>
<center> Reason for transfer </center>
</th>
<th class="hide_me">
<center>
####
<input name="chk_id[]" type="checkbox" class="subCheckbox" value="<?php echo $row['tools_req_id'];?>">
</center>
</th>
</tr>
</thead>
<td>
<center>
<input name="chk_status[]" class="is_checked_status" type="checkbox" value="<?php echo $row['req_stats'];?>">
</center>
</td>
<td>
<center>
<label data-id="<?php echo $row['ID'];?>" class="statusButton <?php echo ($row['req_stats'])? 'label-success': 'label-danger'?>">
</label>
</center>
</td>
<td>
<center>
<p>
</p>
</center>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
您可以使用 columns()
而不是 column()
- 并使用数组 select 或指定您想要 select 的索引:[ 0, 6 ]
。
(其实这里还有很多种这样的selector options可以用,另外还有一个基本的索引整数,还有我的索引整数数组)
这是我的代码版本:
$("#select_all").on('click', function() {
var nodesObj = $('#dataTables').DataTable().columns( [ 0, 6 ] ).nodes().to$();
var nodesArray = nodesObj[0].concat( nodesObj[1] );
$(nodesArray).find('input[type="checkbox"]:enabled:visible').prop('checked', 'true');
});
在上面的代码中,columns( [ 0, 6 ] )
函数 returns 包含 2 个数组的对象 - 每个 selected 列一个。
所以我们必须将它们合并到一个数组中:nodesObj[0].concat( nodesObj[1] )
.
之后,我们可以将 jQuery find
应用到结果数组 jQuery 对象中。