如何解决如何在按钮的onClick上获取行的索引?
当我单击数据表中某行的按钮时,我试图获取行索引,但不是获取真实索引,而是获取显示的索引。当我添加新行,然后单击该行的按钮时,就会发生这种情况。表的顺序是按时间戳记的,因此当我单击按钮时,新行立即移到该行的顶部,索引为0,但这只是显示的表索引,而不是实际索引。
function myFunction(this_) {
var tr = $(this_).closest("tr");
rowindex = tr.index(); //this gives the displayed index of the row,NOT the real index
}
从html数据表按钮调用此函数:
<td>
<button type="button" id="edit_button" onclick='myFunction(this)' name="edit_button">Edit</button>
</td>
更新: 添加新行时,我尝试打印所有行的索引:
table.rows().every( function () {
console.log(this.index());
});
,它给出正确的索引,因此打印如下:
5 2 3 4
您可以看到索引5是第一个,因为由于我正在使用的顺序/过滤条件,它显示在第一行。
简单地说,当我单击第一行的按钮时,它不是给我索引5,而是给0。
解决方法
在tr元素上,只需添加“ id”或任何名称之类的属性即可设置行号。这样您就可以操纵该行。
,我认为您正在寻找这样的东西:
var jsonData = [
{ "Id": "1","Name": "Tiger Nixon","Position": "System Architect","Office": "Edinburgh","Age": 61 },{ "Id": "2","Name": "Garrett Winters","Position": "Accountant","Office": "Tokyo","Age": 63 },{ "Id": "3","Name": "Ashton Cox","Position": "Jr. Technical Author","Office": "San Francisco","Age": 66 },{ "Id": "4","Name": "Cedric Kelly","Position": "Sr. Javascript Developer","Age": 22 },{ "Id": "5","Name": "Airi Satou","Age": 33 },{ "Id": "6","Name": "Brielle Williamson","Position": "Integration Specialist","Office": "New York",{ "Id": "7","Name": "Herrod Chandler","Position": "Sales Assistant","Age": 59 },{ "Id": "8","Name": "Rhona Davidson","Age": 55 },{ "Id": "9","Name": "Colleen Hurst","Position": "Javascript Developer","Age": 39 },{ "Id": "10","Name": "Sonya Frost","Position": "Software Engineer","Age": 23 } ];
var table = $('#example').DataTable({
LengthChange: false,data: jsonData,columns: [
{ data: 'Id' },{ data: 'Name' },{ data: 'Position' },{ data: 'Office' },{ data: 'Age' },{
data: null,orderable: false,searchable: false,render: function(data,type,full,meta) {
return '<button onClick="showIndex(' + meta.row + ')">Click me</button>';
}
},]
});
function showIndex(index) {
alert(index);
}
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="example" class="table display" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th></th>
</tr>
</thead>
</table>
请记住,如果您单击ID为1的行的按钮并得到0(零),是因为内部jQuery DataTable的第一行索引为0而不是1(与数组中的相同)
快乐编码!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。