1. html 에서 css 정의하여 사용하기
vi templates/demo/base.html
<!doctype html>
<html lang="en">
<head>
<title>MyDjangoApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="override">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Django Pagination</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
vi templates/demo/home.html
{% extends "demo/base.html" %}
{% block content %}
<div class="container products-view-user">
{% csrf_token %}
<form class = "post-list">
<input type = "hidden" value = "" />
</form>
<article class="navbar-form navbar-left p-0 m-0 ml-b">
<div class="form-group">
<label>Per Page: </label>
<select class="form-control post_max">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>Search Keyword: </label>
<input type="text" class="form-control post_search_text" placeholder="Enter a keyword">
</div>
<input type = "submit" value = "Filter" class = "btn btn-primary post_search_submit" />
</article>
<a href="user-products-add.php" class="btn btn-success pull-right">Add New</a>
<br class = "clear" />
<div class = "wave-box-wrapper">
<div class = "wave-box"></div>
<table class = "table table-striped table-post-list no-margin">
<thead>
<tr>
<th>Image</th>
<th>Id</th>
<th>Name</th>
<th>Brand</th>
<th>cat1id</th>
<th>cat2id</th>
<th>cat3id</th>
</tr>
</thead>
<tbody class = "pagination-container">
{% for d in data %}
<tr>
<td> <img src="{{d.imgurl}}" width="100" height="100"> </td>
<td> {{d.pid}} </td>
<td> {{d.pname}} </td>
<td> {{d.brand}} </td>
<td> {{d.cat1id}} </td>
<td> {{d.cat2id}} </td>
<td> {{d.cat3id}} </td>
</tr>
{% endfor %}
</tbody>
</table>
<div class = "pagination-nav"></div>
</div>
</div>
{% endblock %}
2. 기본 홈페이지에서 확인
http://~:8080/home
- Reference -
Python – Django AJAX Pagination with Search and Sort [Tutorial]
'Programming > Django' 카테고리의 다른 글
| [Django CSS] Bootstrap Pagination (0) | 2018.09.06 |
|---|---|
| [Django CSS] Bootstrap Dropdowns (0) | 2018.09.06 |
| [Django Paginator] 장고 paginator로 페이지 생성 (0) | 2018.07.12 |
| [Django Templatetags] 장고 템플릿태그 함수 생성 및 활용 (0) | 2018.07.12 |
| [Django Web Frame] 장고 프로젝트 웹 프레임 활용 (0) | 2018.07.11 |