将默认值设置为在页面加载时影响 html 表的过滤器答案

【问题标题】：Setting a default value to a filter that affects html table when page is loaded将默认值设置为在页面加载时影响 html 表的过滤器
【发布时间】：2019-01-31 09:01:48
【问题描述】：

表：

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

我希望默认值是要加载到过滤器的一周中的第一个日期（星期日），并在加载页面时过滤表格。

我该怎么做呢？截至目前，默认值确实出现在输入文本框中，但表格尚未被过滤。

【问题讨论】：

标签： jquery filter html-table jscript

【解决方案1】：

只需将我的过滤器脚本放入设置默认值脚本中

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

【讨论】：