版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/song_jiang_long/article/details/52805184
还是先看效果图吧
不废话,直接上代码
对应HTML代码如下
<span style="font-family:Microsoft YaHei;font-size:14px;"><div class="panel-heading">
选择生产企业 <input data-bind="value:keyWord" placeholder="输入企业名称关键字" class="input-sm form-control" /> <button data-bind="click:searchCompany" class="btn blue-sharp btn-sm"> <i class="icon-search"></i> 搜索</button>
<button data-bind="click:closeCompany" type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
</div>
<div class="panel-body">
<div class="btn-group" data-bind="foreach:filters">
<button class="btn btn-default btn-xs" data-bind="click:$parent.chooseFilter.bind($data,$data),text:$data,css:{'blue-sharp':$data==$parent.filter()}"></button>
</div>
<h3 class="text-center lead text-danger" data-bind="visible:companyList().length==0">暂无数据!</h3>
<hr />
<div class="row" data-bind="foreach:companyList">
<label class="col-sm-4"><input type="radio" name="companyList" data-bind="value:id,checked:$parent.companyId" /><!--ko text:(name&& name.length>7)?(name.substr(0,7)+'...'):name--><!--/ko--></label>
</div>
<div class="row text-center " style="margin-top: 10px;">
<div class="btn-group">
<button class="btn btn-default btn-sm" data-bind="click:reducePage">上一页</button>
<!--ko foreach:pages-->
<button class="btn btn-default btn-sm" data-bind="click:$parent.changePage.bind($data,$data),text:$data,css:{'blue-sharp':$data==$parent.currentPage()}"></button>
<!--/ko-->
<button class="btn btn-default btn-sm" data-bind="click:plusPage">下一页</button>
共<span data-bind="text:totalPages"></span>页 跳转到第<input data-bind="value:currentPage" class="input-sm form-control" style="width: 40px;" />页
</div>
</div>
</div></span>对应Js代码
<span style="font-family:Microsoft YaHei;font-size:14px;"> //获取生产企业分页数据
var getCompanyListByPage = function () {
var params = { filter: viewData.filter(), keyWords: viewData.keyWord(), pageIndex: viewData.currentPage(), pageSize: 30 };
$.ajaxRequest("Post", "/byl/GetCompanyList", params, "json", true).done(function (res) {
if (res.isSuccess) {
viewData.currentPage(res.pageIndex);
viewData.totalPages(res.totalPages);
viewData.updatePages(res.pageIndex, res.totalPages);
viewData.companyList(res.data);
} else {
$.alert(res.errMsg, { icon: 8 });
}
}).fail(function () {
$.alert("未知错误!", { icon: 8 });
});
};
/*****************************分页信息******************************/
viewData.currentPage = ko.observable(1);
viewData.totalPages = 0;
viewData.pages = [];
//下一页
viewData.plusPage = function () {
var p = parseInt(viewData.currentPage(), 10);
if ((p > 0) && (p < viewData.totalPages())) {
viewData.currentPage(p + 1);
viewData.updatePages(p + 1, viewData.totalPages());
}
return false;
};
//上一页
viewData.reducePage = function () {
var p = parseInt(viewData.currentPage(), 10);
if (p > 1) {
viewData.currentPage(p - 1);
viewData.updatePages(p - 1, viewData.totalPages());
}
return false;
};
//翻页
viewData.changePage = function (p) {
viewData.currentPage(p);
viewData.updatePages(p, viewData.totalPages());
};
//更新页码信息
viewData.updatePages = function (pageIndex, totalPages) {
var pages = [];
if (totalPages < 7) {
for (var a = 1; a <= totalPages; a++) {
pages.push(a);
}
} else {
var b = (pageIndex - 3) > 1 ? (pageIndex - 3) : 1,
c = (pageIndex + 3) > totalPages ? (totalPages - 6) : pageIndex,
d = pageIndex - 3;
if ((pageIndex - 3) < 1) {
for (; b <= totalPages && pages.length < 7; b++) {
pages.push(b);
}
}
if ((pageIndex + 3) > totalPages) {
for (; c <= totalPages && pages.length < 7; c++) {
pages.push(c);
}
}
if ((pageIndex - 3) > 0 && (pageIndex + 3) <= totalPages) {
for (; d <= totalPages && pages.length < 7; d++) {
pages.push(d);
}
}
}
viewData.pages(pages);
};
viewData.currentPage.subscribe(function (p) {
p = parseInt(p, 10);
if (p < 1) {
viewData.currentPage(1);
}
if (p > viewData.totalPages()) {
viewData.currentPage(viewData.totalPages());
}
getCompanyListByPage();
//viewData.updatePages(parseInt(p, 10), viewData.totalPages());
});
/*****************************分页信息******************************/</span>