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">
<div class="form-group" id="toolbar">
<table>
<tr>
<td style="padding-left:10px;">
<button type="button" class="btn btn-success btn-sm" id="btnSearch" ng-click="search()">查询</button>
</td>
</tr>
</table>
<div class="bootstrap-table">
<div class="fixed-table-container" style="padding-bottom: 0px;">
<div class="table-responsive">
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th><div class="th-inner">序号</div></th>
<th><div class="th-inner">姓名</div></th>
<th><div class="th-inner">电话</div></th>
<th><div class="th-inner">邮箱</div></th>
<th><div class="th-inner">年龄</div></th>
<th><div class="th-inner">国家</div></th>
<th><div class="th-inner">城市</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>
<pagination class="pagination-sm pull-right"
ng-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);
}
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Angular.js与Bootstrap相结合实现表格分页代码
先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程
-
angularjs+bootstrap实现自定义分页的实例代码
目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取. 插件 百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改了部分细节,使得适合我的项目,该插件地址是:(https://github.com/miaoyaoyao/AngularJs-UI) 效果图 使用方法 1.在网页的头部引入angularjs.bootstarp以及该插件,该分页插件主要是ng-pagination.css以及ng-pag
-
AngularJS 与Bootstrap实现表格分页实例代码
AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后
-
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
-
bootstrap paginator分页前后台用法示例
bootstrap paginator分页前后台用法示例,供大家参考,具体内容如下 准备工作: bootstrap-paginator.js 插件 github开源项目百度自行下载 引入js文件(JQuery1.8+bootstrap.min.js+bootstrap.css+bootstrap-paginator.js) <!--路径根据自己项目修改--> <link rel="stylesheet" href="/bootstrap/css/bootst
-
bootstrap表格分页实例讲解
本文实例为大家分享了bootstrap表格分页的具体实现代码,供大家参考,具体内容如下 引用: <script src="~/Scripts/jquery.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Scripts/plugins/bootstrap-table/bootstrap
-
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:
-
BootStrap Table 分页后重新搜索问题的解决办法
前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").boot
-
第一次动手实现bootstrap table分页效果
先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q
-
Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax. 1可以用读流文件解决.2 如果想用request.form 方式,设置 contentType: "application/x-www-form-
-
jquery pagination分页插件使用详解（后台struts2）
页面是用的纯css的效果,没有使用bootstrap的框架,不然自带的分页是挺好用的,就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的,这边后台用的是struts2的框架,ssh的,jquery返回json数据,然后循环拼接table输入到页面,这个分页插件使用起来感觉还是比较简单,代码编辑比较少,也有样式可以选择,但是那样要导入pagination.css在div中的class修改样式不导入的话就只有默认样式,这边样式也没有调节,不是很美观,功能实现了,干货:
-
EasyUI Pagination 分页的两种做法小结
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,一种是datagrid默认机制,另一种是利用 Ajax 获取数据并填充 Datagrid,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Con
-
bootstrap table分页模板和获取表中的ID方法
1.dao层 MyBatis映射 mapper.xml中 <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap"> select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order} </select> mapper.java中 pub