动态填充表时突出显示和排序问题

我试图让我的表格每行都有一个复选框列，以及悬停时要突出显示的行。当数据在 html 文件上静态声明时，它可以正常工作，但是当从服务器检索数据时（我使用的是 $.getJSON），排序变得一团糟，突出显示停止工作。

此外，它还为表中的每一行显示此消息。

数据

表警告：从数据中请求未知参数"5" 第 0 行的来源

这是我的代码：

$(function () 
{
    var oTable;
    var tRow; 
    var checkboxIdsArray = new Array();
    var allChecked = false;
        // To generate the checkbox for each row
        var nCloneTh = document.createElement('th');
    var nCloneTd = document.createElement('td');
    nCloneTd.innerHTML = '<input type="checkbox" id="op_checkbox" />';
        nCloneTd.className = "center";
    // Deal with the checbox selection  
    $('#op_checkbox').live('click', function()
    {
        var operatorId = $(this).parents('tr').attr('id');
    });
    $('#example thead tr').each(function () 
    {
        this.insertBefore(nCloneTh, this.childNodes[0]); // Add the header before the first header
        });
    // Instantiate the DataTable
    oTable = $('#example').dataTable({"aaSorting": [[ 0, "asc" ]]});
    $.getJSON('../../controller/UserController.php/getUsers',
    function(data)
    {
        $.each(data, function(i, item)
        {
            oTable.fnAddData(
                [
                    item.idUser,
                    item.nameUser,
                    item.telephoneUser,
                    item.cnpjUser,
                    item.inscEstUser
                ]
            );
        });
        $('#example tbody tr').each(function () 
            {
                this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]); // Add the checkbox to the td's
            });
    });
    // Deals with the highlight of the rows 
    $('#example tbody tr').hover(function() 
        {
            tRow = this; 
            $(this).children().addClass('highlighted');
        }, 
        function() 
        {
            var nTrs = oTable.fnGetNodes();
            $(tRow).children().removeClass('highlighted');
        } 
    );
    // Deals with the export options
    var oTableTools = new TableTools( oTable, 
    {
            "aButtons": 
            [
                {
                    "sExtends":    "div",
                    "sButtonText": "Hello world"
                }
            ]
    });
    $('#demo').before( oTableTools.dom.container );
        // Deals with the check all button click
    $('#checkall_link').live('click', function()
    {
        var i = 0; 
        if(!allChecked)
        {
            $(oTable.fnGetNodes()).each(function()
            {
                allChecked = true;
                $('#checkall_link').text('Uncheck all');
                this.childNodes[0].childNodes[0].checked = true; // Set all checkbox to checked
                checkboxIdsArray[i] = this.childNodes[0].childNodes[0].id; // Store the current checkbox id the checkboxIds array
                i++; 
            });
        }
        else
        {
            $(oTable.fnGetNodes()).each(function()
            {
                allChecked = false;
                $('#checkall_link').text('Check all');
                this.childNodes[0].childNodes[0].checked = false; // Set all checkbox to checked
                checkboxIdsArray = [];
                console.log(checkboxIdsArray);
            });
        }
    });
    $('#manage_del').click(function()
    {
        if($(this).attr('class') == 'disabled')
        {
            alert("disabled");          
        }
        else
        {
            alert("enabled");
        }
    });
    $('#manage_new').click(function()
    {
        if($(this).attr('class') == 'disabled')
        {
            alert("disabled");          
        }
        else
        {
            alert("enabled");
        }
    });
});

这是我的桌子的样子。https://i.stack.imgur.com/rGm0F.jpg

，它会创建另一列（可能是因为添加了复选框），还可以在左侧箭头中看到第二列突出显示，但选中的标题是第一列（带有复选框）。当我将鼠标悬停在行上时，它不会突出显示。

任何帮助将不胜感激。谢谢。

更新

现在使用 delegate（），但它还没有工作。

// Deals with the highlight of the rows 
$('#example tbody').delegate('tr', 'hover', function() 
{
    tRow = this; 
    $(this).children().addClass('highlighted');
}, 
function() 
{
    var nTrs = oTable.fnGetNodes();
    $(tRow).children().removeClass('highlighted');
});