把手js ajax表单结果和分页偏移
[英]Handlebars js ajax form result and pagination offset
问题描述
我想从数据库中获取内容，并为此程序使用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>
1 个解决方案
解决方案1
0 2018-03-17 18:48:46
我可以通过编写自定义runAjax函数并在提交表单和changePage函数内部调用它来完成工作
使用Handlebars.js处理executeSql语句的结果
[英]Process the result of an executeSql statement using Handlebars.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.