Django/Python - Datapicker и данные с сервера

Я некоторое время пытаюсь понять, как сделать подборщик данных, который использует moment.js (сайт: http://www.daterangepicker.com), и подключить его к моей базе данных, которая отображается таблицей, а данные отображаются с сервера в виде цикла, и по какой-то причине я не могу заставить его работать.

Возможно, это просто невозможно сделать, у меня больше нет сил, поэтому я спрашиваю здесь, может ли кто-нибудь помочь мне, как это можно сделать.

Мне нужно сделать "datapicker", который будет иметь диапазон, выбранный клиентом, и будет автоматически фильтровать базу данных, и отображать таблицу только со строками, которые соответствуют запросу.

test-table.js

import moment from "moment";

$(document).ready(function() {

  $(function() {
    var start = moment("2022-01-01 12:34:16");
    var end = moment("2022-03-03 10:08:07");

    function cb(start, end) {
      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
      startDate: start,
      endDate: end,
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      }
    }, cb);

    cb(start, end);

  });


  $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
   var start = picker.startDate;
   var end = picker.endDate;


  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = start;
      var max = end;
      var startDate = new Date(data[1]);

      if (min == null && max == null) {
        return true;
      }
      if (min == null && startDate <= max) {
        return true;
      }
      if (max == null && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );
  table.draw();
  $.fn.dataTable.ext.search.pop();
});

  var table = $('#bank-operation-list').DataTable({
    responsive: true
        });
});

Таблица html:

                        
                            <span></span> <b class="caret"></b>
                          </div>
                               <table  style="width: 100%;" id="bank-operation-list" class="table table-hover table-striped table-bordered dataTable dtr-inline">

                                <thead>
                                <tr>

                                    <th>Klient</th>
                                    <th>Data dodania</th>
                                    <th>Typ operacji</th>
                                    <th>Kwota</th>
                                    <th>Status</th>
                                    <th>Akcja</th>
                                </tr>
                                </thead>
                                <tbody>
                                {%  for c in operation %}
                                <tr>

                                    <td>{{ c.client.name }} {{ c.client.lastname }}</td>
                                    <td>{{ c.date }}</td>
                                    <td>{{ c.type }}</td>
                                    <td>€ {{ c.cash }}</td>
                                    <td>{{ c.status }}</td>
                                    <td>

                                        <form method="POST">
                                            {%  csrf_token %}
                                            <input type="hidden" value="{{ c.bank.id }}" name="bank-id">
                                            <button type="submit" class="mb-2 mr-2 btn btn-shadow btn-success">Check
                                            </button>
                                        </form>

                                    </td>
                                    {% endfor %}
                                </tr>

                                </tbody>
                                <tfoot>

                                </tfoot>
                            </table>
                        </div>```

The table itself is generated from data-table:

table.js

```// Datatables

$( document ).ready(function() {

    setTimeout(function () {

        $('#bank-operation-list').DataTable({
            responsive: true
        });

    }, 1);

});

Вернуться на верх