Эй, я пытаюсь добавить кнопку, которая при нажатии будет захватывать данные из базы данных mysql и отображать ее с разбиением на страницы. Однако я не могу заставить его работать правильно.
Первая главная страница выглядит так: 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 />
Кнопка выше на этой странице выглядит следующим образом:
<p id="marketing">MARKETING</p>
Итак, когда пользователь нажимает на это, мне нужно его для получения результатов из db.
Я делаю это с помощью 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, 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" выше. Я не знаю, как правильно его исправить.
В случае, если я запутаю вас, я попытаюсь объяснить лучше:
Я хочу создать кнопку (например, маркетинг), которая при нажатии будет получать данные из базы данных и отображения, но мне также нужно, чтобы номера страниц были "обновлены", чтобы компенсировать новые данные.
Если вам нужны дополнительные объяснения, сообщите мне. Любая помощь будет принята с благодарностью. Спасибо.
Подумайте, что вы можете искать index()
.
var pageNum = $(this).index() + 1;
Имейте в виду, что индекс основан на 0, поэтому добавьте 1.
Это также зависит от вашей разметки html, потому что индекс возвращает:
целое число, указывающее положение первого элемента в объекте jQuery относительно его элементов sibling.
EDIT:
Итак, если при обновлении содержимого #content вы также измените атрибут страницы данных, вы также можете получить эту информацию при нажатии на #marketing, чтобы вы знали, какую страницу нужно получить.
Это также сработает, если вы должны дать одному из элементов LI класс "текущей страницы", а затем получить идентификатор 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());
});
this.id
на $(this).index()
?