django之數據的翻頁和搜索功能

數據的翻頁和搜素功能

一、實現搜素功能

我們到bootstrap官網, 點擊組件, 然后找到輸入框組, 并點擊作為額外元素的按鈕。

在這里插入圖片描述

我們需要使用上面紅色框里面的組件, 就是搜素組件, 代碼部分就是下面紅色框框出來的部分。

把這里的代碼復制到assets_list.html里面:

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><a href="/assets/add/" class="btn btn-success">添加信息</a>{# 實現搜素查詢, 將查詢的框和按鈕都放在右邊 #}<div style="float: right">{# 這里面搜素信息, 需要用到get請求方法, 所以還是要用到form, method是get, 之后使用搜素功能會在網址里面多一個參數, 叫做search, 網址格式變為http://ip:port/路徑?search=搜素的內容 #}<form method="get">{# 這里面就是網上復制粘貼的代碼 #}<div class="input-group" style="float: right;width: 300px;"><input type="text" class="form-control" name="search" placeholder="Search for..."><span class="input-group-btn"><button class="btn btn-default" type="submit">搜索</button></span></div></form></div><div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">資產表</h3></div><div class="panel-body"><table class="table table-hover"><thead><tr><th>ID</th><th>手機號</th><th>狀態</th><th>創建時間</th><th>使用者</th><th>價格</th></tr></thead><tbody>{% for data in assets_list %}<tr><th scope="row">{{ data.id }}</th><td>{{ data.mobile }}</td>{% if data.status == 1 %}<td style="color: green">{{ data.get_status_display }}</td>{% else %}<td style="color: red">{{ data.get_status_display }}</td>{% endif %}<td>{{ data.create_time|date:"Y-m-d" }}</td><td>{{ data.user.name }}</td><td>{{ data.price }}</td><td style="color: green"><a href="/assets/{{ data.id }}/modify"><span style="color: green;"class="glyphicon glyphicon-pencil"aria-hidden="true"></span></a><a href="/assets/{{ data.id }}/del/"><span style="color: red;"class="glyphicon glyphicon-trash"aria-hidden="true"></span></a></td></tr>{% endfor %}</tbody></table></div></div></div>
{% endblock %}

后端代碼assets.py:

from django.core.exceptions import ValidationError
from django.core.validators import RegexValidator
from django.shortcuts import render, redirect
from django.utils.safestring import mark_safe
from django import formsfrom project_one import models# Create your views here.
def assets(request):# 搜索信息dict_data = {}# 獲取搜素框里的內容, 就是獲取網址里面的search參數的值value = request.GET.get('search')if value:# 在表格中搜素包含輸入框當中的數據, 這里搜素的是手機號, key為mobile__containsdict_data["mobile__contains"] = value# 通過搜素框里面的內容, 在表格里查找手機號, 將查找的結果展示出來assets_list = models.Assets.objects.filter(**dict_data)return render(request, "assets/assets_list.html", {"assets_list": assets_list})

這里的assets函數, 還是上次寫好的函數, 路由也是上次配置好的, 我們這篇文章只需要修改這個函數里面的內容即可。

運行結果:

在這里插入圖片描述

這里面有很多數據, 我們使用搜素功能看看有什么結果。

假如我們搜素158:

在這里插入圖片描述

頁碼會展示帶有158的電話號碼(這個搜素, 可以搜素匹配手機號的任意位置, 但是搜所的內容, 和匹配的電話里面的數字必須連續匹配的上, 比如搜素框里面是33589, 但是實際有個電話號碼有部分包含33580, 這種情況就匹配不出來)。

還有當我們在搜索框沒有任何內容的時候, 再點擊搜索按鈕, 就會把所有數據都展示出來。

這個就是搜素功能。整體代碼相對簡單, 不過需要注意的是: value = request.GET.get(‘search’)這行代碼, 是用戶獲取在url里面的search參數的值, 比如象上面我搜索的158, 在url里面后面跟著?search=158, 所以這里的value, 獲取的就是158。if value: // 在表格中搜素包含輸入框當中的數據, 這里搜素的是手機號, key為mobile__contains dict_data["mobile__contains"] = value這里的代碼意思是如果獲取到了搜索框里面的內容, 那就添加字典里面, 并且

key為mobile__contains, 這個 mobile__contains千萬不能寫錯, 下劃線_是兩個, 不能漏寫也不能多寫, 這個是按照手機號來查詢數據。然后再用assets_list = models.Assets.objects.filter(**dict_data)這行代碼, 將我想要查詢的數據查詢出來, 注意在filter里面要用**dict_data, 因為dict_data是個字典。

二、實現翻頁功能

我們在bootstrap里面找到分頁的代碼:

在這里插入圖片描述

將它復制黏貼到代碼里面:

assets.html:

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><a href="/assets/add/" class="btn btn-success">添加信息</a>{# 實現搜素查詢 #}<div style="float: right"><form method="get"><div class="input-group" style="float: right;width: 300px;"><input type="text" class="form-control" name="search" placeholder="Search for..."><span class="input-group-btn"><button class="btn btn-default" type="submit">搜索</button></span></div></form></div><div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">資產表</h3></div><div class="panel-body"><table class="table table-hover"><thead><tr><th>ID</th><th>手機號</th><th>狀態</th><th>創建時間</th><th>使用者</th><th>價格</th></tr></thead><tbody>{% for data in assets_list %}<tr><th scope="row">{{ data.id }}</th><td>{{ data.mobile }}</td>{% if data.status == 1 %}<td style="color: green">{{ data.get_status_display }}</td>{% else %}<td style="color: red">{{ data.get_status_display }}</td>{% endif %}<td>{{ data.create_time|date:"Y-m-d" }}</td><td>{{ data.user.name }}</td><td>{{ data.price }}</td><td style="color: green"><a href="/assets/{{ data.id }}/modify"><span style="color: green;"class="glyphicon glyphicon-pencil"aria-hidden="true"></span></a><a href="/assets/{{ data.id }}/del/"><span style="color: red;"class="glyphicon glyphicon-trash"aria-hidden="true"></span></a></td></tr>{% endfor %}</tbody></table></div></div>{# 實現分頁查詢 #}<ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="?page=1">1</a></li><li><a href="?page=2">2</a></li><li><a href="?page=3">3</a></li><li><a href="?page=4">4</a></li><li><a href="?page=5">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul></div>
{% endblock %}

后端assets.py:

from django.core.exceptions import ValidationError
from django.core.validators import RegexValidator
from django.shortcuts import render, redirect
from django.utils.safestring import mark_safe
from django import formsfrom project_one import models# Create your views here.
def assets(request):# assets_list = models.Assets.objects.all()# 搜索信息dict_data = {}# 獲取搜素框里的內容, 就是獲取網址里面的search參數的值value = request.GET.get('search')if value:# 在表格中搜素包含輸入框當中的數據, 這里搜素的是手機號, key為mobile__containsdict_data["mobile__contains"] = value# assets_list = models.Assets.objects.filter(**dict_data)# 獲取分頁組件里面選中的頁碼, 也是獲取網址里面的page參數的值page = int(request.GET.get('page', 1))# 每一頁查詢10條數據page_size = 10# 當前頁開始的數據start = (page - 1) * page_size# 當前頁結尾的數據end = page_size * page# 利用切片, 實現分頁查詢, 查詢出當頁數據assets_list = models.Assets.objects.filter(**dict_data)[start:end]return render(request, "assets/assets_list.html", {"assets_list": assets_list})

運行結果:

我們會發現, 當我們點擊第一頁的時候, 就給我們展示第一頁的數據

在這里插入圖片描述

點擊第幾頁, 就給我們展示第幾頁的數據。

但是光這五頁數據, 肯定是不夠的。當我們數據量大的時候, 需要幾十頁甚至于上百頁上千頁數據。

不過這又出現了一個問題, 如果有上百頁上千頁數據的話, 難道我們需要在分頁組件里寫上百條上千條li和a嗎?這樣顯然不可行, 所以我們可以統一寫五個帶有頁碼的按鈕, 但是這五個按鈕, 頁碼會變化。

假如我們有20頁數據要展示:

當我們點擊1到3頁的時候, 這五個按鈕依然顯示1, 2, 3, 4, 5, 但是當我們點擊4的時候, 這五個按鈕就要顯示2, 3, 4, 5, 6了, 后面以此類推, 當我們點擊18, 19或者20的時候, 這五個按鈕顯示16, 17, 18, 19, 20。我們可以發現一個規律, 就是我們選中的頁數, 除了1, 2, 3, 18, 19, 20以外, 其他所有我們選中的頁碼, 離最左邊和最右邊的頁碼始終相差2。而頁碼最前面只有點擊到4的時候, 五個按鈕里面的頁碼才會開始發生變化, 頁碼最后面只有到18開始, 頁碼才不會變化。

我們可以設plus=2, 這個2指的是我們選中的頁碼, 離最左邊和最右邊的頁碼始終相差2。開始頁用start_page, 結束頁用end_page。

代碼:

assets.py部分代碼:

# 統計表當中的總個數data_asset_count = models.Assets.objects.filter(**dict_data).count()# 求得表中的總個數都需要多少頁來展示, page_num代表總頁數, div代表剩余的數據還有多少條page_count, div = divmod(data_asset_count, page_size)if div:page_count += 1# 我們需要在分頁組件里面展示五個頁碼。# 當我們選中的頁數, 和最左邊最右邊顯示的頁數相差2, 所以我們將plus設置為2, 比如我選擇第三頁, 那最左邊顯示的頁碼是1最右邊顯示的頁碼是5。plus = 2# 我們想要分頁功能, 展示其中5個頁碼, 如果想要展示不同個頁數的頁碼, 自己可以調整。# 當總頁數不超過5頁的時候, 1 + 2 * plus意思是當前選擇的頁, 加上左邊還有兩頁, 右邊也還有兩頁, 總共是5頁。if data_asset_count <= 1 + 2 * plus:# 開始頁數為1start_page = 1# 結束位置就是總頁數end_page = data_asset_count# 這里面全是總頁數大于5頁的情況else:# 如果我目前選擇的頁碼, 小于等于3if page <= plus + 1:# 開始頁還是1start_page = 1# 結束頁是5, 1 + 2 * plus這個意思上面有注釋。end_page = 1 + 2 * plus# 如果我目前選擇的頁碼加上2能夠大于總頁數, 那就說明分頁組件里面的頁碼是最后五頁數據了, 比如總頁數為20, 我選擇的是第19頁, 19+2=21>20elif page + plus > page_count: # 這里寫>=也可以# 開始頁為總頁數減去兩倍的plus, 比如總共有20頁, 當我們分頁組件顯示的頁碼是最后五頁的時候, 最左邊應該顯示的是16。所以正好是總頁數-兩倍的plusstart_page = page_count - 2 * plus# 結尾頁展示的就是總頁數end_page = page_count# 如果我們目前選擇的頁碼就在正中間, 排除1, 2, 3, 19, 20頁的其它所有頁數。else:# 開始頁數就是當前分頁組件選擇的頁數-plusstart_page = page - plus# 結束頁數就是當前分頁組件選擇的頁數+plusend_page = page + plus

然后我們需要實現動態添加html代碼:

 # 創建一個列表, 用于存儲html代碼, 以字符串來保存到列表中html_list = []# 分頁組件返回到首頁功能html_list.append(f"""<li><a href="?page=1">首頁</a></li>""")# 如果當前選擇的頁碼>1, 可以往前退一頁, 否則不能在往前退了。在li標簽上加class="disabled"代表禁用if page > 1:html_list.append(f"""<li><a href="?page={page - 1}"><span aria-hidden="true">?</span></a></li>""")else:html_list.append("""<li class="disabled"><spanaria-hidden="true">?</span></li>""")# 分頁組件的中間翻頁的內容, 點擊第幾頁就到第幾頁, 在分頁組件當中, 選中的頁碼會有背景色。li標簽里面的class='active'代表選中了那個頁碼, 會出現背景色for page_num in range(start_page, end_page + 1):if page_num == page:html_list.append(f"<li class='active'><a href='?page={page_num}'>{page_num}</a></li>")else:html_list.append(f"<li><a href='?page={page_num}'>{page_num}</a></li>")# 如果當前選擇的頁碼<總頁數, 可以往前進一頁, 否則不能在往進退了。在li標簽上加class="disabled"代表禁用if page < page_count:html_list.append(f"""<li><a href="?page={page + 1}"><span aria-hidden="true">?</span></a></li>""")else:html_list.append("""<li class="disabled"><spanaria-hidden="true">?</span></li>""")# 分頁組件進入到尾頁功能html_list.append(f"""<li><a href="?page={page_count}">尾頁</a></li>""")# join就是將列表當中所有的內容全部拼接在一起為字符串。mark_safe函數的作用是將字符串里面的內容, 轉換為html元素。# mark_safe也是django框架里面的函數, 需要手動導入, 導入語句為from django.utils.safestring import mark_safepage_string = mark_safe("".join(html_list))

最后不要忘記return了。

# 不能忘記將page_string傳給前端。
return render(request, "assets/assets_list.html", {"assets_list": assets_list})

完整代碼:

from django.core.exceptions import ValidationError
from django.core.validators import RegexValidator
from django.shortcuts import render, redirect
from django.utils.safestring import mark_safe
from django import formsfrom project_one import models# Create your views here.
def assets(request):# assets_list = models.Assets.objects.all()# 搜索信息dict_data = {}# 獲取搜素框里的內容, 就是獲取網址里面的search參數的值value = request.GET.get('search')if value:# 在表格中搜素包含輸入框當中的數據, 這里搜素的是手機號, key為mobile__containsdict_data["mobile__contains"] = value# assets_list = models.Assets.objects.filter(**dict_data)# 獲取分頁組件里面選中的頁碼, 也是獲取網址里面的page參數的值page = int(request.GET.get('page', 1))# 每一頁查詢10條數據page_size = 10# 當前頁開始的數據start = (page - 1) * page_size# 當前頁結尾的數據end = page_size * page# 利用切片, 實現分頁查詢, 查詢出當頁數據assets_list = models.Assets.objects.filter(**dict_data)[start:end]# 統計表當中的總個數data_asset_count = models.Assets.objects.filter(**dict_data).count()# 求得表中的總個數都需要多少頁來展示, page_num代表總頁數, div代表剩余的數據還有多少條page_count, div = divmod(data_asset_count, page_size)if div:page_count += 1# 我們需要在分頁組件里面展示五個頁碼。# 當我們選中的頁數, 和最左邊最右邊顯示的頁數相差2, 所以我們將plus設置為2, 比如我選擇第三頁, 那最左邊顯示的頁碼是1最右邊顯示的頁碼是5。plus = 2# 我們想要分頁功能, 展示其中5個頁碼, 如果想要展示不同個頁數的頁碼, 自己可以調整。# 當總頁數不超過5頁的時候, 1 + 2 * plus意思是當前選擇的頁, 加上左邊還有兩頁, 右邊也還有兩頁, 總共是5頁。if data_asset_count <= 1 + 2 * plus:# 開始頁數為1start_page = 1# 結束位置就是總頁數end_page = data_asset_count# 這里面全是總頁數大于5頁的情況else:# 如果我目前選擇的頁碼, 小于等于3if page <= plus + 1:# 開始頁還是1start_page = 1# 結束頁是5, 1 + 2 * plus這個意思上面有注釋。end_page = 1 + 2 * plus# 如果我目前選擇的頁碼加上2能夠大于總頁數, 那就說明分頁組件里面的頁碼是最后五頁數據了, 比如總頁數為20, 我選擇的是第19頁, 19+2=21>20elif page + plus > page_count: # 這里寫>=也可以# 開始頁為總頁數減去兩倍的plus, 比如總共有20頁, 當我們分頁組件顯示的頁碼是最后五頁的時候, 最左邊應該顯示的是16。所以正好是總頁數-兩倍的plusstart_page = page_count - 2 * plus# 結尾頁展示的就是總頁數end_page = page_count# 如果我們目前選擇的頁碼就在正中間, 排除1, 2, 3, 19, 20頁的其它所有頁數。else:# 開始頁數就是當前分頁組件選擇的頁數-plusstart_page = page - plus# 結束頁數就是當前分頁組件選擇的頁數+plusend_page = page + plus# 創建一個列表, 用于存儲html代碼, 以字符串來保存到列表中html_list = []# 分頁組件返回到首頁功能html_list.append(f"""<li><a href="?page=1">首頁</a></li>""")# 如果當前選擇的頁碼>1, 可以往前退一頁, 否則不能在往前退了。在li標簽上加class="disabled"代表禁用if page > 1:html_list.append(f"""<li><a href="?page={page - 1}"><span aria-hidden="true">?</span></a></li>""")else:html_list.append("""<li class="disabled"><spanaria-hidden="true">?</span></li>""")# 分頁組件的中間翻頁的內容, 點擊第幾頁就到第幾頁, 在分頁組件當中, 選中的頁碼會有背景色。li標簽里面的class='active'代表選中了那個頁碼, 會出現背景色for page_num in range(start_page, end_page + 1):if page_num == page:html_list.append(f"<li class='active'><a href='?page={page_num}'>{page_num}</a></li>")else:html_list.append(f"<li><a href='?page={page_num}'>{page_num}</a></li>")# 如果當前選擇的頁碼<總頁數, 可以往前進一頁, 否則不能在往進退了。在li標簽上加class="disabled"代表禁用if page < page_count:html_list.append(f"""<li><a href="?page={page + 1}"><span aria-hidden="true">?</span></a></li>""")else:html_list.append("""<li class="disabled"><spanaria-hidden="true">?</span></li>""")# 分頁組件進入到尾頁功能html_list.append(f"""<li><a href="?page={page_count}">尾頁</a></li>""")# join就是將列表當中所有的內容全部拼接在一起為字符串。mark_safe函數的作用是將字符串里面的內容, 轉換為html元素。# mark_safe也是django框架里面的函數, 需要手動導入, 導入語句為from django.utils.safestring import mark_safepage_string = mark_safe("".join(html_list))# 不能忘記將page_string傳給前端。return render(request, "assets/assets_list.html", {"assets_list": assets_list, "page_string": page_string})

這里代碼比較長, 但每一行代碼都有注釋, 大家慢慢看, 慢慢學, 其實邏輯上不是很困難, 但是代碼量比較大, 處理的過程比較復雜。

運行結果:

默認是第一頁的數據

在這里插入圖片描述

然后我們點擊第三頁:

在這里插入圖片描述

點擊第四頁:

在這里插入圖片描述

往后翻頁, 直到點擊第13頁:

在這里插入圖片描述

往后翻頁, 直到點擊第18頁:

在這里插入圖片描述

第19頁:

在這里插入圖片描述

第20頁:

在這里插入圖片描述

點擊首頁:

在這里插入圖片描述

它幫我們跳轉到了第一頁。

點擊尾頁:

在這里插入圖片描述

它幫我們跳轉到了最后一頁。點擊左邊的<<按鈕:

在這里插入圖片描述

點擊一下, 頁數往回退一頁。

直到退到第一頁, 就不能在往回退數據了。

如圖:

在這里插入圖片描述

鼠標放到<<上面的時候, 有個紅色圈代表禁止使用那個按鈕。

>>也是一個道理, 也是每點擊一次網后面翻一頁, 直到翻到最后一頁, 鼠標放到>>上面的時候, 有個紅色圈代表禁止使用那個按鈕。同樣也不能繼續往后翻頁了。

好了, 這就是我們這篇文章的搜索和翻頁功能了！！！

以上就是Django數據的翻頁和搜索功能的所有內容了, 如果有哪里不懂的地方,可以把問題打在評論區, 歡迎大家在評論區交流!!!
如果我有寫錯的地方, 望大家指正, 也可以聯系我, 讓我們一起努力, 繼續不斷的進步.
學習是個漫長的過程, 需要我們不斷的去學習并掌握消化知識點, 有不懂或概念模糊不理解的情況下,一定要趕緊的解決問題, 否則問題只會越來越多, 漏洞也就越老越大.
人生路漫漫, 白鷺常相伴!!!