我用数据表创建了一个表。在该表的上方,我添加了按年交易量排名前“n”位的路由过滤器。年成交量是表中的列。“n”是用户应输入的数字。
就像图片中提到的:
Html表代码:
<div class="table-responsive">
<table class="table dataTable table-striped table-bordered" id="routeData">
<thead class="thead-dark">
<tr>
<th></th>
<th>OPCO</th>
<th>Route ID</th>
<th>Origin</th>
<th>Destination</th>
<th>Product Type</th>
<th>Annual Volume</th>
<th>Freight Cost/t</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for d in route_obj %}
<tr id="{{d.id}}">
<td>{{d.id}}</td>
<td>{{d.opco__opco_name}}</td>
<td>{{d.routeid}}</td>
<td>{{d.source}}</td>
<td>{{d.destination}}</td>
<td>{{d.product_id_id__product_name}}</td>
<td>{{d.annualVolume}}</td>
<td>{{d.freightCost}}</td>
<td>
<i class='fa fa-edit editBtn' style="cursor: pointer;"></i>
<i class='fa fa-trash pl-3 deleteBtn' style="cursor: pointer;"></i>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
jquery datatable代码:
var table = $("#routeData").DataTable({
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']],
fixedColumns: {
leftColumns: 1,
rightColumns: 1
}
});
按年交易量排名前“n”条航线的备案人代码:
<div class="row">
<div class="col">
<div class="input-group mb-3">
<span style="padding: 4px 10px ;">Top</span>
<input type="text" id="filterByVolumeAddOne" class="form-control" style="max-width: 40px; padding: 1px;" aria-describedby="basic-addon1">
<div class="input-group-prepend">
<span class="input-group-text" id="filterByVolume" style="background-color: #2980b9; color: aliceblue; padding: 6px; cursor: pointer;"><i class="fa fa-arrow-right"></i></span>
</div>
<span style="padding: 4px 0px 0px 11px;">Route By Annual Volume |</span>
</div>
</div>
</div>
我正在按用户输入的数字获取行。如图中所示:
按用户在筛选器中输入的编号显示条目的代码:
$("#filterByVolume").on('click', function() {
count = $("#filterByVolumeAddOne").val() // Get number enter by user
table.order([6, 'desc']).draw(); // Sort the table by volume in descending order
table.page.len(count).draw(); // Display only the top rows
});
现在,我想选择复选框,这些复选框在表中按编号显示。这意味着如果用户输入了按年交易量排名前15位的路线,则我必须选择15行的复选框。
在图像中,我已经进入4路由过滤器,所以选择复选框的4行。
如何根据用户输入的数字选择复选框?
jsFiddle示例:https://jsfiddle.net/q946hn2g/2/
1条答案
按热度按时间6gpjuf901#
我尝试使用他们的API来实现这一点,但似乎不可能,所以我使用了jquery clicks😅。
检查这是否符合您的需要,更改后的线条有🟥红色方块