Problème de pagination nécessitant une assistance

Question

Hé, j'essaie d'ajouter un bouton qui, une fois cliqué, va récupérer les données de la base de données mysql et les afficher avec une pagination. Cependant, je n'arrive pas à le faire fonctionner correctement.

La première page principale ressemble à ceci: pagination.php:

<?php 
include('config.php'); 
$per_page = 3; 

//Calculating no of pages 
$sql = "select * from explore"; 
$result = mysql_query($sql); 
$count = mysql_num_rows($result); 
$pages = ceil($count/$per_page) 
?> 

<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> 

<style> 
body { margin: 0; padding: 5; font-family:Verdana; font-size:10px } 
a 
{ 
text-decoration:none; 
color:#B2b2b2; 

} 

a:hover 
{ 

color:#DF3D82; 
text-decoration:underline; 

} 
#loading { 
width: 100%; 
position: absolute; 
} 

#pagination 
{ 
text-align:center; 
margin-left:120px; 

} 
li{ 
list-style: none; 
float: left; 
margin-right: 16px; 
padding:5px; 
border:solid 1px #dddddd; 
color:#0063DC; 
} 
li:hover 
{ 
color:#FF0084; 
cursor: pointer; 
} 
td{ 
border:solid 1px #dddddd; 
padding:5px; 
} 


</style> 



<div id="loading" ></div> 
<div id="content" ></div> 
<ul id="pagination"> 
<?php 
//Pagination Numbers 
for($i=1; $i<=$pages; $i++) 
{ 
echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>'; 
} 
?> 

<p id="marketing">MARKETING</p> 
</ul> 
<br /> 
<br /> 

Le bouton ci-dessus dans cette page ressemble à ceci que vous pouvez voir:

<p id="marketing">MARKETING</p> 

Ainsi, lorsque l'utilisateur clique sur ce que j'ai besoin pour obtenir les résultats de la DB.

Je le fais avec jquery comme ceci:

$(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, Hide_Load()); 

    }); 


// Editing below.   
     // Sort content Marketing  
     $("#pagination p").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("filter_marketing.php?page=" + pageNum, Hide_Load()); 
     }); 

}); 

Le problème est que ne fonctionne pas pour une raison principale: 1. PageNum = marketing. J'ai besoin que ce soit les chiffres comme pour 'pagination li' ci-dessus. Je ne sais pas comment le réparer correctement.

Dans le cas où je vous confondre, je vais essayer d'expliquer mieux:

Je veux créer un bouton (c.-à-marketing) que lorsque vous cliquez dessus obtenir les données de la base de données et d'affichage, mais je dois aussi les numéros de pagination doivent être «actualisés» pour compenser les nouvelles données.

Si vous avez besoin de plus amples explications, s'il vous plaît faites le moi savoir. Toute aide serait grandement appréciée. Je vous remercie.

Answer 1

Pensez que vous recherchez peut-être .

var pageNum = $(this).index() + 1; 

Gardez à l'esprit que l'indice est 0 basé, par conséquent le module complémentaire 1.

Cela aussi dépend de votre balise html, car les rendements des indices:

un entier indiquant la position de le premier élément de l'objet jQuery par rapport à ses éléments frères.

EDIT:

Donc, si, lorsque vous mettez à jour le contenu de #content, vous modifiez également l'attribut des données pages, vous pouvez aussi avoir cette information lorsque vous cliquez sur #marketing, vous savez que page à obtenir.

Cela fonctionnerait également si vous deviez donner à l'un des éléments LI une classe "current-page" et obtenir ensuite l'id de la classe .current-class.

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

Js:

//Pagination Click 
$("#pagination li").click(function(){ 
    //... 
    $("#content").load("pagination_data.php?page=" + pageNum, function(){ 
      Hide_Load(); 
      $(this).attr('data-page', pageNum); 
    }); 
}); 


$("#pagination p").click(function() { 
    //... 
    var pageNum = $('#content').attr('data-page'); 

    $("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load()); 
});