angularjs 完成分页

最新推荐文章于 2019-11-07 10:19:28 发布

琥珀光洁-衍钧

最新推荐文章于 2019-11-07 10:19:28 发布

阅读量1.4k

点赞数

分类专栏： angularjs 文章标签：分页 angularjs

本文链接：https://blog.csdn.net/changhuzhao/article/details/45394151

版权

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参照着网上的一篇博文，自己也试着写了一个使用angularjs完成的分页小程序，拿来和大家分享一下

使用的的pycharm，先看目录结构

1、index.html

<!DOCTYPE html>
<html ng-app="flaskApp" ng-controller="commonCtrl">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='angularjs/angular-csp.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/css/bootstrap-theme.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/common.css') }}">
</head>
<body>
<div style="width: 30%;">
<div class="info_row">
<table class="table table-bordered marbottm0 table_nowrap table-striped">
<tr>
<td width="30%">姓名</td>
<td width="30%">昵称</td>
<td width="20%">年龄</td>
<td width="20%">身份</td>
</tr>
</table>
<div style="max-height: 162px;overflow-y: auto">
<table class="table table-bordered marbottm0" style="">
<tr ng-repeat="person in person">
<td width="30%" ng-bind="person.userName"></td>
<td width="30%" ng-bind="person.nickName"></td>
<td width="20%" ng-bind="person.age"></td>
<td width="20%" ng-bind="person.identity"></td>
</tr>
</table>
</div>
<div style="margin-top: 10px">
<ul class="pagination" ng-show="totalPage>1">
<li ng-class="{true:'active'}[currentPage==1]"><a href="javascript:void(0)"
ng-click="currentPage=1;load()">首页</a></li>
<li ng-class="{true:'disabled'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prev()">上一页</a></li>
<li ng-class="{true:'active'}[currentPage == page]" ng-repeat="page in pages"><a href="javascript:void(0);" ng-click="loadPage(page)"><span ng-bind="page"></span></a></li>
<li ng-class="{true:'disabled'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="next()">下一页</a>
</li>
<li ng-class="{true:'active'}[currentPage==totalPage]"><a href="javascript:void(0)"
ng-click="currentPage=totalPage;load()">末页</a></li>
</ul>
</div>
</div>
</div>

<script type="application/javascript" src="{{ url_for('static', filename='jquery/jquery.min.js') }}"></script>
<script type="application/javascript"
src="{{ url_for('static', filename='jquery/plugin/jquery.autocomplete.min.js') }}"></script>
<script type="application/javascript" src="{{ url_for('static', filename='jquery/plugin/jquery.select.js') }}"></script>
<script type="application/javascript" src="{{ url_for('static', filename='jquery/plugin/jquery.cookie.js') }}"></script>
<script type="application/javascript"
src="{{ url_for('static', filename='jquery/plugin/jquery.mousewheel.js') }}"></script>
<script type="application/javascript"
src="{{ url_for('static', filename='jquery/plugin/jquery.jscrollpane.min.js') }}"></script>
<script type="application/javascript"
src="{{ url_for('static', filename='jquery/plugin/scroll-startstop.events.jquery.js') }}"></script>

<script type="application/javascript" src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>

<script type="application/javascript" src="{{ url_for('static', filename='angularjs/angular.min.js') }}"></script>
<script type="application/javascript"
src="{{ url_for('static', filename='angularjs/angular-sanitize.min.js') }}"></script>
<script type="application/javascript"
src="{{ url_for('static', filename='angularjs/angular-resource.min.js') }}"></script>

<script type="application/javascript" src="{{ url_for('static', filename='js/app.js') }}"></script>
<script type="application/javascript" src="{{ url_for('static', filename='js/commonCtrl.js') }}"></script>
<script type="application/javascript" src="{{ url_for('static', filename='js/service.js') }}"></script>
</body>

2、app.js

var myApp = angular.module('flaskApp', [
'ngResource',
'flaskApp.commonCtrl',
'flaskApp.service'
]);

3、service.js

angular.module('flaskApp.service', ['ngResource'])
.factory('BusinessService', function ($http) {
return{
/**
*获得每页的数据
*/
get_person_list : function (page,size,callback_success,callback_error) {
$http({
method: 'POST',
url: '/get_person_list/',
data: $.param({"page": page, "size": size}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(callback_success)
.error(callback_error)
}
}
});

4、commonCtrl.js

angular.module('flaskApp.commonCtrl',[]).controller('commonCtrl', function ($scope,$http,BusinessService) {
$scope.person = [ ];
angular.element(document).ready(function () {
$scope.load();
console.log($scope.totalPage);
});

$scope.currentPage = 1;
$scope.totalPage = 1;
$scope.pageSize = 4;
$scope.pages = [];
$scope.endPage = 1;

//获得person_list
$scope.load = function () {
BusinessService.get_person_list($scope.currentPage,$scope.pageSize,function (data) {
if(data.result.status){
//获得总页数
$scope.totalPage = Math.ceil(data.result.total/$scope.pageSize);
$scope.endPage = $scope.totalPage;

$scope.person = data.result.person;

//生成数字链接
if ($scope.currentPage > 1 && $scope.currentPage < $scope.totalPage) {
//前5
if($scope.currentPage - 5 > 0){
var down = $scope.currentPage - 5;
}
else{
var down = 1;
}
for(var i=down; i<$scope.currentPage; i++){
var element = i;
$scope.pages.push(element);
}
//后5
if($scope.currentPage + 4 >= $scope.totalPage){
var up = $scope.totalPage+1;
}
else{
up = $scope.currentPage + 5;
}
for(var i= $scope.currentPage; i<up; i++){
var element = i;
$scope.pages.push(element);
}
} else if ($scope.currentPage == 1 && $scope.totalPage > 1) {
if($scope.totalPage > 10){
var up = 11;
}
else{
up = $scope.totalPage + 1;
}
for(var i=1; i<up; i++){
var element = i;
$scope.pages.push(element);
}
} else if ($scope.currentPage == $scope.totalPage && $scope.totalPage > 1) {
if($scope.totalPage > 10){
var down = $scope.totalPage-10;
}
else{
down = 1;
}
for(var i= down; i<$scope.totalPage+1;i++){
var element = i;
$scope.pages.push(element);
}
}
}
}, function (error) {
console.error(error)
})
};
//next
$scope.next = function () {
if ($scope.currentPage < $scope.totalPage) {
$scope.currentPage++;
$scope.load();
}
};
//prev
$scope.prev = function () {
if ($scope.currentPage > 1) {
$scope.currentPage--;
$scope.load();
}
};
//loadPage
$scope.loadPage = function (page) {
$scope.currentPage = page;
$scope.load();
};
});

5、common.css

.info_table{ /*--行内容--*/
margin-left: 30px;
margin-right: 30px;
}

.info_row{ /*--dl dt dd中的一行--*/
width:100%;
height: 35px;
line-height: 35px;
margin-left: 30px;
}
.marbottm0 {
margin-bottom: 0
}

6、flaskTest1.py

from flask import Flask, render_template, jsonify, request
import MySQLdb
import sys

app = Flask(__name__)
reload(sys)
sys.setdefaultencoding('utf-8')

@app.route('/')
def index():
return render_template('index.html')

@app.route('/get_person_list/', methods=['POST'])
def get_person_list():
page_size = int(request.form['size'])
current_page = int(request.form['page'])-1
conn = MySQLdb.connect(host="localhost", user="root", passwd="******", db="user", charset='utf8')
cursor = conn.cursor()
sql = "SELECT userName,nickName,age,identity FROM users AS person LIMIT %s,%s;" % (current_page*page_size, page_size)
cursor.execute(sql)
users = cursor.fetchall()
sql2 = "SELECT COUNT(*)FROM users"
cursor.execute(sql2)
total = cursor.fetchone()
cursor.close()
conn.close()
person = []
if users:
for item in users:
element = {"userName": item[0], "nickName": item[1], "age": item[2], "identity": item[3]}
person.append(element)
else:
person = None
result = {"status": True, "person": person, "total": total[0]}
return jsonify(result=result)

if __name__ == '__main__':
app.run(debug=True)