Implement datatable in Django

Question

Implement datatable in Django

Navigation

#1 by (0 votes)

0

I have the following Model:

class Coin(models.Model):
    name = models.CharField(unique=True,max_length=50)
    short_name = models.CharField(unique=True,max_length=6)
    url = models.CharField(max_length=200)
    transaction_fee = models.FloatField(default=0.0,blank=True)
    price = models.FloatField(default=0.0,blank=True)
    market_cap = models.IntegerField(default=0,blank=True)
    volume = models.IntegerField(default=0,blank=True)
    circulating = models.IntegerField(default=0,blank=True)
    change = models.FloatField(default=0.0,blank=True)
    cid = models.IntegerField(blank=True, unique=True)
    def __str__(self): 
        return self.name

And I paint it like this:

<table id="table_all_coins" class="table">
  <thead class=" text-primary">
    <th>
      Name
    </th>
    <th>
      Short Name
    </th>
    <th>
      Market Cap
    </th>
    <th>
      Price
    </th>
    <th>
      volume (24h)
    </th>
    <th>
      Circulating Supply
    </th>
    <th>
      Change (24h)
    </th>
  </thead>
  <tbody>
    {% for coin in Coins %}
    <tr class="{{coin.cid}}">
      <td id="name">
        {{coin.name}}
      </td>
      <td class="short_name">
        {{coin.short_name}}
      </td>
      <td class="market_cap">
        {{coin.market_cap}}€
      </td>
      <td class="price">
        {{coin.price}}€
      </td>
      <td class="volume">
        {{coin.volume}}€
      </td>
      <td class="circulating">
        {{coin.circulating}} {{coin.short_name}}
      </td>
      <td class="change">
        {{coin.change}}%
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

It generates a table like the following:

Then, I update the table with the following AJAX method:

$(document).ready(function() {
$.get("https://api.coinmarketcap.com/v2/ticker/?convert=EUR", function(data){
  {% for coin in my_coins %}
  var market_cap = data['data']['{{coin.cid}}']['quotes']['EUR']['market_cap']+'€'
  var price = data['data']['{{coin.cid}}']['quotes']['EUR']['price']+'€'
  var volume = data['data']['{{coin.cid}}']['quotes']['EUR']['volume_24h']+'€'
  var circulating = data['data']['{{coin.cid}}']['total_supply']+' {{coin.short_name}}'
  var change = data['data']['{{coin.cid}}']['quotes']['EUR']['percent_change_24h']+'%'
  $("#table_my_coins .{{coin.cid}} .market_cap")[0].innerText = market_cap
  $("#table_my_coins .{{coin.cid}} .price")[0].innerText = price
  $("#table_my_coins .{{coin.cid}} .volume")[0].innerText = volume
  $("#table_my_coins .{{coin.cid}} .circulating")[0].innerText = circulating
  $("#table_my_coins .{{coin.cid}} .change")[0].innerText = change
  {% endfor %}
  {% for coin in Coins %}
  var market_cap = data['data']['{{coin.cid}}']['quotes']['EUR']['market_cap']+'€'
  var price = data['data']['{{coin.cid}}']['quotes']['EUR']['price']+'€'
  var volume = data['data']['{{coin.cid}}']['quotes']['EUR']['volume_24h']+'€'
  var circulating = data['data']['{{coin.cid}}']['total_supply']+' {{coin.short_name}}'
  var change = data['data']['{{coin.cid}}']['quotes']['EUR']['percent_change_24h']+'%'
  $("#table_all_coins .{{coin.cid}} .market_cap")[0].innerText = market_cap
  $("#table_all_coins .{{coin.cid}} .price")[0].innerText = price
  $("#table_all_coins .{{coin.cid}} .volume")[0].innerText = volume
  $("#table_all_coins .{{coin.cid}} .circulating")[0].innerText = circulating
  $("#table_all_coins .{{coin.cid}} .change")[0].innerText = change
  {% endfor %}
  });
setInterval(ajax, 60000);
});

I want to know how to pass this to a Bootstrap Datatable or another that allows me to sort by columns and basic functionalities.

Thank you very much!

javascript html django datatables

asked by XBoss 17.07.2018 в 23:50

source

1 answer

consumption of web services with javacript and be able to send data to that service? My AJAX response is not shown in my html use Javascript

score 0 · Accepted Answer

I'll leave you here a basic example of datatables with django.

Download the necessary datables.net files (css and js)

Include these files in your static folder

include your css and dataware js to your template

something like this:

   <link rel="stylesheet" href="{% static 'DataTables/dataTables.min.css' %}">
    <script src="{% static 'DataTables/dataTables.min.js' %}"></script>

with these lines you add the css and js downloaded from datatables. in my case my folder is called DataTables, change it as you have it.

now in the views.py

from django.template import loader
def Ejemplo(request):

    template = loader.get_template('miTemplate.html')
    context = {
        'ejemplo_list':Ejemplo.objects.all(),
    }
    return HttpResponse(template.render(context, request))

Do not forget to import your models.

in your template:

       <table id="table_ejemploList" class="table table-striped table-bordered">
                <thead>
                    <tr bgcolor="#bee5eb">
                        <th class="text-center">#</th>
                        <th class="text-center" width="30%">Nombre</th>
                        <th class="text-center" width="40%">Correo</th>
                    </tr>
                </thead>

                {% for ejemplo in ejemplo_list  %}
                    <tr class="text-center">
                        <td>{{ forloop.counter }}</td>
                        <td>{{ ejemplo.nombre }}</td>
                        <td>{{ ejemplo.correo }}</td>
                    </tr>
                {% endfor %}
            </table>

If you do this, the datatables will not be fully implemented, we must instantiate it, we can do it directly in the template, it is advisable to use an external file js for everything that is javascript, jquery, ajax..etc ..

We instantiate it based on the id that we put in table in this case (table_exampleList)

$(document).ready( function () {
    $('#table_ejemploList').DataTable();
} );

with that you could see something like this: Datatables has endless possibilities and plugins. I suggest you read the documentation:

Documentation

I hope you serve and luck