隐藏字段ID未在第二页中正确显示

Question

我是jQuery dataTable的初学者，去年我在我的网站上实现了dataTable 1.10。

我尝试在所选行的警报窗口中弹出id字段。

第一页工作正常，但当我转到第二页时，我点击

行id为11.但是弹出窗口显示单击行的ID为1.

请看下面的图片。

所有页面都显示此错误，它只能正常工作

正确地在第一页。

请参阅下面的代码。

脚本

$(document).ready(function () {

    //$("#tblProvider").dataTable().destroy();

    $("#tblProvider").dataTable({
        bProcessing: true,
        bPaginate: true,
        bLengthChange: false,
        bSort: true,
        sAjaxSource: '@Url.Action("JsonGetAllTariffPosition", "Admin")',
        aoColumns: [
             { sTitle: "Id", bVisible: true, bSortable: false },
             { sTitle: "Number", bSortable: false },
             {
                 sTitle: "Action",
                 bSortable: false,
                 mRender: function (o) { return '<i class="ui-tooltip fa fa-pencil" data-toggle="modal" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; }
             }
        ],
    });

    $("#tblProvider").on('click', 'tr td i[class="ui-tooltip fa fa-pencil"]', function () {

        var row_index = $(this).closest('td').parent()[0].sectionRowIndex //you need to determine this how ever you like
        var table = $('#tblProvider').DataTable()
        var column_data = table.row(row_index).data()[0];

        alert(column_data);
    });
});

HTML

<table id="tblProvider"
                                class="table table-striped table-bordered table-hover table-highlight table-checkable"
                                data-search="true"
                                data-paginate="true">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Tariff Position</th>
                                        @*<th>General Tax</th>
                                        <th>Consumption Tax</th>*@
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

请帮助

Answer 1

使用此

替换点击处理程序中的代码

var node =  $(this).closest('tr')
var table = $('#tblProvider').DataTable()
var column_data = table.row(node).data()[0];