jQuery 如何使用jquery在jquery数据表中插入序列号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9155986/
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 insert serial number in jquery datatable using jquery?
提问by Sreenath Plakkat
< script type = "text/javascript" >
$(function() {
var oAllLinksTable = $("#mydatatable").dataTable({
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "/myreports/data?Id=" + id,
"sPaginationType": "full_numbers",
"bDestroy": true
});
});
< /script>
My table as follows
我的表如下
<table id="headertagstable" style="width: 100%;" class="grid-table04 margin-b-20">
<thead>
<tr>
<th width="10%" align="left" valign="middle">
SI No
</th>
<th width="40%" align="left" class="black-link-first" valign="middle">
Name
</th>
<th width="25%" align="left" valign="middle">
Date
</th>
<th width="25%" align="left" valign="middle">
Place
</th>
</tr>
</thead>
</table>
All works fine except serial number. How can I add serial number using jquery ?
除序列号外，一切正常。如何使用 jquery 添加序列号？
回答by Hemant Metalia
you can try following
你可以尝试以下
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
},
refer http://datatables.net/forums/discussion/2169/adding-and-deleting-rows-with-row-numbers/p1
参考http://datatables.net/forums/discussion/2169/adding-and-deleting-rows-with-row-numbers/p1
another solution i just found on stackoverflow itself is as follow:
我刚刚在 stackoverflow 上找到的另一个解决方案如下：
var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
refer Add row number column to jquery datatables
Updated :Just tweak the fnRowCallback function to get serial numbers correctly with paginations
更新：只需调整 fnRowCallback 函数即可通过分页正确获取序列号
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
var oSettings = oAllLinksTable.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
return nRow;
},
回答by 20B2
I've solved using the following code. The code works fine with pagination.
我已经使用以下代码解决了。该代码在分页时工作正常。
var dt = $('#table-id').DataTable({
...,
"createdRow": function (row, data, index) {
var info = dt.page.info();
$('td', row).eq(0).html(index + 1 + info.page * info.length);
},
});
回答by Urja Satodiya
I have solved using following code. The code works fine for me.
我已经使用以下代码解决了。该代码对我来说很好用。
"rowCallback": function (nRow, aData, iDisplayIndex) {
var oSettings = this.fnSettings ();
$("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
return nRow;
},
Use this.fnSettings ();instead of oAllLinksTable.fnSettings();will solve the issue.
使用this.fnSettings ();而不是oAllLinksTable.fnSettings();将解决问题。
refer https://datatables.net/forums/discussion/5316/strange-behavior-of-fnsettings
参考https://datatables.net/forums/discussion/5316/strange-behavior-of-fnsettings
回答by Anandhukrishna VR
Here is the simple answer. Use datatable render method.
这是简单的答案。使用数据表渲染方法。
Example :
例子 ：
var i = 1;
$("#myTable1").dataTable().fnDestroy();
$('#myTable1').DataTable({
ajax: base_url + 'specific_function',
columns: [
{
"render": function(data, type, full, meta) {
return i++;
}
},
{
"data": "col_2_data"
},
{
"data": "col_3_data"
},
{
"render": function(data, type, full, meta) {
return '<button class="btn btn-success btn-sm" onclick="editBUT(' + full.id + ')">EDIT</button>';
}
}
]
});
回答by Al Mubassir Muin
just add the following code
只需添加以下代码
"columns": [
{
"title": "Serial",
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
}
],
回答by MaNik
Just tweak the fnRowCallback function to get serial numbers correctly with paginations
只需调整 fnRowCallback 函数即可通过分页正确获取序列号
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
var oSettings = oAllLinksTable.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
return nRow;
},
回答by Al Mubassir Muin
just add the following code
只需添加以下代码
"columns": [
{
"title": "Serial",
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
}
],
回答by codegutsy
The continuation of serial number breaks when next pagination is clicked, using iDisplayIndexthe following code:
单击下一个分页时序列号的延续会中断，使用iDisplayIndex如下代码：
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
},
instead you can use aDatafor displaying continuation of serial number:
相反，您可以使用aData来显示序列号的延续：
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(aData.DT_RowIndex);
return nRow;
}
回答by The EasyLearn Academy
"fnDrawCallback": function(oSettings) {
var count=0;
$('#myTable').find('tr').each(function() {
$(this).find('td').eq(0).before('<td>' + count + '</td>');
count++;
});
}
回答by Araf Hossain
Here is an another new solution which works with Datatable 1.10.
这是另一个适用于 Datatable 1.10 的新解决方案。
Briefly discussed in here: https://datatables.net/examples/api/counter_columns.html
在这里简要讨论：https: //datatables.net/examples/api/counter_columns.html
$(document).ready(function() {
var t = $('#example').DataTable( {
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]]
} );
t.on( 'draw.dt', function () {
var PageInfo = $('#example').DataTable().page.info();
t.column(0, { page: 'current' }).nodes().each( function (cell, i) {
cell.innerHTML = i + 1 + PageInfo.start;
} );
} );
} );