允许用户使用单选按钮 django 按升序排序
Posted
技术标签:
【中文标题】允许用户使用单选按钮 django 按升序排序【英文标题】：Allow users to sort in ascending order using radio button django 【发布时间】：2021-11-30 17:34:28 【问题描述】：我有一个如下所示的网页，该网页能够以表格的形式显示数据，我还实现了搜索栏和页面过滤器并且都可以工作，现在我正在尝试允许用户按升序对数据进行排序。例如，客户名称将从 A (Airasia) 到 Z(Zasia)，零件编号将从 1(01232) 到 9(999)。我该如何做到这一点，并且在按升序排序的同时，搜索栏和过滤器页面也都在工作。
更新：Url 能够显示我点击的内容，但数据没有按如下图所示的顺序排序。
views.py
@login_required()
def ViewMCO(request):
search_post = request.GET.get('q')
if (search_post is not None) and search_post:
allusername = Photo.objects.filter(Q(reception__icontains=search_post) | Q(partno__icontains=search_post) | Q(
Customername__icontains=search_post) | Q(mcoNum__icontains=search_post) | Q(status__icontains=search_post)
| Q(serialno__icontains=search_post))
if not allusername:
allusername = Photo.objects.all().order_by("-Datetime")
else:
allusername = Photo.objects.all().order_by("-Datetime")
part = request.GET.get('p')
if (part is not None) and part:
allusername = Photo.objects.filter(Q(partno__icontains=part)).order_by("-partno")
page = request.GET.get('page')
paginator = Paginator(allusername, 6)
try:
allusername = paginator.page(page)
except PageNotAnInteger:
allusername = paginator.page(1)
except EmptyPage:
allusername = paginator.page(paginator.num_pages)
context = 'allusername': allusername, 'query': search_post
return render(request, 'ViewMCO.html', context)
ViewMCO.html
% extends "customerbase.html" %
% block content %
<style>
table
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
-moz-border-radius:6px;
td, th
border-left:solid black 1px;
border-top:solid black 1px;
th
border-top: none;
td:first-child, th:first-child
border-left: none;
.pagination a
padding: 10px;
.sort
display: inline;
margin: 0 20px 0 20px;
</style>
<script>
// Function to download table data into csv file
function download_table_as_csv(table_id, separator = ',')
var rows = document.querySelectorAll('table#' + table_id + ' tr');
var csv = [];
for (var i = 0; i < rows.length; i++)
var row = [], cols = rows[i].querySelectorAll('td, th');
for (var j = 0; j < cols.length; j++)
var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
data = data.replace(/"/g, '""');
row.push('"' + data + '"');
csv.push(row.join(separator));
var csv_string = csv.join('\n');
var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
var link = document.createElement('a');
link.style.display = 'none';
link.setAttribute('target', '_blank');
link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
;
</script>
<div style="padding-left:16px">
<br>
<div class="form-block">
<h6>Search for Part Number/ Serial Number/ Reception Number/ MCO Number/ Customer Name/ Status</h6>
<form class="form-inline my-2 my-lg-0" action="% url 'ViewMCO' %" method='GET' value=' request.GET.q '>
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" name="q" value=' request.GET.q '/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="sort">
<h5 class="col-md-3">Sort By : </h5>
<div id="sortBlock" class="col-md-9">
<form class="form-inline my-2 my-lg-0" action="% url 'ViewMCO' %" method='GET' value=' request.GET.p '>
<div class="sort">
<input type="radio" id="partno" name="sortType" value="partno">
<label for="partno">Part Number</label>
</div>
<div class="sort">
<input type="radio" id="serialno" name="sortType" value="serialno">
<label for="serialno">Serial Number</label>
</div>
<div class="sort">
<input type="radio" id="receptionno" name="sortType" value="receptionno">
<label for="receptionno">Reception Number</label>
</div>
<div class="sort">
<input type="radio" id="mcoNum" name="sortType" value="mcoNum">
<label for="mcoNum">MCO Number</label>
</div>
<div class="sort">
<input type="radio" id="Customername" name="sortType" value="Customername">
<label for="Customername">Customer Name</label>
</div>
<div class="sort">
<input type="Submit" value="Sort"/>
</div>
</form>
</div>
</div>
</div>
<table id="viewTable" class="m-2">
<i class="fa fa-download" aria-hidden="true"></i>
<a href="#" onclick="download_table_as_csv('viewTable');">Download as CSV</a>
<br>
<tr class="header">
<th>Latest Log</th>
<th>Part Number</th>
<th>Serial Number</th>
<th>Reception Number</th>
<th>MCO Number</th>
<th>Customer Name</th>
<th>Status</th>
<th>Action</th>
</tr>
% for photo in allusername %
<tr>
<td>photo.Datetime</td>
<td>photo.partno</td>
<td>photo.serialno</td>
<td>photo.reception</td>
<td>photo.mcoNum</td>
<td>photo.Customername</td>
<td>photo.status</td>
<td>
<form action="% url 'customerdetails' photo.id %" method="post">
% csrf_token %
<button type="submit" class="btn btn-sm btn-info">View</button>
</form>
</td>
</tr>
% endfor %
</table>
<br>
% if allusername.has_other_pages %
<ul class="pagination pr-3 mr-1 ml-auto">
% if allusername.has_previous %
<li><a href="?q= query|urlencode &page= allusername.previous_page_number ">«</a></li>
% else %
<li class="disabled"><span>«</span></li>
% endif %
% for i in allusername.paginator.page_range %
% if allusername.number == i %
<li class="active"><span> i <span class="sr-only">(current)</span></span></li>
% else %
<li><a href="?q= query|urlencode &page= i "> i </a></li>
% endif %
% endfor %
% if allusername.has_next %
<li><a href="?q= query|urlencode &page= allusername.next_page_number ">»</a></li>
% else %
<li class="disabled"><span>»</span></li>
% endif %
</ul>
% endif %
</div>
</div>
% endblock %
【问题讨论】：
@amadou sow，不好意思打扰了，不知道能不能再帮帮我？ 【参考方案1】：在您的 views.py 中存在一些逻辑问题，因为如果用户尝试对您的数据进行排序 通过不存在的字段，您将有 500 个错误。我通过这样做删除了这些错误。 视图.py
@login_required()
def ViewMCO(request):
search_post = request.GET.get('q')
if (search_post is not None) and search_post:
allusername = Photo.objects.filter(Q(reception__icontains=search_post) | Q(partno__icontains=search_post) | Q(
Customername__icontains=search_post) | Q(mcoNum__icontains=search_post) | Q(status__icontains=search_post)
| Q(serialno__icontains=search_post))
if not allusername:
allusername = Photo.objects.all().order_by("-Datetime")
else:
allusername = Photo.objects.all().order_by("-Datetime")
#new important part
part = request.GET.get('sortType')
valid_sort = ["partno","serialno","receptionno","Customername","mcoNum"]
if (part is not None) and part in valid_sort:
allusername = allusername.order_by(part)
page = request.GET.get('page')
paginator = Paginator(allusername, 6)
try:
allusername = paginator.page(page)
except PageNotAnInteger:
allusername = paginator.page(1)
except EmptyPage:
allusername = paginator.page(paginator.num_pages)
context = 'allusername': allusername, 'query': search_post,'order_by':part
return render(request, 'ViewMCO.html', context)
html 排序后有一些修改要做。我将值更改为 value=' request.GET.sortType ' 并且我把 action="" 这意味着使用当前 url。
<div class="sort">
<h5 class="col-md-3">Sort By : </h5>
<div id="sortBlock" class="col-md-9">
<form class="form-inline my-2 my-lg-0" action="" method='GET' value=' request.GET.sortType '>
<div class="sort">
<input type="radio" id="partno" name="sortType" value="partno">
<label for="partno">Part Number</label>
</div>
<div class="sort">
<input type="radio" id="serialno" name="sortType" value="serialno">
<label for="serialno">Serial Number</label>
</div>
<div class="sort">
<input type="radio" id="receptionno" name="sortType" value="receptionno">
<label for="receptionno">Reception Number</label>
</div>
<div class="sort">
<input type="radio" id="mcoNum" name="sortType" value="mcoNum">
<label for="mcoNum">MCO Number</label>
</div>
<div class="sort">
<input type="radio" id="Customername" name="sortType" value="Customername">
<label for="Customername">Customer Name</label>
</div>
<div class="sort">
<input type="Submit" value="Sort"/>
</div>
</form>
</div>
</div>
现在我们必须处理分页（我们必须将 order_by 添加到分页部分）
% if allusername.has_other_pages %
<ul class="pagination pr-3 mr-1 ml-auto">
% if allusername.has_previous %
<li><a href="?q= query|urlencode &sortType= order_by &page= allusername.previous_page_number ">«</a></li>
% else %
<li class="disabled"><span>«</span></li>
% endif %
% for i in allusername.paginator.page_range %
% if allusername.number == i %
<li class="active"><span> i <span class="sr-only">(current)</span></span></li>
% else %
<li><a href="?q= query|urlencode &sortType= order_by &page= i "> i </a></li>
% endif %
% endfor %
% if allusername.has_next %
<li><a href="?q= query|urlencode &sortType= order_by &page= allusername.next_page_number ">»</a></li>
% else %
<li class="disabled"><span>»</span></li>
% endif %
</ul>
% endif %
我认为这就是您所需要的。如果您有任何问题，请在下面的评论中提出。
【讨论】：
你好，数据还是没有排序，只有客户名 这个以 2 23434534 开头的数字在我按序列号、接收号和 mco 号排序时排在最后 @Shadowwalker 序列号、接收号和mco numbe 数据库中是否有char 字段或integer 字段？ 它们都是我模型中的文本字段 序列号是数字，接收号是varchar，mco号是我数据库中的varchar以上是关于允许用户使用单选按钮 django 按升序排序的主要内容，如果未能解决你的问题，请参考以下文章