以下是我的HTML代码
<article class="container content col-xs-12 col-sm-9 col-md-10 col-lg-10">
<div class="x_panel well">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div>
</article>
我使用下面的JSON数据填充了这个表是代码:
$(document).ready(function()
{
function init_DataTables()
{
console.log('run_datatables');
if( typeof ($.fn.DataTable) === 'undefined'){ return; }
console.log('init_DataTables');
var handleDataTableButtons = function() {
if ($("#datatable-buttons").length){
$("#datatable-buttons").DataTable({
dom: "Bfrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm"
},
{
extend: "excel",
className: "btn-sm"
},
{
extend: "pdfHtml5",
className: "btn-sm"
},
{
extend: "print",
className: "btn-sm"
},
],
"aaData": [
{
"Name": "Tiger Nixon",
"Position": "System Architect",
"Office": "$320,800",
"Age": "2011/04/25",
"Start date": "Edinburgh",
"Salary": "5421"
},
{
"Name": "Garrett Winters",
"Position": "Accountant",
"Office": "$170,750",
"Age": "2011/07/25",
"Start date": "Tokyo",
"Salary": "8422"
},
{
"Name": "Ashton Cox",
"Position": "Junior Technical Author",
"Office": "$86,000",
"Age": "2009/01/12",
"Start date": "San Francisco",
"Salary": "1562"
},
{
"Name": "Cedric Kelly",
"Position": "Senior Javascript Developer",
"Office": "$433,060",
"Age": "2012/03/29",
"Start date": "Edinburgh",
"Salary": "6224"
}
],
"aoColumns": [
{ "mData": "Name" },
{ "mData": "Position" },
{ "mData": "Office" },
{ "mData": "Age" },
{ "mData": "Start date" },
{ "mData": "Salary" }
],
responsive: true
});
}
};
TableManageButtons = function()
{
"use strict";
return {
init: function() {
handleDataTableButtons();
}
};
}();
$('#datatable-scroller').DataTable({
ajax: "js/datatables/json/scroller-demo.json",
deferRender: true,
scrollY: 380,
scrollCollapse: true,
scroller: true
});
var $datatable = $('#datatable-checkbox');
$datatable.dataTable({
'order': [[ 1, 'asc' ]],
'columnDefs': [
{ orderable: false, targets: [0] }
]
});
$datatable.on('draw.dt', function()
{
$('checkbox input').iCheck({
checkboxClass: 'icheckbox_flat-green'
});
});
TableManageButtons.init();
};
init_DataTables();
});
我想要做的是当鼠标悬停在tr数据上但是它无法正常工作时,我想显示编辑或删除选项。可能是什么问题。
这是y JQUERY代码:
$("#datatable-buttons tbody tr").mouseover(function()
{
alert("hi");
});