[Django3.0]DBのリストをviewに表示

sales_clientsテーブルのレコードを得意先一覧ページで表示させたい。
レコード全てを取得する際には、views.pyで${modelName}.objects.all()として取得する。

mysql> select * from sales_clients;
+—-+——————————————–+———————————–+——–+————+—————–+————–+————————–+———-+————+———————————————————————–+————–+————–+————–+—————–+——–+—————————-+—————————-+
| id | name | name_kana | office | department | position | charge | charge_mail | zipcode | prefecture | address | tel | fax | name_top | position_top | remark | created_at | updated_at |
+—-+——————————————–+———————————–+——–+————+—————–+————–+————————–+———-+————+———————————————————————–+————–+————–+————–+—————–+——–+—————————-+—————————-+
| 1 | ジャパンソフトウェア株式会社 | ジャパンソフトウェア | 本社 | 営業部 | 代表取締役 | 佐藤太郎 | staro@japansoftware.com | 100-0002 | 東京都 | 千代田区皇居外苑1-2-3 | 03-1234-5678 | 03-1234-5679 | 山本五郎 | 代表取締役 | | 2020-08-30 02:09:35.555187 | 2020-08-30 02:09:35.555259 |
| 16 | 六本木ソフトウェア株式会社 | ロッポンギソフトウェア | 本社 | 営業部 | 課長 | 田中太郎 | ttanaka@roppongisoft.com | 106-6240 | 東京都 | 港区六本木住友不動産六本木グランドタワー４０階 | 03-1234-5678 | 03-1234-5679 | 山田一郎 | 代表取締役 | | 2020-09-05 03:18:49.981333 | 2020-09-05 03:18:49.981377 |
+—-+——————————————–+———————————–+——–+————+—————–+————–+————————–+———-+————+———————————————————————–+————–+————–+————–+—————–+——–+—————————-+—————————-+
2 rows in set (0.00 sec)

sales/views.py

def client(request):
	data = Clients.objects.all()
	params = {
		'data' : data
	}
	return render(request, 'sales/client.html', params)

/templates/sales/client.html

<table class="table table-striped">
					<thead >
						<tr>
							<th scope="col" class="font-weight-normal">ID</th>
							<th scope="col" class="font-weight-normal">会社名</th>
							<th scope="col" class="font-weight-normal">住所</th>
							<th scope="col" class="font-weight-normal">見積</th>
							<th scope="col" class="font-weight-normal">受注</th>
							<th scope="col" class="font-weight-normal">アクション</th>
						</tr>
					</thead>
					<tbody>
						{% for item in data %}
						<tr>
							<td>{{item.id}}</td>
							<td class="text-nowrap">{{item.name}}</td>
							<td class="text-nowrap">〒{{item.zipcode}} {{item.prefecture}}{{item.address|truncatechars:20}}</td>
							<td>4</td>
							<td>6</td>
							<td class="text-nowrap"><button class="btn btn-light">詳細</button> <button class="btn btn-light">編集</button> <button class="btn btn-light" onclick="location.href='#modal'">削除</button></td>
						</tr>
						{% endfor %}
					</tbody>	
				</table>

住所の文字数を制限するため、item.address|truncatechars:20とすると、20文字以上は自動的に三点リーダで表示されます。

続いて、詳細、編集、削除ボタンのリンクを作成していきます。