分页问题需要帮助 [英] Pagination problem needing assistance
问题描述
嘿，我试图添加一个按钮，当单击该按钮时，它将从mysql数据库中获取数据并分页显示.但是，我似乎无法使其正常工作.
Hey, I'm trying to add a button that when clicked will grab data from the mysql database and display it with a pagination. However, I can't seem to get it to work properly.
第一个主页看起来像这样: pagination.php:
The first main page looks like this: 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 />
该页面上方的按钮如下所示:
The button above in that page looks like this as you can see:
<p id="marketing">MARKETING</p>
因此，当用户单击此按钮时，我需要它来从数据库中获取结果.
So, when the user clicks this I need it to get the results from the db.
我用这样的jquery来做到这一点:
I do this with jquery like this:
$(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());
});
});
问题是由于以下主要原因而无法正常工作: 1. PageNum =营销.我需要像上面的"pagination li"这样的数字.我不知道如何正确修复它.
The problem is that does not work for one main reason: 1. PageNum = marketing. I need it to be the numbers like for 'pagination li' above. I do not know how to fix it properly.
如果我让您感到困惑，我会尽力向您解释:
In case I'm confusing you, I will try to explain better:
我想创建一个按钮(即营销")，单击该按钮将从数据库中获取数据并显示，但是我还需要刷新"分页码以补偿新数据.
I want to create a button (i.e. Marketing) that when clicked will get the data from the database and display, but I also need the pagination numbers to be 'refreshed' to compensate for the new data.
如果您需要进一步的说明，请告诉我.任何帮助将不胜感激.谢谢你.
If you need further explanation, please let me know. Any help would be greatly appreciated. Thank you.
推荐答案
var pageNum = $(this).index() + 1;
请记住，索引基于0，因此加1.
Keep in mind that index is 0 based, hence the add 1.
这也将取决于您的html标记，因为索引返回:
This would also be dependent on your html markup because index returns:
一个整数，指示第一个元素在jQuery对象中相对于其同级元素的位置.
an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
因此，如果在更新#content的内容时也更改了data-page属性，则在单击#marketing时也可以获取该信息，从而知道要获取哪个页面.
So if, when you update the content of #content, you also change the data-page attribute, you can also have that information when you click on #marketing, so you know which page to get.
如果您要给LI元素之一提供当前页"类，然后获取.current-class LI的ID，这也将起作用.
This would also work if you were to give one of the LI elements a "current-page" class and then get the id of the .current-class LI.
<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());
});
这篇关于分页问题需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
