Refresh DataTable without changing the state of Child Rows

sarthaks21

The datatable contains child rows.
The table's data should refresh after 5 seconds, but, as soon as the page refreshes, the rows that are in row.show() state revert back to their hidden state. I want to refresh the table values such that the state of the table is maintained. Django is used for backend which is reading the data from a mysql database.

{% extends "tableviewer/base.html" %}
{% block content1 %}
<!-- head section -->

<style>

  @import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
   td.details-control {
      background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
      cursor: pointer;
  }
  tr.shown td.details-control {
      background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
  }
</style>

{%endblock%}

{% block content %}
<!-- body section -->
<!-- <button type="button" class="refresh">Reset Table</button> -->

  <table id = "table1">
      <thead class = "thead">
      <tr>
        <th></th>
          <th>
              AUTHOR ID</th>
          <th>AUTHOR NAME</th>
          <th>Article</th>
          <th>Random Values</th>
      </tr>
      </thead>
       <tbody>
          {% for aob in obj %}
          <tr data-child-value="abcd">
            <td class="details-control"></td>
                  <td>{{aob.authId}}</td>
                  <td>{{aob.authName}}</td>
                  <td>{{aob.article}}</td>
                  <td><font color = {{color}}>{{random_nos}}</font></td>
                  <!-- <td><font color = {{color}}><div id = "autochange">{{random_nos}}</div></font></td> -->
                  <!-- <td id = "autochange"><font color = {{color}}>{{random_nos}}</font></td> -->
              </tr>

          {%endfor%}
      </tbody>
  </table>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>


<script type="text/javascript">
  function format(value) {
      reVal = '<div>Hidden Value: ' + value + '</div>';
        return reVal;
    }
    $(document).ready(function () {
        var table = $('#table1').DataTable({});

        // Add event listener for opening and closing details
        $('#table1').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
              //alert("inside isShown == True");
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
              //alert("inside isShown == False");
                // Open this row
                row.child(format(tr.data("data-child-value"))).show();
                tr.addClass('shown');
            }
        });
    });

</script>



{% endblock %}

kthorngren

This thread is asking the same question.

Kevin

sarthaks21

What if I am not reading data through ajax?

kthorngren

How are you refreshing the data?

The method you are using to refresh the data will need to call the code presented in the example in that thread.

Kevin

sarthaks21

I want to do the exact same thing from this code
http://live.datatables.net/qolevune/1/edit

but I am sending the data in form of a dictionary from my views.py file, as is done normally.

from django.shortcuts import render
from .models import Table
from django.http import JsonResponse
import random as rn
import json

global context, running
context = None
running = False

def home(request):
    global context
    numb = rn.randrange(20, 50)
    color = 'green'

    if context == None:
        context = {"obj": Table.objects.all(),
                   "random_nos": numb,
                   "color" : color}
    else:
        if context["random_nos"] < numb:
            color = 'green'
        else:
            color = 'red'

        context = {"obj": Table.objects.all(),
                   "random_nos": numb,
                   "color" : color}
        #json_context = json.dumps(context)

    return render(request, 'tableviewer/home.html', context);

The code in the link is loading data from .txt file.

The data should come from the views.py file only.

Any suggestions as to what I should try?

kthorngren

My suggestion is to use Ajax to fetch the data and let Datatables populate the table. That means you will render the page using views.py and have another route for the Ajax request which will return the dictionary as a JSON response.

Kevin

sarthaks21

Is there any alternative to ajax?

kthorngren

How do you pan to update the table data?

If you use some other method you will need to tell Datataables to refresh its data cache. One way is to use rows().invalidate().

Kevin