这篇文章主要围绕bootstrap-paginator分页-前后台用法示例和bootstrap前端分页展开，旨在为您提供一份详细的参考资料。我们将全面介绍bootstrap-paginator分页-前
这篇文章主要围绕bootstrap-paginator分页-前后台用法示例和bootstrap前端分页展开，旨在为您提供一份详细的参考资料。我们将全面介绍bootstrap-paginator分页-前后台用法示例的优缺点，解答bootstrap前端分页的相关问题，同时也会为您带来Angular ui.bootstrap.pagination 分页、Angular ui.bootstrap.pagination分页、bootstrap + bootstrap-table + jquery + bootstrap-paginator、Bootstrap CSS组件之分页(pagination)和翻页(pager)的实用方法。
本文目录一览：- bootstrap-paginator分页-前后台用法示例（bootstrap前端分页）
- Angular ui.bootstrap.pagination 分页
- Angular ui.bootstrap.pagination分页
- bootstrap + bootstrap-table + jquery + bootstrap-paginator
- Bootstrap CSS组件之分页(pagination)和翻页(pager)
bootstrap-paginator分页-前后台用法示例（bootstrap前端分页）
总结
以上是小编为你收集整理的bootstrap-paginator分页-前后台用法示例全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
Angular ui.bootstrap.pagination 分页
1、Html
<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width" />
<title>MyPagination</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script>
var readyDataUrl = '@Url.Content("~/StudentManage/GetPagelist")';
var loadDataUrl = '@Url.Content("~/StudentManage/GetPagelist")';
var app = angular.module('app',['ui.bootstrap']);
app.controller('ctrl',['$log','$http','$scope',function ($log,$http,$scope) {
$scope.reportData = [];
$scope.maxSize = 7;
$scope.currentPage = 0;
$scope.totalItems = 0;
$scope.pageChanged = function () {
//showLoading("正在查询");
$http.post(loadDataUrl,{
pageIndex: $scope.currentPage,pageSize: 10,name: ""
})
.then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
}).catch(function (error) {
$log.error('error:' + error);
}).finally(function () {
//closeLoading();
});
}
$scope.Inital = function () {
//showLoading("正在查询");
$http.post(readyDataUrl,name: ""
}).then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
//closeLoading();
}).catch(function (error) {
$log.error('error:' + error);
}).finally(function () {
});
}
$scope.Inital();
$scope.search = function () {
//showLoading("正在查询");
$http.post(loadDataUrl,{})
.then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
}).catch(function (error) {
$log.error('error:' + error);
}).finally(function () {
//closeLoading();
});
}
}]);
</script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<divid="toolbar">
<table>
<tr>
<td>
<button type="button"id="btnSearch" ng-click="search()">查询</button>
</td>
</tr>
</table>
<div>
<divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom: 0px;">
<div>
<table>
<thead>
<tr>
<th><div>序号</div></th>
<th><div>姓名</div></th>
<th><div>电话</div></th>
<th><div>邮箱</div></th>
<th><div>年龄</div></th>
<th><div>国家</div></th>
<th><div>城市</div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="o in reportData">
<td><span ng-bind="o.Id"></span></td>
<td><span ng-bind="o.Name"></span></td>
<td><span ng-bind="o.Telephone"></span></td>
<td><span ng-bind="o.Email"></span></td>
<td><span ng-bind="o.Age"></span></td>
<td><span ng-bind="o.Country"></span></td>
<td><span ng-bind="o.City"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<paginationitems-per-page="10" @*每页最大显示条数的数量。值小于1表明所有项目在一个页上*@
ng-model="currentPage"
total-items="totalItems" @*所有页中的项目总数*@
max-size="maxSize" @*限制分页按钮显示的数量大小*@
ng-change="pageChanged()" @*点击分页按钮触发的方法，可用于更改不同页面数据*@
boundary-links="false" @*是否显示第一个/最后一个按钮*@
boundary-link-numbers="true" @*是否显示第一个和最后一个页码*@
rotate="false" @*是否将当前激活页显示在中间*@
force-ellipses="true" @*当总页数大于最大显示页数（max-size）显示省略号按钮*@
prevIoUs-text="‹" @*上一个按钮的文本*@
next-text="›"> @*下一个按钮的文本*@
</pagination>
</div>
</div>
</body>
</html>
2、Action
[HttpPost]
public JsonResult GetPagelist(int pageIndex,int pageSize,string name)
{
int pageCount = 1;
int recordTotal = 0;
int topRecordTotal = 0;
List<Students> list = new List<Students>();
try
{
list = svc.GetAllStudent();
recordTotal = list.Count();
pageCount = (int)Math.Ceiling((decimal)recordTotal / pageSize);
topRecordTotal = (pageIndex - 1 < 0 ? 0 : pageIndex - 1) * pageSize;
list = list.Skip(topRecordTotal).Take(pageSize).ToList();
}
catch (Exception)
{
throw;
}
return Json(new
{
pageIndex = pageIndex,pageCount = pageCount,recordTotal = recordTotal,Data = list,},JsonRequestBehavior.AllowGet);
}
Angular ui.bootstrap.pagination分页
本文实例为大家分享了Angular 分页的具体代码，供大家参考，具体内容如下
1、Html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MyPagination</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script>
var readyDataUrl = ''@Url.Content("~/StudentManage/GetPageList")'';
var loadDataUrl = ''@Url.Content("~/StudentManage/GetPageList")'';
var app = angular.module(''app'', [''ui.bootstrap'']);
app.controller(''ctrl'', [''$log'', ''$http'', ''$scope'', function ($log, $http, $scope) {
$scope.reportData = [];
$scope.maxSize = 7;
$scope.currentPage = 0;
$scope.totalItems = 0;
$scope.pageChanged = function () {
//showLoading("正在查询");
$http.post(loadDataUrl, {
pageIndex: $scope.currentPage,
pageSize: 10,
name: ""
})
.then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
}).catch(function (error) {
$log.error(''error:'' + error);
}).finally(function () {
//closeLoading();
});
}
$scope.Inital = function () {
//showLoading("正在查询");
$http.post(readyDataUrl, {
pageIndex: $scope.currentPage,
pageSize: 10,
name: ""
}).then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
//closeLoading();
}).catch(function (error) {
$log.error(''error:'' + error);
}).finally(function () {
});
}
$scope.Inital();
$scope.search = function () {
//showLoading("正在查询");
$http.post(loadDataUrl, {})
.then(function (result) {
$scope.reportData = result.data.Data;
$scope.totalItems = result.data.recordTotal;
}).catch(function (error) {
$log.error(''error:'' + error);
}).finally(function () {
//closeLoading();
});
}
}]);
</script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<divid="toolbar">
<table>
<tr>
<td>
<button type="button"id="btnSearch" ng-click="search()">查询</button>
</td>
</tr>
</table>
<div>
<div>
<div>
<table>
<thead>
<tr>
<th><div>序号</div></th>
<th><div>姓名</div></th>
<th><div>电话</div></th>
<th><div>邮箱</div></th>
<th><div>年龄</div></th>
<th><div>国家</div></th>
<th><div>城市</div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="o in reportData">
<td><span ng-bind="o.Id"></span></td>
<td><span ng-bind="o.Name"></span></td>
<td><span ng-bind="o.Telephone"></span></td>
<td><span ng-bind="o.Email"></span></td>
<td><span ng-bind="o.Age"></span></td>
<td><span ng-bind="o.Country"></span></td>
<td><span ng-bind="o.City"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<paginationng-model="currentPage"
total-items="totalItems"
max-size="7"
ng-change="pageChanged()"
force-ellipses="true"
num-pages="numPages"
boundary-link-numbers="true"
boundary-links="false" @*是否显示第一个/最后一个按钮*@
rotate="false"
previous-text="‹"
next-text="›">
</pagination>
</div>
</div>
</body>
</html>
2、Action
[HttpPost]
public JsonResult GetPageList(int pageIndex, int pageSize, string name)
{
int pageCount = 1;
int recordTotal = 0;
int topRecordTotal = 0;
List<Students> list = new List<Students>();
try
{
list = svc.GetAllStudent();
recordTotal = list.Count();
pageCount = (int)Math.Ceiling((decimal)recordTotal / pageSize);
topRecordTotal = (pageIndex - 1 < 0 ? 0 : pageIndex - 1) * pageSize;
list = list.Skip(topRecordTotal).Take(pageSize).ToList();
}
catch (Exception)
{
throw;
}
return Json(new
{
pageIndex = pageIndex,
pageCount = pageCount,
recordTotal = recordTotal,
Data = list,
}, JsonRequestBehavior.AllowGet);
}
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
- Angularjs中的ui-bootstrap的使用教程
- 详解Angular-ui-BootStrap组件的解释以及使用
bootstrap + bootstrap-table + jquery + bootstrap-paginator
http://127.0.0.1:8848/pangBo/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="js/bootstrap-paginator.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<formrole="search">
<div>
<div>
<div>
<label>客户编号: </label>
<div>
<input type="text"placeholder="">
</div>
</div>
<div>
<label>客户姓名: </label>
<div>
<input type="text"placeholder="">
</div>
</div>
<div>
<label>手机号码: </label>
<div>
<input type="text"placeholder="">
</div>
</div>
</div>
<div>
<div>
<label>客户编号: </label>
<div>
<input type="text"placeholder="">
</div>
</div>
<div>
<label>客户编号: </label>
<div>
<input type="text"placeholder="">
</div>
</div>
<div>
<label>客户编号: </label>
<div>
<input type="text"placeholder="">
</div>
</div>
</div>
<div>
<button type="submit">查询</button>
</div>
</div>
</form>
</div>
<div>
<divrole="group" aria-label="...">
<button type="button" id="btn-one">可撤单</button>
<button type="button" id="btn-two">已撤单</button>
</div>
</div>
<div id="table-one">
<table id="table"></table>
<div>
<div id="example">
<ul id="pageLimit"></ul>
</div>
</div>
</div>
<div id="table-two">
<table id="table-ta-one"></table>
<div>
<div id="example-two">
<ul id="pageLimit-two"></ul>
</div>
</div>
</div>
<divid="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div>
<div>
<div>
<button type="button"data-dismiss="modal" aria-hidden="true">×</button>
<divid="myModalLabel">请输入登录密码:</div>
</div>
<div>
<div>
<input id="input-text" type="text" value=""placeholder="">
</div>
<button type="button" id="btn-ok">确定撤单</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function operateFormatter(value, row, index) {
return [
''<button type="button"data-toggle="modal" data-target="#myModal">撤单</button>''
].join('''');
}
window.operateEvents = {
''click .RoleOfdelete'': function(e, value, row, index) {
console.log(''kkk'');
}
};
$(''#table'').bootstrapTable({
url: '''', //请求后台的URL（*）
method: ''GET'', //请求方式（*）
// toolbar: ''#toolbar'', //工具按钮用哪个容器
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: false, //是否显示分页（*）
// pageSize: 10, //每页的记录行数（*）
// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
uniqueId: "id", //每一行的唯一标识，一般为主键列
columns: [{
field: ''id'',
align: ''center'',
title: ''交易合同号''
},
{
field: ''ida'',
align: ''center'',
title: ''客户编号''
},
{
field: ''idb'',
align: ''center'',
title: ''客户姓名''
},
{
field: ''idc'',
align: ''center'',
title: ''手机号码''
},
{
field: ''idd'',
align: ''center'',
title: ''证件号码''
},
{
field: ''ide'',
align: ''center'',
title: ''产品代码''
},
{
field: ''idf'',
align: ''center'',
title: ''产品名称''
},
{
field: ''idg'',
align: ''center'',
title: ''购买金额''
},
{
field: ''idh'',
align: ''center'',
title: ''交易时间''
},
{
field: ''idi'',
align: ''center'',
title: ''撤单'',
events: operateEvents,
formatter: operateFormatter
},
],
data: [{
id: 1
},
{
id: 1
},
{
id: 1
}
],
onLoadError: function() {
showTips("数据加载失败！");
},
});
$(''#table-ta-one'').bootstrapTable({
url: '''', //请求后台的URL（*）
method: ''GET'', //请求方式（*）
// toolbar: ''#toolbar'', //工具按钮用哪个容器
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: false, //是否显示分页（*）
// pageSize: 10, //每页的记录行数（*）
// pageNumber: 1, //初始化加载第一页，默认第一页,并记录
// sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
uniqueId: "id", //每一行的唯一标识，一般为主键列
columns: [{
field: ''id'',
align: ''center'',
title: ''交易合同号''
},
{
field: ''ida'',
align: ''center'',
title: ''客户编号''
},
{
field: ''idb'',
align: ''center'',
title: ''客户姓名''
},
{
field: ''idc'',
align: ''center'',
title: ''手机号码''
},
{
field: ''idd'',
align: ''center'',
title: ''证件号码''
},
{
field: ''ide'',
align: ''center'',
title: ''产品代码''
},
{
field: ''idf'',
align: ''center'',
title: ''产品名称''
},
{
field: ''idg'',
align: ''center'',
title: ''购买金额''
},
{
field: ''idh'',
align: ''center'',
title: ''交易时间''
}
],
data: [{
id: 1
},
{
id: 1
},
{
id: 1
}
],
onLoadError: function() {
showTips("数据加载失败！");
},
});
$(''#btn-one'').click(function() {
console.log(''kk'');
$(''#table-one'').show();
$(''#table-two'').hide();
$(''#btn-one'').css({
''background-color'': ''#e6e6e6''
})
})
$(''#btn-two'').click(function() {
console.log(''kkk'');
$(''#table-two'').show();
$(''#table-one'').hide();
$(''#btn-one'').css({
''background-color'': ''#FFF''
})
})
$(''#pageLimit'').bootstrapPaginator({
currentPage: 1, //当前的请求页面。
totalPages: 100, //一共多少页。
size: "normal", //应该是页眉的大小。
bootstrapMajorVersion: 3, //bootstrap的版本要求。
alignment: "right",
numberOfPages: 5, //一页列出多少数据。
itemTexts: function(type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
}
});
$(''#pageLimit-two'').bootstrapPaginator({
currentPage: 1, //当前的请求页面。
totalPages: 100, //一共多少页。
size: "normal", //应该是页眉的大小。
bootstrapMajorVersion: 3, //bootstrap的版本要求。
alignment: "right",
numberOfPages: 5, //一页列出多少数据。
itemTexts: function(type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
}
});
$(''#btn-ok'').click(function() {
var inputContent = $(''#input-text'').val();
if (inputContent == '''') {
alert(''密码不能为空 !'');
}
console.log(inputContent);
})
</script>
Bootstrap CSS组件之分页(pagination)和翻页(pager)
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。
普通的
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
