Hello everyone, I’m Zidong!

Last time we talked about implementing global search in Django, fan Renhao wanted to offer a tutorial on template numerical calculations, and here it is.

In my previous post, I put together a post about the relational templated system: How to use Django templates in Python?

This post explains djangos templating system in detail. If you haven’t mastered it yet, check it out.

Today’s article will focus on numerical operations in Django. Let’s explain them in more detail.

Let’s take the library management system as an example.

Widthratio function implements multiplication and division and percentage display

1. Widthratio function

The template system has widthratio function parameters as follows:

{% widthratio parameter 1 Parameter 2 parameter 3 %}Copy the code

Use the following parameters: Parameter 1/ Parameter 2* Parameter 3

2. Perform multiplication

In order to be able to multiply using widthratio, the parameters must meet the following requirements:

  • Parameter 1: multiplier
  • Parameter 2:1
  • Parameter 3: multiplicator

For example, let’s say we want to calculate book sales.

In views.py we just need to query the book data

def operation(request): Book_obj_list = models.books.objects.all () return render(request,"operationa.html",locals())Copy the code

The formula we are going to implement in the template is

Book sales = number of books * unit price of booksCopy the code

Let’s write it like this in the front end

<td>{% widthratio book_obj.book_sales 1 book_obj.book_price %}</td>
Copy the code

The widthratio parameter Settings are as follows:

  • Parameter 1: book_obj.book_sales The number of books sold
  • Parameter 2:1
  • Parameter 3: book_obj.book_price Book price

The front end effect is shown belowThe full HTML code is as follows

••<div class="content-wrapper"> <div class="container-fluid"> •<div class="card-header border-0 bG-transparent bg-dark Text-white "> <div class="table-responsive"> • <table class="table table-dark table-striped shadow-dark" role="grid" aria-describedby="default-datatable_info"> <thead> <tr role="row"> <th class="sorting" tabindex="0" aria-controls="default-datatable" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> books </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> Book sales </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> Book price </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; <th class=" 0" aria-controls="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font :17px"><p> Book inventory </p> </th> • </tr> </thead> <tbody> {% for book_obj in book_obj_list%} <tr role="row" Class = "odd" >, <! <td> <img SRC ="{% static book_obj.image_set.first.img_address.name %}" class="product-img" Alt ="product img"> • </td> <td>{{book_obj.book_sales}}</ TD > < TD >{% widthratio book_obj.book_sales 1 Book_obj. Book_price %} < / td >, < td > {{book_obj. Book_price}} < / td > < td > {{book_obj. Book_score}} < / td > < td > < div class="progress shadow" style="height: 4px;" Word-wrap: break-word! Important; "> <div class="progress-bar gradient-scooter" role="progressbar" } {% widthratio book_obj. Book_inventory 1000 100% % "> < / div > < / div > < / td >, < tr > {% endfor %}, < / tbody >, < / table > </div> </div> </div>Copy the code

2. Implement division operations

In order to be able to use the widthratio function for division, the parameters must meet the following requirements:

  • Parameter 1: divisor
  • Parameter 2: dividend
  • Parameter 3: When the parameter is 1, the value is normal division, when the parameter is 100, it is to calculate the percentage

For example, if we want to calculate the ratio of sales volume of each book to the total volume of similar books, in order to facilitate calculation, we set the total volume of each class of books is 1000.

The formula we want to implement in the template is as follows

Book sales ratio = sales per book/total number of books per categoryCopy the code

This is what it says in the front end

 <td>{% widthratio  book_obj.book_sales 1000 100%}%</td>
Copy the code

The widthratio parameter Settings are as follows:

  • Parameter 1: book_obj.book_sales The number of books sold
  • Parameter 2:1000 Total number of books per class
  • Parameter 3:100 times 100 plus % is the percentage

The front end effect is shown belowThe front-end code is as follows

<div class="content-wrapper"> <div class="container-fluid"> • <div class="card-header border-0 bg-transparent bg-dark Text-white "> <div class="table-responsive"> • <table class="table table-dark table-striped shadow-dark" role="grid" aria-describedby="default-datatable_info"> <thead> <tr role="row"> <th class="sorting" tabindex="0" aria-controls="default-datatable" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> books </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> Book sales </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; <p> </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font-size :17px"><p> Book price </p> </th> <th class="sorting" tabindex="0" ARIa-controls ="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; <th class=" 0" aria-controls="default-datatable" rowSPAN ="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 100px; Font :17px"><p> Book inventory </p> </th> • </tr> </thead> <tbody> {% for book_obj in book_obj_list%} <tr role="row" Class = "odd" >, <! <td> <img SRC ="{% static book_obj.image_set.first.img_address.name %}" class="product-img" Alt ="product img"> • </td> <td>{{book_obj.book_sales}}</ TD > < TD >{% widthratio book_obj.book_sales 1 book_obj.book_price %}</td> <td>{% widthratio book_obj.book_sales 1000 100 %}%</td> <td>{{ book_obj.book_price }}</td> <td>{{ book_obj.book_score }}</td> <td> <div class="progress shadow" style="height: 4px;" Word-wrap: break-word! Important; "> <div class="progress-bar gradient-scooter" role="progressbar" } {% widthratio book_obj. Book_inventory 1000 100% % "> < / div > < / div > < / td >, < tr > {% endfor %}, < / tbody >, < / table > </div> </div> </div>Copy the code

3. Keep several decimal places behind the decimal point

Since the widthratio method above cannot accurately reserve decimal places, we use the filter FloatFormat to calculate the proportion of sales of each book and reserve the following two digits

In views.py we calculate the percentage of sales for each book with the following code:

Def operation(request): def operation(request): def operation(request): def operation(request): def operation(request): def operation(request): def operation(request): Res_dic = {"book_obj":book_obj,# book object "book_rate":book_obj. Res_lst. Append (res_dic), return render (request, "operationa. HTML", locals ())Copy the code

The code in the HTML shows the value with two decimal places reserved as follows:

<td>{{ res_dic.book_rate | floatformat:2}}</td>
Copy the code

The front-end implementation effect is shown as follows:

Note: To preserve the last 3 digits of the decimal, just write it like this

<td>{{ res_dic.book_rate | floatformat:3}}</td>
Copy the code

The front-end code is as follows:

{% for res_dic in res_lst %} <tr role="row" class="odd"> <! <td> <img SRC ="{% static res_did.book_obj.image_set.first.img_address.name %}" class="product-img" Alt ="product img"> • </td> < TD >{{res_did.book_obj.book_sales}}</ TD > < TD >{% widthratio res_did.book_obj.book_sales 1 res_dic.book_obj.book_price %}</td> <td>{{ res_dic.book_rate | floatformat:2}}</td> <td>{{ res_dic.book_obj.book_price </td> <td> <div class="progress shadow" style="height: 4px; Word-wrap: break-word! Important; "> <div class="progress-bar gradient-scooter" role="progressbar" Book_obj. book_inventory 1000 100 %}%"></div> </div> </td> • </tr> {% endfor %}Copy the code

Second, filter add to achieve addition and subtraction

In fact, this is going to be pretty easy, and we’re going to leave the view function the same as the one above.

1. Implement addition

For example, if you want to increase sales per book by 100

<td>{{ res_dic.book_obj.book_sales|add:100 }}</td>
Copy the code

2. Implement subtraction operations

For example, if the project is reduced by 10 per data store

 <td>{{ res_dic.book_obj.book_inventory| add:-10 }}</td>
Copy the code

3. Hybrid arithmetic

So, for example, if you want to figure out how much you sell per book for 100 more copies

<td>{% widthratio res_dic.book_obj.book_sales|add:100  1  res_dic.book_obj.book_price  %}</td>
Copy the code

This is the introduction to the numerical operations of the template system.

I’m Zidong, and I’ll see you next time!