I'm working on a searchable archive of my Tumblr feed, which I use in my website as a news feed. I want the user to be able to click tags to search by them, which currently works. But when I get to pagination, I get lost. Admittedly, I am simply trying to combine the pagination code I've gotten to work on other things with the tag search I put together, so I'm fairly certain there's a simple fix here I just haven't wrapped my head around yet. Here's what I'm working with so far. The code limits displaying results to two right now because I don't have a lot of posts with similar tags yet:
$(document).ready(function() {
//create blank Tag array
var tagLinks = [];
//pagination offset
var o = 0;
//tag search from URL variable
var url = window.location.search;
var temp = url.split('=');
var tag = temp[1];
//start on Page 1 of results
if (window.location.search.indexOf('page=') > -1) {
var url = $(location).attr('href');
url = url.split("=");
o = url[1] * 2 - 2;
}
$.ajax({
type: 'GET',
url: 'http://api.tumblr.com/v2/blog/nevermorestudiosonline.tumblr.com/posts?tag=' + tag + '&api_key=<API_KEY_OMITTED>&offset=' + o + '&limit=2',
data: { get_param: 'value' },
dataType: 'jsonp',
success: function (data) {
for (i = 0; i < data.response.posts.length; i++) {
//prep Date
var dateConv = new Date(data.response.posts[i].date);
var month = dateConv.getMonth();
var day = dateConv.getDate();
var year = dateConv.getFullYear();
$('#results').append(
'<a href="' + data.response.posts[i].short_url + '">'
+ '<h2>' + data.response.posts[i].title + '</h2>'
+ '</a>'
+ '</div>'
+ '<div class="row">'
+ '<div class="postedby col-sm-6 col-md-6">'
+ '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />'
+ '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />'
+ '<span class="glyphicon glyphicon-time"></span> '+ (month + 1) + '/' + day + '/' + year + '</p>'
+ '</div>'
+ '<div class="col-sm-6 col-md-6" id="tags_'+i+'">'
+ '<span class="glyphicon glyphicon-bookmark"></span>'
+ '</div>'
+ '</div>'
+'<hr />');
//display other tags
if (data.response.posts[i].tags.length == 0){
$('#tags_'+i).append(' No Tags');
}
else {
for (k=0; k < data.response.posts[i].tags.length; k++){
var dashedTag = data.response.posts[i].tags[k].replace(/ /g,"%20");
tagLinks.push(dashedTag);
$('#tags_'+i).append(
' <a href="tagsearch.php?tag=' + tagLinks[k] + '">#' + data.response.posts[i].tags[k] + '</a>'
);
};
};
}
//pagination
var result = 0;
result = data.response.total_posts / 2;
for (j = 1; j <= Math.ceil(result); j++) {
$('#mutlipage').append('<a style="border: 1px solid #ccc; margin: 2px; border-radius: 5px; text-decoration: none; padding: 5px 10px; color: #000;" href="?page=' + j + '">' + j + '</a>');
};
//check log for results to verify accuracy
console.log(o);
console.log(tag);
console.log(data);
}
});
});
Now when I attempt to simply add the tag variable into the appended anchor code, pagination doesn't work properly and it tacks another &page= on the end of the anchor, until I end up with something like /tagsearch.php?tag=updates&page=&page=&page=&page=2. Then everything just...well...doesn't work.