我添加了仅适用于第一个数据表页面的jQuery代码

时间:2013-04-17 16:48:21

标签: jquery pagination datatables

我把书存放在一张桌子上,我试图将它们显示在一张桌子上[图片 - 标题 - 年份]。所以我使用了数据表。 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>

0 个答案:

没有答案