How to pass article id to pangination page with ajax? - php

Question

I am trying to do a pagination for category result page which is listing articles with ajax.
I use where clause and need to pass article id to the ajax page.
My codes : ajax.php
include_once '../db.php';
include_once '../class/Articles.php';
$ArticleHandler = new Articles($pdo);
if (!(isset($_GET['pageNumber']))) {
$pageNumber = 1;
} else {
$pageNumber = $_GET['pageNumber'];
}
$perPageCount = 5;
$catid = $_POST['article_id'];
$sql = "SELECT * FROM posts WHERE pcat = ?";
$posts = $ArticleHandler->getPosts($sql, [$catid])->fetchAll();
if ($posts !== '0') {
$rowCount = $ArticleHandler->getPosts("SELECT count(*) FROM posts")->fetchColumn();
}
$pagesCount = ceil($rowCount/$perPageCount);
$lowerLimit = ($pageNumber - 1) * $perPageCount;
$sql = "SELECT * FROM posts WHERE pcat = :pcat ORDER BY pid DESC LIMIT :offset, :limit";
$results = $ArticleHandler->getPosts($sql, array(':pcat'=>$catid, ':offset'=>$lowerLimit, ':limit'=>$perPageCount))->fetchAll();
?>
<table class="table table-hover table-responsive">
<tr>
<th align="center">Name</th>
<th align="center">Experience<br>(in years)
</th>
<th align="center">Subject</th>
</tr>
<?php foreach ($results as $data) { ?>
<tr>
<td align="left"><?php echo $data['ptitle'] ?></td>
</tr>
<?php
}
?>
</table>
<div style="height: 30px;"></div>
<table width="50%" align="center">
<tr>
<td valign="top" align="left"><?php echo $catid; ?></td>
<td valign="top" align="center">
<?php
for ($i = 1; $i <= $pagesCount; $i ++) {
if ($i == $pageNumber) {
?>
<?php echo $i ?>
<?php
} else {
?>
<a href="javascript:void(0);" class="pages"
onclick="showRecords('<?php echo $perPageCount; ?>', '<?php echo $i; ?>');"><?php echo $i ?></a>
<?php
}
}
?>
</td>
<td align="right" valign="top">
Page <?php echo $pageNumber; ?> of <?php echo $pagesCount; ?>
</td>
</tr>
</table>
And index.php
<div id="results"></div>
<div id="loader"></div>
Ajax codes :
function showRecords(perPageCount, pageNumber) {
$.ajax({
type: "GET",
url: "modules/ajax.php",
data: "pageNumber=" + pageNumber,
cache: false,
beforeSend: function() {
$('#loader').html('<img src="loader.png" alt="reload" width="20" height="20" style="margin-top:10px;">');
},
success: function(html) {
$("#results").html(html);
$('#loader').html('');
}
});
}
$(document).ready(function() {
showRecords(10, 1);
});
My tries : I've added a div with artcile id to index.php and used attr to pass it to ajax but couldn't pass it to the page.

Answer 1

Try passing the article id along with pageNumber that you are passing in GET request.
data: {pageNumber : YOUR_PAGE_NUMBER, articleId: ARTICLE_ID}
Do not forget to pass the articleId as 3rd parameter to the function.