1.Description of requirements
When there is a function that re-requests the interface to return data, if the content of the page is very long, every time a function is clicked, the page returns to the top, which is not very friendly to the user experience. We hope that when the user clicks on such a function , can be loaded directly into the data, and the operations requested by the backend will not be displayed on the frontend, giving the user an imperceptible state.
If you want to dynamically obtain the data of a certain function point without reloading the page, you need to use Ajax technology. When the button of a certain function is clicked, an Ajax request is triggered, and Ajax interacts with the backend (Django). , after passing some parameters to get new data, it is finally rendered on the front-end page.
There is a problem that needs to be considered: the paging buttons on the front end have styles, and the styles are judged based on the parameters returned by the back end. The final decision is which paging button to add styles. In order to avoid paging data, the paging data can be obtained normally, but the paging style is not Will change. Thinking based on this problem, the final solution is: also render the paging part of the code through Ajax.
2. Split the front-end code of table data and paging function
1) order_data_tables.htmlThe code file stores table data.
<table class="table-content table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th>品牌</th>
<th>商品名称</th>
<th>商品编号</th>
<th>订单编号</th>
<th>颜色</th>
<th>进价</th>
<th>零售价</th>
<th>净赚利润</th>
<th>数量</th>
</tr>
</thead>
<tbody style="font-size: 14px;">
{% for data in order_page_data %}
<tr>
<td>{
{ data.brand }}</td>
<td>{
{ data.commodity_name }}</td>
<td>{
{ data.commodity_number }}</td>
<td>{
{ data.order_number }}</td>
<td>{
{ data.commodity_color }}</td>
<td>{
{ data.purchasing_price }}</td>
<td>{
{ data.retail_price }}</td>
<td>{
{ data.profit }}</td>
<td>{
{ data.quantity }}</td>
</tr>
{% endfor %}
</tbody>
</table>
2) order_data_page.htmlThe code file stores the paging function.
<ul class="pagination justify-content-center">
{% if order_page_data.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={
{ order_page_data.previous_page_number }}" data-page={
{ order_page_data.previous_page_number }}>上一页</a>
</li>
{% else %}
<li class="page-item disabled ">
<a class="page-link">上一页</a>
</li>
{% endif %}
{% for page in order_page_data.paginator.page_range %}
<li class="page-item {% if page == order_page_data.number %}active{% endif %}">
<a class="page-link" href="#" data-page="{
{ page }}">{
{ page }}</a>
</li>
{% endfor %}
{% if order_page_data.has_next %}
<li class="page-item">
<a class="page-link" href="?page={
{ order_page_data.next_page_number }}" data-page={
{ order_page_data.next_page_number }}>下一页</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link">下一页</a>
</li>
{% endif %}
</ul>
3) order_data_page.htmlThe table and paging codes are still retained in the front-end code file of the total page.
3. The backend handles paging functions and Ajax requests
Paging is very simple to implement. It mainly handles Ajax requests. When the request is Ajax, the (front-end file of table data) and (front-end file of paging) are rendered with the paging parameters passed by the backend through render_to_string()methods , and the rendering is done. The HTML is returned in the form of a string and stored in a variable. At this step, the table data and paging styles corresponding to a certain page visited this time have all been rendered.order_data_tables.htmlorder_data_page.htm
Then use JsonResponse()the method to return the variables that store table and paging data to the front end in JSON format.
from django.http import HttpResponse, JsonResponse
from django.template.loader import render_to_string
def order_manage_beautiful(request):
order_data = OrderManage.objects.order_by('-id')
······
# 分页
order_pages = Paginator(order_data, 10)
order_page_num = int(request.GET.get("page", 1))
if order_page_num > order_pages.count:
order_page_num = 1
order_page_data = order_pages.page(order_page_num)
# 判断是否是Ajax请求，若为Ajax请求，则将表格数据和分页的前端代码进行渲染，并以Jason格式返回给前端
if request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
# render_to_string方法会将前端代码与后端参数渲染后，返回成html文本
order_table_html = render_to_string("order_data_tables.html", {"order_page_data": order_page_data})
order_page_html = render_to_string("order_data_page.html", {"order_page_data": order_page_data})
return JsonResponse({"order_table_html": order_table_html, "order_page_html": order_page_html})
return render(request, "order_manage_beautiful.html", {"is_file": is_file, "order_data": order_data, "order_page_data": order_page_data})
The returned Json is as follows.
4. Write code for Ajax request for paginated data
4.1. Bind the ID attribute to the code in the table part
Bind an ID attribute to the upper div tag of the table: id="order_table"After Ajax gets the new data, it must be rendered in this tag to complete the dynamic update of the table data.
<div class="card-body" id="order_table">
<table class="table-content table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th>品牌</th>
<th>商品名称</th>
<th>商品编号</th>
<th>订单编号</th>
<th>颜色</th>
<th>进价</th>
<th>零售价</th>
<th>净赚利润</th>
<th>数量</th>
</tr>
</thead>
<tbody style="font-size: 14px;">
{% for data in order_page_data %}
<tr>
<td>{
{ data.brand }}</td>
<td>{
{ data.commodity_name }}</td>
<td>{
{ data.commodity_number }}</td>
<td>{
{ data.order_number }}</td>
<td>{
{ data.commodity_color }}</td>
<td>{
{ data.purchasing_price }}</td>
<td>{
{ data.retail_price }}</td>
<td>{
{ data.profit }}</td>
<td>{
{ data.quantity }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
4.2. Bind the ID attribute to the code of the paging function
It is still bound in the upper div tag of the paging function: id="order_page".
<div aria-label="Page navigation example" style="margin-top: 20px;" id="order_page">
<ul class="pagination justify-content-center">
{% if order_page_data.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={
{ order_page_data.previous_page_number }}" data-page={
{ order_page_data.previous_page_number }}>上一页</a>
</li>
{% else %}
<li class="page-item disabled ">
<a class="page-link">上一页</a>
</li>
{% endif %}
{% for page in order_page_data.paginator.page_range %}
<li class="page-item {% if page == order_page_data.number %}active{% endif %}">
<a class="page-link" href="#" data-page="{
{ page }}">{
{ page }}</a>
</li>
{% endfor %}
{% if order_page_data.has_next %}
<li class="page-item">
<a class="page-link" href="?page={
{ order_page_data.next_page_number }}" data-page={
{ order_page_data.next_page_number }}>下一页</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link">下一页</a>
</li>
{% endif %}
</ul>
</div>
4.3. Write Ajax to implement dynamic update of paging data
When the label with class is clicked page-link(the paging box is clicked), the Ajax request is triggered, the request /order_manage_beautifulinterface is passed, and pagethe parameters are passed. After the access is successful, a JSON format data will be returned, and the Key data in the JSON will be data.order_table_htmlrendered into the div of the table. Render Key data in JSON data.order_page_htmlinto paginated divs.
$(document).on('click', '.page-link', function(e) {
e.preventDefault();
var page = $(this).data('page')
$.ajax({
url: '/order_manage_beautiful',
type: "GET",
data: {page: page},
success: function(data) {
// 渲染表格数据
$('#order_table').html(data.order_table_html);
// 渲染分页功能
$('#order_page').html(data.order_page_html);
}
});
});
4.4. Effect display
