django+angular分页功能+搜索功能
2017-12-05 本文已影响0人
无聊的上帝op
此方法是前端分页
主要思路:
- 把所有数据通过ajax将数据取出,并进行处理和展示.
遇到的问题:
- angular和django的语法冲突,在template中变量的标注方法都是 {{ 变量 }},导致angular在调用$scope时,无法渲染.变量被django渲染.下方代码通过修改angular标注方式,解决标签冲突问题.[[ ]] <=== 用这个标签来定义angular的变量
废话不多说.先上样图
image.png
所搜功能图
image.png
代码如下:
{% extends "base.html" %}
{% load staticfiles %}
{% block head_script %}
<script src="http://www.jq22.com/jquery/angular-1.4.6.js"></script>
<script type="text/javascript" src="{% static 'js/ui-bootstrap-tpls.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<style>
.panel{width:60%;margin:0 auto;text-align: center;}
.form-inline{width:60%;margin:0 auto;}
</style>
{% endblock %}
{% block body_label %}
<body class=" theme-blue" ng-app="app" ng-controller="ctrl" >
{% endblock %}
{% block breadcrumb %}
<h1 class="page-title">Users</h1>
<ul class="breadcrumb">
<li><a href="index.html">Home</a> </li>
<li class="active">Users</li>
</ul>
{% endblock %}
{% block main_content %}
<div class="main-content">
{# <button class="btn btn-default">Import</button>#}
{# <button class="btn btn-default">Export</button>#}
<div class="btn-group">
</div>
<div class="row form-inline req">
{# <div class="req col-lg-2 form-inline">#}
<div class="col-lg-2">
<div class="btn-toolbar list-toolbar">
<button class="btn btn-primary"><i class="fa fa-plus"></i>创建用户</button>
</div>
</div>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索客户邮箱..." id="search" ng-focus="concentrate()" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="search()">搜索</button>
</span>
</div>
</div>
<div class="col-lg-4 col-lg-offset-1 solid_top form-group">
<div class="">
<label>展示条数:
<select class="form-control" ng-change="change(selectedLimit)" ng-model="selectedLimit" ng-options="value.limit for value in values"></select>
</label>
</div>
</div>
</div>
<table class="table table-hover" >
<thead>
<tr>
<th>序号</th>
<th>客户邮箱</th>
<th>邮件类型</th>
<th>使用规则</th>
<th style="width: 3.5em;"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>[[data.order]]</td>
<td>[[data.module]]</td>
<td>[[data.message]]</td>
<td>[[data.time]]</td>
<td>
<a href="user.html"><i class="fa fa-pencil"></i></a>
<a href="#myModal" role="button" data-toggle="modal"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row form-inline" >
<div class="col-lg-8">
<uib-pagination
total-items="page.totalCount"
ng-model="page.pageNo"
max-size="5"
class="samplePage pagination"
boundary-links="true"
force-ellipses="false"
first-text="首页"
last-text="末页"
previous-text="上一页"
next-text="下一页"
items-per-page="page.limit"
ng-change="pageChanged()"
boundary-link-numbers="true"
>
</uib-pagination>
</div>
<div class="col-md-4">
<input type="text" class="form-control" style="width:100px;margin:25px 0" name="" ng-model="go" />
<a class="btn btn-primary btn-sm" ng-click="setPage(go)">跳转</a>
</div>
</div>
<script type="text/javascript">
var pageApp = angular.module("app",['ui.bootstrap']);
pageApp.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
pageApp.controller("ctrl", function ($scope, $http,$filter) {
$http({
method: 'GET',
url: 'test.html'
}).success(function (response) {
//总条数
$scope.total = response.total;
//反转函数转化abcd转dcba
$scope.data = response.data.reverse();
//选择显示的条数
$scope.values = [{"limit": 3}, {"limit": 4}, {"limit": 5}, {"limit": 6}, {"limit": 7}, {"limit": 8}];
//默认显示的条数
$scope.selectedLimit = $scope.values[0];
//默认显示当前页数
$scope.currentPage = 1;
if ($scope.data != null) {
$scope.datas = $scope.data.slice($scope.selectedLimit.limit * ($scope.currentPage - 1), $scope.selectedLimit.limit * $scope.currentPage);
} else {
alert($scope.data);
}
$scope.page = {
"limit": $scope.selectedLimit.limit,
"pageSize": 5,
"pageNo": $scope.currentPage,
"totalCount": $scope.total
};
})
$scope.change = function (selectedLimit) {
$scope.page.limit = selectedLimit.limit;
$scope.datas = $scope.data.slice($scope.selectedLimit.limit * ($scope.page.pageNo - 1), $scope.selectedLimit.limit * $scope.page.pageNo);
}
$scope.pageChanged = function () {
$scope.page.limit = $scope.selectedLimit.limit;
$scope.datas = $scope.data.slice($scope.selectedLimit.limit * ($scope.page.pageNo - 1), $scope.selectedLimit.limit * $scope.page.pageNo);
}
$scope.setPage = function (go) {
$scope.length = Math.ceil($scope.total / $scope.selectedLimit.limit);
console.log($scope.length);
if (go > $scope.length) {
$scope.page.pageNo = $scope.length;
console.log($scope.length);
} else {
$scope.page.pageNo = go;
}
$scope.datas = $scope.data.slice($scope.selectedLimit.limit * ($scope.page.pageNo - 1), $scope.selectedLimit.limit * $scope.page.pageNo);
};
$scope.concentrate = function () {
$scope.datas = $scope.data.slice($scope.selectedLimit.limit * ($scope.page.pageNo - 1), $scope.selectedLimit.limit * $scope.page.pageNo);
};
$scope.search = function () {
$scope.datas = $scope.data
$scope.datas = $filter("filter")($scope.datas, document.getElementById("search").value);
};
});
</script>
{% endblock %}
数据模型:test.html中的内容
{
"total":10,
"data":[{
"order":10,"module":"模块10",
"message":"信息10",
"time":"2016-07-02"
},
{
"order":9,"module":"模块9",
"message":"信息9",
"time":"2016-07-02"
},{
"order":8,"module":"模块8",
"message":"信息8",
"time":"2016-07-02"
},
{
"order":7,"module":"模块7",
"message":"信息7",
"time":"2016-07-02"
},{
"order":6,"module":"模块6",
"message":"信息6",
"time":"2016-07-02"
},
{
"order":5,"module":"模块5",
"message":"信息5",
"time":"2016-07-02"
},{
"order":4,"module":"模块4",
"message":"信息4",
"time":"2016-07-02"
},
{
"order":3,"module":"模块3",
"message":"信息3",
"time":"2016-07-02"
},{
"order":2,"module":"模块2",
"message":"信息2",
"time":"2016-07-02"
},
{
"order":1,"module":"模块1",
"message":"信息1",
"time":"2016-07-02"
}]
}
