【发布时间】：2021-08-24 17:00:04
【问题描述】：
如何通过输入数字来获得数据表的选中复选框
我正在尝试编写一个bootstrap data table，它能够选择行的复选框 inserting no of rows in the input box
我不知道该怎么做。
例如：我在输入框中输入了数字三然后在[开头->自动选中两行的复选框表没问题]
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container text-center">
<label for="fname">insert number for select multiple check box</label>
<input type="number" id="selectcheckbox" name="selectcheckbox">
<table data-toggle="table"
data-classes="table table-hover table-condensed"
data-row-style="rowColors"
data-striped="true"
data-sort-name="Quality"
data-sort-order="desc"
data-pagination="true"
data-click-to-select="true"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th class="col-xs-1" data-field="Product_Name" data-sortable="true">Product Name</th>
<th class="col-xs-1" data-field="Quality" data-sortable="true">Quality</th>
<th class="col-xs-6" data-field="Quantity" >Quantity</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Rice</td>
<td>Good</td>
<td>100 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Rice</td>
<td>Good</td>
<td>100 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Sugar</td>
<td>Prime</td>
<td>200 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Maze</td>
<td>Fine</td>
<td>10 Packs</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Sugar</td>
<td>Prime</td>
<td>200 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Sugar</td>
<td>Prime</td>
<td>200 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td>Sugar</td>
<td>Prime</td>
<td>200 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Sugar</td>
<td>Prime</td>
<td>200 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Sugar</td>
<td>Prime</td>
<td>200 Bags</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td></td>
<td>Sugar</td>
<td>Prime</td>
<td>200 Bags</td>
</tr>
</tbody>
</table>
</div>
<script>
function queryParams() {
return {
type: 'owner',
sort: 'updated',
direction: 'desc',
per_page: 100,
page: 1
};
}
function rowColors(row, index) {
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
};
}
return {};
}
</script>
</body>
</html>我的实际代码在这里
<html>
<body>
<label for="fname">insert number for select multiple check box</label>
<input type="number" id="selectcheckbox" name="selectcheckbox">
<table class="table table-striped table-bordered" id="tbl">
<thead>
<tr>
<th>SELECT check box is here</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
<th>Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(
function()
{
var table = $('#tbl').DataTable({
"columnDefs":
[
{
orderable: false,
className: 'select-checkbox',
targets: 0
}
],
destroy:true,
"fnRowCallback" :
function(nRow, aData, iDisplayIndex)
{
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
},
'select':
{
style: 'multi',
selector:'td:nth-child(1)'
},
'order': [[ 1, 'asc' ]],
});
$.ajax({
type:"POST",
url:"fetch_data.php",
data:'value='+value,
success: function(data)
{
if(data['error'] == '0')
{
console.log(data);
//set Finish Data
table.clear().draw();
for(i = 0; i < data['chemical_date'].length; i++)
{
table.row.add([
data['chemical_date'][i]['value'],
data['chemical_date'][i]['value'],
data['chemical_date'][i]['value'],
data['chemical_date'][i]['value'],
data['chemical_date'][i]['value'],
data['chemical_date'][i]['value'],
data['chemical_date'][i]['value'],
"<input type='text' value='' class='form-control' id='selectedqty"+i+"' onkeyup='sqty(this.id);' name='selectedqty"+i+"'/>",
"<input type='text' value='' class='form-control ' id='note"+i+"' name='note"+i+"' />",
"<input type='text' value='' class='form-control ' id='location"+i+"' name='location"+i+"' />",
'',
'',
''
]).draw(false);
}
}
}
})
});
</script>
</body>
</html>
fetch_data.php
<?php
$response = array();
if($_SERVER['REQUEST_METHOD']=='POST')
{
extract($_POST);
//Top data
$data = array();
$obj = array();
$sql = "some query here...";
$result = mysqli_query($db, $sql);
$chemical = array();
while ($row = mysqli_fetch_assoc($result))
{
//Finish Data
$row1 = array();
$row1['value'] = $row['value'];
$row1['value'] = $row['value'];
$row1['value'] = $row['value'];
$row1['value'] = $row['value'];
$row1['value'] = $row['value'];
$row1['value'] = $row['value'];
$row1['value'] = $row['value'];
array_push($chemical, $row1);
//Stock Data
}
$response['chemical_date'] = $chemical;
//Process Data
$response['error'] = "0";
}
else
$response['error'] = "1";
echo json_encode($response);
?>
【问题讨论】：
标签： javascript html jquery bootstrap-4 datatables