Refresh DataTable without changing the state of Child Rows

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 %}