我想从数据库中获取内容，并为该程序使用Handlebars和ajax。当提交表单时，从数据库中获取ajax数据，并且我对内容结果进行了分页。如果使用json格式从数据库中获取所有数据，我的分页工作没有问题，但我不需要它。我魔杖有偏移和分页内容，在通过提交表单获取 ajax 第一页结果后，然后在单击另一个页码或单击上一个或下一步按钮时从数据库中获取内容。我的这个程序的代码是：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Handlebars Pagination</title>
<link href="main.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="handlebars.min.js"></script>
<script src="functions.js"></script>
</head>
<body class="container">
<div id="posts"></div>
<h3>Filter Content</h3>
<form action="" id="filter-form" name="filter-form" method="post">
<input type="text" id="searchText" name="searchText"/>
<input type="submit" value="submit"/>
</form>
<div id="acfilter-content">
<div id="posts"></div>
<script id="post-template" type="text/x-handlebars-template">
<div class="score-structural score-column2-wideright search-listings post">
<div class="score-right">
<h4>{{record_count}}</h4>
<h5 style="z-index: 1;">
<a href="#"> {{ title }} </a>
</h5>
<p style="z-index: 1;"> {{ desc }} </p>
</div>
</div>
<hr>
</script>
<script id="pagination-template" type="text/x-handlebars-template">
<ul class="pagination">
<li class="pagination-prev"><a href="#">«</a></li>
{{#each pages}}
<li class="pagination-page" data-page="{{this}}"><a href="#">{{this}}</a></li>
{{/each}}
<li class="pagination-next"><a href="#">»</a></li>
</ul>
</script>
<script>
$(function () {
var opts = {
pageMax: 2,
postsDiv: $('#posts'),
dataUrl: "index.php"
}
function loadPosts(posts) {
opts.postsDiv.empty();
posts.each(function () {
var source = $("#post-template").html();
var template = Handlebars.compile(source);
var context = {
title: this.title,
desc: this.body,
};
var html = template(context);
opts.postsDiv.append(html);
});
hidePrev();
}
function hidePrev() { $('.pagination .pagination-prev').hide(); }
function showPrev() { $('.pagination .pagination-prev').show(); }
function hideNext() { $('.pagination .pagination-next').hide(); }
function showNext() { $('.pagination .pagination-next').show(); }
function paginate(page,pageCount) {
var source = $("#pagination-template").html();
var template = Handlebars.compile(source);
var context = { pages: range(page,pageCount) };
console.log(range(page,pageCount));
var html = template(context);
var paginationTag = opts.postsDiv.parent().find(".pagination");
paginationTag.length > 0 ? paginationTag.replaceWith(html) : opts.postsDiv.after(html);
function changePage(page) {
pageItems.removeClass('active');
pageItems.filter('[data-page="' + page + '"]').addClass('active');
loadPosts(data.slice(page * opts.pageMax - opts.pageMax, page * opts.pageMax));
paginate(page,pageCount);
if (gotoPageNumber <= 1) {
hidePrev();
}
}
var pageItems = $('.pagination>li.pagination-page');
var pageItemsLastPage = $('.pagination li').length - 2;
pageItems.removeClass('active');
pageItems.filter('[data-page="' + page + '"]').addClass('active');
pageItems.on('click', function () {
getDataPageNo = this.getAttribute('data-page')
console.log(getDataPageNo)
changePage(getDataPageNo);
if (getDataPageNo == 1) {
hidePrev()
}
else if (getDataPageNo == pageItemsLastPage) {
hideNext();
}
else {
showPrev();
showNext();
}
});
$('.pagination>li.pagination-prev').on('click', function () {
gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) - 1;
changePage(gotoPageNumber);
});
$('.pagination>li.pagination-next').on('click', function () {
gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) + 1;
if (gotoPageNumber > pageCount) {
gotoPageNumber = 1;
showPrev();
}
changePage(gotoPageNumber);
});
}
$("#filter-form").submit(function(e) {
var pageNumber = parseInt($('.pagination>li.active').attr('data-page'));
if(!pageNumber) pageNumber = 1;
var searchText = arasjQuery('#searchText').val();
$.ajax({
dataType: 'json',
url: opts.dataUrl,
type: 'POST',
data: {
'searchText': searchText,
'pageNumber': pageNumber
},
success: function (response_json) {
if(response_json){
console.log(response_json);
data = $(response_json.records.page);
//dataCount = data.length;
dataCount = response_json.recourd_count;
pageCount = Math.ceil(dataCount / opts.pageMax);
console.log(pageCount);
if (dataCount > opts.pageMax) {
paginate(1,pageCount);
posts = data.slice(0, opts.pageMax);
} else {
posts = data;
}
loadPosts(posts);
}else{
alert("No Data");
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
});
</script>
</div>
</body>
</html>
我可以通过编码自定义 runAjax 函数来完成它，并在提交表单和 changePage 函数内部调用它，它现在可以工作了