分页数元素不起作用 - jQuery

时间:2010-03-08 18:51:04

标签: php jquery pagination

我正在努力让我的分页链接正常工作。似乎当我点击任何分页编号链接进入下一页时,新内容不会加载。没有任何反应,当在Firebug中查看控制台时,没有任何内容被发送或加载。

我在主页3上有链接来过滤内容并显示它。单击任何这些链接时,将加载并显示结果以及该特定内容的相关分页编号。

这是主页面,因此您可以看到jquery的结构:

<?php
include_once('generate_pagination.php');
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>

<div id="loading" ></div>
<div id="content" data-page="1"></div>

<ul id="pagination">
<?php generate_pagination($sql) ?>
</ul>

<br />
<br />

<a href="#" class="category" id="marketing">Marketing</a>
<a href="#" class="category" id="automotive">Automotive</a>
<a href="#" class="category" id="sports">Sports</a>

下面的jquery非常简单,我认为我不需要解释它的作用。我认为问题可能出在$("#pagination li").click(function(){,因为li元素是单击时不起作用的数字。即使我尝试淡出或隐藏点击内容也没有任何反应。我对jquery结构很新,所以我不完全明白真正的问题发生在哪里,这只是我的观察。

jquery文件如下所示:

$(document).ready(function(){

 //Display Loading Image
 function Display_Load()
 {
     $("#loading").fadeIn(900,0);
  $("#loading").html("<img src='bigLoader.gif' />");
 }
 //Hide Loading Image
 function Hide_Load()
 {
  $("#loading").fadeOut('slow');
 };


   //Default Starting Page Results

 $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});

 Display_Load();

 $("#content").load("pagination_data.php?page=1", Hide_Load());

//Pagination Click
$("#pagination li").click(function(){

  Display_Load();

  //CSS Styles
  $("#pagination li")
  .css({'border' : 'solid #dddddd 1px'})
  .css({'color' : '#0063DC'});

  $(this)
  .css({'color' : '#FF0084'})
  .css({'border' : 'none'});

  //Loading Data
  var pageNum = this.id;

    $("#content").load("pagination_data.php?page=" + pageNum, function(){

          $(this).attr('data-page', pageNum);

           Hide_Load();
        });
});

// Editing below.        
// Sort content Marketing    
    $("a.category").click(function() {
        Display_Load();

        var this_id = $(this).attr('id');

      $.get("pagination.php", { category: this.id },
        function(data){

            //Load your results into the page  
            var pageNum = $('#content').attr('data-page');

            $("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id );
            $("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load());
        });  
    });


});

如果有人能帮助我,那就太棒了,谢谢。

修改

以下是<ul id="pagination">

的内部结构
<?php
function generate_pagination($sql) {
  include_once('config.php');
  $per_page = 3;

  //Calculating no of pages
    $result = mysql_query($sql);
    $count = mysql_fetch_row($result);
    $pages = ceil($count[0]/$per_page);

  //Pagination Numbers
  for($i=1; $i<=$pages; $i++)
  {
    echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>';
  }
}

$ids=$_GET['ids'];
generate_pagination("SELECT COUNT(*) FROM explore WHERE category='$ids'");

?>

1 个答案:

答案 0 :(得分:0)

尝试移动低于// Sort content Marketing的代码,使其高于$("#pagination li").click()