I have an html code in which my collegues have used datatable. Now I want to add export buttons as here. But I’m not able to do it because I’m not a developer and I have very basic knowledge of HTML.

  <div class="col-sm-2 btn-group" role="group" style="margin-top: 50px; max-height: 40px;">
    <button type="button" class="btn btn-primary btn-default" autofocus="autofocus" onclick="updateTotals('mean')">Mean</button>
    <button type="button" class="btn btn-primary" onclick="updateTotals('sum')">Sum</button>
    <button type="button" class="btn btn-primary" onclick="updateTotals('min')">Min</button>
    <button type="button" class="btn btn-primary" onclick="updateTotals('max')">Max</button>
  </div>

  <div class="col-sm-8" style="margin-top: -100px;">

    {% for totals_group_name in totals_groups.keys() %}
    <h3 class="mt-5">{{totals_group_name}}</h3>
    <table id="dataTable{{totals_group_name}}Totals" class="table table-striped table-bordered">
      <thead>
          <tr id="dataTable{{totals_group_name}}TotalsHead"></tr>
      </thead>
      <tbody id="dataTable{{totals_group_name}}TotalsBody"></tbody>
    </table>
    {% endfor %}

  </div>

  <div class="col-sm-2"></div>

I did add the below script, but it’s not really working.

    <script>
        $(document).ready(function() {
            {% for totals_group_name in totals_groups.keys() %}
            $('#dataTable{{totals_group_name}}Totals').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'csv'
                ]
            });
            {% endfor %}
        });
    </script>