[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

1
2
3
4
5
6
def client(request):
    data = Clients.objects.all()
    params = {
        'data' : data
    }
    return render(request, 'sales/client.html', params)

/templates/sales/client.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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文字以上は自動的に三点リーダで表示されます。

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