前端ABC背景： 因为项目特殊性，分页功能，后台没法像常规方法一样从数据库分页查找数据。所以前台会获取所有的数据，然后进行前台分页。关键字查询也是因为上述原因，用的是js自带的indexOf()方法。
使用的插件和方法：
1. ajax
2. handlerbars模板引擎
3. jQuery插件开发过程
代码结构如下：
html代码：
<!-- 数据展示区域-->
<table>
<tbody id="margin-panel"></tbody>
</table>
<div class="page">
<ul class="pure-paginator">
<li><a class="pure-button first" href="javascript:void(0)" data-page-index="1">首页</a></li>
<li><a class="pure-button prev" href="javascript:void(0)">上一页</a></li>
<li class="pageBtnGroup"></li>
<!--翻页按钮-->
<li><a class="pure-button next" href="javascript:void(0)">下一页</a></li>
<li><a class="pure-button last" href="javascript:void(0)" data-page-index="">尾页</a></li>
</ul>
</div>
<!-- 所需要的模板 -->
<script id="finamceStocks-template" type="text/x-handlebars-template">
{{#each stocksdata}}
<tr>
<td>{{id}}</td>
<td>{{secCode}}</td>
<td>{{secAbbr}}</td>
<td>{{rate}}</td>
<td>{{branch}}</td>
<td>{{lastUpdateTime}}</td>
</tr>
{{/each}}
</script>
js代码部分：
*.render = function(data){
$(".pure-paginator").paging({
data : stocksdata, /*所有数据*/
numBtnOnepage : 5, /*带页数的按钮数量*/
numOnePage : 10, /*每页显示数据*/
btnGroupLoc : ".pageBtnGroup", /*带页数按钮组容器*/
tpl : "#finamceStocks-template", /*数据展示视图模板*/
tplParam : "stocksdata", /*视图模板参数对象*/
dataLoc : "#margin-panel" /*数据展示容器*/
});
}
自己写的jquery插件paging
/**
* 翻页
* created by wangdong
* 2017/01/23
*
* 数据从0开始计数
* 页数从1开始计数
* 当前对象是所有按钮组(包括上一页、下一页、首页、尾页)
*
*/
(function($){
jQuery.fn.paging = function(options){
/**
@param data {json} 所有的数据
@param numBtnOnePage {number} 显示几个带页数按钮
@param numOnePage {number} 每页显示几条数据
@param btnGroupLoc {selector} 带页数按钮位置
@param tpl {selector} 视图模板
@param tplParam {string} 视图模板的参数对象
@param dataLoc {selector} 视图显示位置
*/
var defaults = {
numBtnOnePage : 5, /*默认5个翻页按钮*/
numOnePage : 7, /*默认显示7条数据*/
};
var opts = $.extend(defaults, options);
opts.numBtnOnePage = Number(opts.numBtnOnePage);
opts.numOnePage = Number(opts.numOnePage);
var $this = $(this),
$firstPageBtn = $this.find(".pure-button.first"), /*首页*/
$lastPageBtn = $this.find(".pure-button.last") , /*尾页*/
$prevPageBtn = $this.find(".pure-button.prev") , /*上一页*/
$nextPageBtn = $this.find(".pure-button.next") ; /*下一页*/
if(opts.data){
var dataLength = opts.data.length,
pageCount = Math.ceil(dataLength/opts.numOnePage); //总页数
// 为产品专区添加显示记录和页数
$this.find(".recordCount .num").text(dataLength);
$this.find(".pageCount .num").text(pageCount);
if(dataLength == 0){
$firstPageBtn.addClass("disabled");
$lastPageBtn.addClass("disabled");
$prevPageBtn.addClass("disabled");
$nextPageBtn.addClass("disabled");
$(opts.dataLoc).html("");
$(opts.btnGroupLoc).html("");
$firstPageBtn.attr({"data-page-index": ""});
$lastPageBtn.attr({"data-page-index": ""});
return 0;
}else {
$firstPageBtn.removeClass("disabled");
$lastPageBtn.removeClass("disabled");
$prevPageBtn.removeClass("disabled");
$nextPageBtn.removeClass("disabled");
$firstPageBtn.attr({"data-page-index": 1});
$lastPageBtn.attr({"data-page-index": pageCount});
}
}
/*
* 切割数据
* @param {number} group 第几组数据
* @return {data} 截取之后的数据
*/
function sliceData(group){
var result = opts.data.slice(0+opts.numOnePage*(group-1), opts.numOnePage+opts.numOnePage*(group-1));
return result;
}
/**
* 创建翻页按钮，创建的新的翻页视图，视方向而定，选中第一个或者最后一个按钮
* @param {number} n 为第几组翻页按钮
* @param {string} direction 翻页方向
* @return {view} 返回一个视图
*/
function pagingBtn(n, direction){
if(direction == "left"){
var lengthBtns = opts.numBtnOnePage;
for(var i = 0, itemList=""; i < lengthBtns; i++){
if(i == lengthBtns-1){
itemList = itemList + '<li><a class="pure-button pure-button-active nowPage" href="javascript:void(0)" data-page-index="'+Number(opts.numBtnOnePage*(n-1)+Number(i+1))+'">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'</a></li>';
}else{
itemList = itemList + '<li><a class="pure-button" href="javascript:void(0)" data-page-index="'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'</a></li>';
}
}
}
if(direction == "right"){
var remainPage = pageCount-opts.numBtnOnePage*(n-1);
var lengthBtns = (opts.numBtnOnePage<remainPage)? opts.numBtnOnePage : remainPage;
for(var i = 0, itemList = ""; i < lengthBtns; i++){
if(i == 0){
itemList = itemList + '<li><a class="pure-button pure-button-active nowPage" href="javascript:void(0)" data-page-index="'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'</a></li>';
}else{
itemList = itemList + '<li><a class="pure-button" href="javascript:void(0)" data-page-index="'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'</a></li>';
}
}
}
$(opts.btnGroupLoc).html(itemList);
}
/**
* [renderTpl description]
* @param {selector} tpl 模板的选择器
* @param {json} pagedata 需要渲染的数据
* @return {view} 返回视图
*/
function renderTpl(tpl, pagedata, dataLoc){
pagedata[opts.tplParam] = pagedata;
var source = $(tpl).html();
var template = Handlebars.compile(source);
$(dataLoc).html(template(pagedata));
}
function bindEvent(){
$this.off("click", ".pure-button").on("click", ".pure-button", function(){
var $thisPage = $(this);
if($thisPage.attr("data-page-index")!=undefined&&$thisPage.attr("data-page-index")!=""){
var thisPageIndex = $thisPage.attr("data-page-index");
var tempData = sliceData(thisPageIndex);
tempData[opts.tplParam] = tempData;
renderTpl(opts.tpl, tempData, opts.dataLoc);
$thisPage.addClass("pure-button-active nowPage")
.parent().siblings().find("a").removeClass("pure-button-active nowPage");
if($this.find("[data-page-index="+thisPageIndex+"]").length>1){
$this.find("[data-page-index="+thisPageIndex+"]").addClass("pure-button-active nowPage");
$this.find("[data-page-index!="+thisPageIndex+"]").removeClass("pure-button-active nowPage");
}else {
$firstPageBtn.removeClass("pure-button-active nowPage");
$lastPageBtn.removeClass("pure-button-active nowPage");
}
if(pageCount == 1){
$prevPageBtn.addClass("disabled");
$nextPageBtn.addClass("disabled");
}else {
if(thisPageIndex == 1) {
$prevPageBtn.addClass("disabled");
$nextPageBtn.removeClass("disabled");
}else if(thisPageIndex == pageCount){
$prevPageBtn.removeClass("disabled");
$nextPageBtn.addClass("disabled");
}else {
$prevPageBtn.removeClass("disabled");
$nextPageBtn.removeClass("disabled");
}
}
}
});
$this.off("click", ".pure-button.prev,.pure-button.next")
.on("click", ".pure-button.prev,.pure-button.next", function(){
var $pageSwitch = $(this);
if($pageSwitch.hasClass("disabled")){
return 0;
}else {
var currentPage = $(opts.btnGroupLoc).find(".pure-button-active.nowPage");
var currentPageIndex = currentPage.attr("data-page-index");
if($pageSwitch.hasClass("prev")){
var prevPageIndex = currentPageIndex - 1;
if(currentPageIndex%opts.numBtnOnePage == 1){
var nGroup = Math.floor(currentPageIndex/opts.numBtnOnePage);
pagingBtn(nGroup, "left");
renderTpl(opts.tpl, sliceData(prevPageIndex), opts.dataLoc);
$nextPageBtn.removeClass("disabled");
}else{
$this.find("[data-page-index="+currentPageIndex+"]").removeClass("pure-button-active nowPage");
$this.find("[data-page-index="+prevPageIndex+"]").addClass("pure-button-active nowPage");
renderTpl(opts.tpl, sliceData(prevPageIndex), opts.dataLoc);
$nextPageBtn.removeClass("disabled");
if(prevPageIndex == 1){
$prevPageBtn.addClass("disabled");
}
}
}else if($pageSwitch.hasClass("next")){
var nextPageIndex = Number(currentPageIndex) + 1;
if(currentPageIndex%opts.numBtnOnePage == 0){
var nGroup = Math.floor(Number(currentPageIndex/opts.numBtnOnePage)+1);
pagingBtn(nGroup, "right");
renderTpl(opts.tpl, sliceData(nextPageIndex), opts.dataLoc);
}else{
$this.find("[data-page-index="+currentPageIndex+"]").removeClass("pure-button-active nowPage");
$this.find("[data-page-index="+nextPageIndex+"]").addClass("pure-button-active nowPage");
renderTpl(opts.tpl, sliceData(nextPageIndex), opts.dataLoc);
$prevPageBtn.removeClass("disabled");
}
if(nextPageIndex == pageCount){
$nextPageBtn.addClass("disabled");
}
}
}
});
$this.off("click", ".pure-button.first,.pure-button.last")
.on("click", ".pure-button.first,.pure-button.last", function(){
var $pageBothEnd = $(this),
currentPage = $pageBothEnd.attr("data-page-index");
if(currentPage!=""){
if($pageBothEnd.hasClass("first")){
if($(opts.btnGroupLoc).filter("li:first").children("a").attr("data-page-index")==1){
return 0;
}else {
pagingBtn(1, "right");
$this.find("[data-page-index=1]").addClass("pure-button-active nowPage");
$this.find("[data-page-index!=1]").removeClass("pure-button-active nowPage");
$prevPageBtn.addClass("disabled");
}
}else if($pageBothEnd.hasClass("last")){
if($(opts.btnGroupLoc).find("li:last").children("a").attr("data-page-index")==pageCount){
return 0;
}else {
pagingBtn(Math.ceil(pageCount/opts.numBtnOnePage), "right");
$this.find("[data-page-index="+pageCount+"]").addClass("pure-button-active nowPage");
$this.find("[data-page-index!="+pageCount+"]").removeClass("pure-button-active nowPage");
$nextPageBtn.addClass("disabled");
}
}
}
});
}
/*函数执行入口*/
$firstPageBtn.removeClass("pure-button-active nowPage");
$lastPageBtn.removeClass("pure-button-active nowPage");
$prevPageBtn.removeClass("disabled");
$nextPageBtn.removeClass("disabled");
pagingBtn(1, "right");
$firstPageBtn.addClass("pure-button-active nowPage");
renderTpl(opts.tpl, sliceData(1), opts.dataLoc);
if(pageCount == 1){
$prevPageBtn.addClass("disabled");
$nextPageBtn.addClass("disabled");
$firstPageBtn.addClass("pure-button-active nowPage");
$lastPageBtn.addClass("pure-button-active nowPage");
bindEvent();
}else if(pageCount == 0){
$prevPageBtn.addClass("disabled");
$nextPageBtn.addClass("disabled");
$prevPageBtn.addClass("disabled");
$nextPageBtn.addClass("disabled");
}else{
$prevPageBtn.addClass("disabled");
bindEvent();
}
}
})(jQuery);
总结：根据设置的每页显示的条数和每页要显示的页数，切割获取来的data，绘制页面和绘制新的按钮组。
前端搜索也是对json进行操作，这个方法仅适用相关字段”secCode”和”secAbbr”
function newsSelect(keyword, jsonData) {
if (keyword == "") {
return jsonData;
} else {
for (var i = 0; i < jsonData.length; {
if (jsonData[i].secCode.indexOf(keyword) > -1 || jsonData[i].secAbbr.indexOf(keyword) > -1) {
i++;
} else {
jsonData.splice(i, 1);
}
}
return jsonData;
}
}
欢迎分享本文，转载请保留出处：前端ABC » ajax获取所有数据，前台分页，搜索