Установка значения по умолчанию для фильтра, который влияет на HTML-таблицу при загрузке страницы - PullRequest
Новая
       8

Установка значения по умолчанию для фильтра, который влияет на HTML-таблицу при загрузке страницы

0 голосов
/ 31 января 2019

таблица: 

<input id="weekFilter" type="text" name="myInputSearches" placeholder="Week..." style="margin-top:4px">
<label class="noResults" align="right" style="display:none; color:red"><b><i>No Match Found</i></b></label>

....

<tbody id="myTable">
  {% for event in eventList %}
    <tr>
      <td><div style="width:100px">{{ event.week|date:"d-m-Y" }}</div></td>
      <td><div style="width:200px; text-transform: uppercase">{{ event.name }}</div></td>
      <td><div id="day0" style="width:200px; text-transform: uppercase">{{ event.sunday }}</div></td>
      <td><div id="day1" style="width:200px; text-transform: uppercase">{{ event.monday }}</div></td>
      <td><div id="day2" style="width:200px; text-transform: uppercase">{{ event.tuesday }}</div></td>
      <td><div id="day3" style="width:200px; text-transform: uppercase">{{ event.wednesday }}</div></td>
      <td><div id="day4" style="width:200px; text-transform: uppercase">{{ event.thursday }}</div></td>
      <td><div id="day5" style="width:200px; text-transform: uppercase">{{ event.friday }}</div></td>
      <td><div id="day6" style="width:200px; text-transform: uppercase">{{ event.saturday }}</div></td>
    </tr>
  {% endfor %}
</tbody>

jQuery фильтр: 

$('#weekFilter').datetimepicker({
  format:'DD-MM-YYYY',
});

$('#weekFilter').on('dp.change', function (e) {
  var value = $("#weekFilter").val();
  var firstDate = moment(value, "DD-MM-YYYY").day(0).format("DD-MM-YYYY");
//  var lastDate =  moment(value, "DD/MM/YYYY").day(6).format("DD/MM/YYYY");
  $("#weekFilter").val(firstDate).change();
});

$('#weekFilter').on('dp.change', function (e) {
  var rex = new RegExp($(this).val(), "i");
  $("#myTable tr").hide();
  $("#myTable tr").filter(function () {
      return rex.test($(this).text());
  }).show();
  $(".noResults").hide();
  if ($("#myTable tr:visible").length == 0) {
      $(".noResults").show();
  }
});

Здесь, когда я выбираю дату, таблица отфильтровывает данные.

jQuery для установки по умолчаниюзначение: 

<script>
  $(document).ready(function(){
    $("#weekFilter").attr("value", "27-01-2019");
  });
</script>

Я хочу, чтобы значением по умолчанию была первая дата (воскресенье) недели, которая будет загружена в фильтр, и таблица, отфильтрованная при загрузке страницы.

Какя пойду делать это?На данный момент значение по умолчанию отображается в текстовом поле ввода, но таблица не была отфильтрована.

1 Ответ

0 голосов
/ 31 января 2019

Просто нужно было поместить мой фильтр-скрипт в настройку скрипта значения по умолчанию 

<script>
  var firstDate = moment().startOf('week').toDate();
  var day1 = firstDate.getDate();
  var month1 = firstDate.getMonth() + 1;
  var year1 = firstDate.getFullYear();
  if (day1.toString().length == 1) {
    day1 = "0" + day1;
  }
  if (month1.toString().length == 1) {
    month1 = "0" + month1;
  }
  var endOfWeek   = moment().endOf('week').toDate();
  var day2 = endOfWeek.getDate();
  var month2 = endOfWeek.getMonth() + 1;
  var year2 = endOfWeek.getFullYear();
  if (day2.toString().length == 1) {
    day2 = "0" + day2;
  }
  if (month2.toString().length == 1) {
    month2 = "0" + month2;
  }
  $(document).ready(function(){
    $("#weekFilter").attr("value", day1 + "-" + month1 + "-" + year1);
    $("#displayWeek").html("Week: " + day1 + "-" + month1 + "-" + year1 + " <> " + day2 + "-" + month2 + "-" + year2);
    var rex = new RegExp($("#weekFilter").val(), "i");
    $("#myTable tr").hide();
    $("#myTable tr").filter(function () {
      return rex.test($(this).text());
    }).show();
    $(".noResults").hide();
    if ($("#myTable tr:visible").length == 0) {
      $(".noResults").show();
    }
  });
</script>
...