Hello all,
I am trying to utilize a pagination plugin from pagination.js.org. I am having a dickens of a time trying to get this plugin to work with my database. I thought since it is a plugin I would have an easier time. Does anybody here know how to get this plugin to work with content (mainly photos) in a database? I would appreciate the help.
This is the php page that queries the database. I just converted it to json format, thinking it would make a difference. Whether in json or just a plain query, It appears to be fine. I can go directly to the page and the content loads fine from the database.
//theajax.php
$sql = "SELECT memberphotos.*
FROM memberphotos
LEFT JOIN
users
ON
memberphotos.user_id = users.id",
$result = $db->query($sql);
$rows = $result->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rows);
foreach($rows as $row) {
$memberphoto = $row['photo'];
echo '<div><p>' . $memberphoto . '</p></div>';
}
Now here is the ajax call I am currently making. I have tried many different things here but this last one gives me undefined values versus no response, which I have had for several days. However nothing from the database is being displayed. Please note, much of this is taken from the pagination.js website. I still have not got my head around the proper way to use this thing yet.
(function(name) {
var container = $('#pagination-' + name);
container.pagination({
dataSource: function(done) {
$.ajax({
type: 'GET', //I have also tried 'POST'
url: 'theajax.php',
dataType: 'json',
beforeSend: function() {
container.prev().html('Loading ...');
},
success: function(response) {
done(response);
}
});
},
locator: 'data',
totalNumber: 120,
pageSize: 2,
showGoInput: true,
showGoButton: true,
formatGoInput: 'go to <%= input %>',
callback: function(response, pagination) {
window.console && console.log(22, response, pagination);
var dataHtml = '<ul>';
$.each(response, function (index, item) {
dataHtml += '<li>' + item.title + '</li>';
});
dataHtml += '</ul>';
container.prev().html(dataHtml);
}
})
})('demo2');
The HTML markup for the pagination is simply from the pagination.js.org website.
<section>
<div class="data-container"></div>
<div id="pagination-demo2"></div>
</section>
If this is not enough information to determine the problem, I am more than happy to supply what is needed. Thanks in advance. Cheers.