我正在尝试让每个行都有一个复选框列,以及悬停时要突出显示的行。当数据在html文件上静态声明时,它可以正常工作,但是当从服务器检索数据时(我使用$ .getJSON),排序变得一团糟,突出显示停止工作。
此外,它还会为表格中的每一行显示此消息。
DataTables警告:从数据中请求未知参数'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");
}
});
});
这是我的表格的样子。 http://imgur.com/gpiu8
正如您在右侧的箭头中所看到的,它会创建另一列(可能是因为正在添加复选框),左侧箭头也可以看到第二列突出显示,但是已检查的标题是第1列(带复选框)。当我将鼠标悬停在行上时,它不会突出显示。
任何帮助将不胜感激。感谢。
更新
现在使用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');
});
答案 0 :(得分: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);