把手js ajax表单结果和分页偏移
[英]Handlebars js ajax form result and pagination offset
问题描述
I want fetch content from database and using Handlebars and ajax for this program. 
我想从数据库中获取内容，并为此程序使用Handlebars和ajax。 When submit form get ajax data from database and I have pagination for content result. 当提交表单时，从数据库获取ajax数据，我对内容结果进行了分页。 If get all data from database with json format my pagination work and not have problem but I do not need it. 如果从json格式的数据库中获取所有数据，我的分页工作不会有问题，但是我不需要它。 I wand have offset and paginate content and after fetch ajax first page result by submit form then get content from database on click another page number or click prev or next button. 我想获取偏移量和分页内容，并通过提交表单获取ajax第一页结果，然后单击另一个页码或单击上一个或下一个按钮从数据库中获取内容。 My code for this program this is: 我对此程序的代码是：
<!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函数内部调用它来完成工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用把手js的分页功能 - Pagination Functionality using handlebars js
mongoose 和车把中的分页使用节点 js - Pagination in mongoose and handlebars using node js
Node.js中的车把+车把-辅助工具-空结果 - Handlebars + handlebars-helper-prettify in node.js: empty result
使用React JS进行搜索结果分页 - Search result pagination with React JS
使用Moustache JS进行Ajax分页？ - Ajax pagination using Mustache JS?
Ajax表单提交无结果 - Ajax form submit no result
提交带有ajax结果的表格 - Submit Form with ajax result
使用Handlebars.js处理executeSql语句的结果 - Process the result of an executeSql statement using Handlebars.js
在Node js中使用AJAX并使用把手显示数据 - Using AJAX in Node js and displaying data using Handlebars
如何在Ajax Post过滤结果上添加Ajax分页 - How to Add Ajax Pagination On Ajax Post filter Result
相关标签