07-24-2023, 10:12 AM
table:
<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 filter:
$('#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();
}
});
Here when i pick a date, the table filters out the data.
jQuery to set default value:
<script>
$(document).ready(function(){
$("#weekFilter").attr("value", "27-01-2019");
});
</script>
I want the default value to be the first date (sunday) of the week to be loaded into the filter and the table filtered when the page is loaded.
How would i go about doing this? As of right now, the default value does appear in the input textbox but the table hasn't been filtered.
<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 filter:
$('#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();
}
});
Here when i pick a date, the table filters out the data.
jQuery to set default value:
<script>
$(document).ready(function(){
$("#weekFilter").attr("value", "27-01-2019");
});
</script>
I want the default value to be the first date (sunday) of the week to be loaded into the filter and the table filtered when the page is loaded.
How would i go about doing this? As of right now, the default value does appear in the input textbox but the table hasn't been filtered.