我把书存放在一张桌子上,我试图将它们显示在一张桌子上[图片 - 标题 - 年份]。所以我使用了数据表。 Datatables在我的表中添加了Ajax搜索和分页系统 在我的应用程序中,当我悬停图像时,它通常会显示工具提示。问题是只适用于第一页。
<table class="display" id="example" >
<thead>
<tr class="odd gradeU">
<th>Cover</th>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<?php
$cmp=1;
while ($row = mysqli_fetch_assoc($result))
{
if ($cmp%2==0) echo '<tr class="odd gradeX">';
else echo '<tr class="even gradeX">';
echo '
<td>
<img id="cover'.$cmp.'" src="./covers/'.$row["ISBN"].'.jpg"/>
</td>
<td style="font-size:22px;font-weight:bold; color:blue;">'.
htmlspecialchars_decode($row["title"]).'
</td>
<td>
<div id="year'.$cmp.'" >'.
$row["year"].'
</div>
</td>
</tr>';
$cmp++;
}
?>
</tbody>
<tfoot>
<tr class="odd gradeU">
<th>Cover</th>
<th>Title</th>
<th>Year</th>
</tr>
</tfoot>
</table>
javascript和css代码是:
<link rel="stylesheet" type="text/css" href="includes/demo_page.css" />
<link rel="stylesheet" type="text/css" href="includes/demo_table.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="includes/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
$("[id^='cover']").bind({
'mouseover':
function(){
var intermed=$(this).attr("id");
var str=intermed.replace("cover","");
//$('#'+intermed).text("0");
$('#popup'+str).show();
},
'mouseout':
function(){
var intermed=$(this).attr("id");
var str=intermed.replace("cover","");
setTimeout(
function(){
$('#popup'+str).hide();
}
,3000);
}
})
</script>