1

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

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

数据表警告：从第 0 行的数据源请求未知参数“5”

这是我的代码：

$(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");
        }
    });
});

这是我的桌子的样子。http://imgur.com/gpiu8

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

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

更新

现在使用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');
});
4

1 回答 1

2

我会亲自使用委托（主要是因为我从来没有让我的悬停示例为您使用动态内容）

下面是一些示例代码，向您展示如何使用委托：

缩略图列表的示例设置：

<ul>
    <li>
        <img src="http://www.dummyimage.com/64x64/000/fff" />
        <p>some title text</p>            
    </li>
</ul>​


// attach the handler via delegate()
$(document).delegate("li", "hover", function() { // this works because the delegate function looks for all li's that are children to the document.
    $(this).children('p').fadeToggle("fast");
});

// after you've attached the handler create some elements.
setTimeout(function() {
    var list = $('ul'),
        node = list.children('li'),
        i = 25;
    while (i) {
        list.append(node.clone());
        i--;
    }
}, 1000);​

现场演示

于 2012-06-22T17:06:03.920 回答