本文主要是介绍完全基于KnockoutJs实现的分页查询，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
还是先看效果图吧
不废话,直接上代码
对应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>这篇关于完全基于KnockoutJs实现的分页查询的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
