[英]Accordion Table + Date Range Picker + AJAX
当日期范围选择器中的日期更改时,我试图更改 DIV 的内部。 我正在使用Date Range Picker和Accordion Table来帮助处理此页面。
DIV 包含一个手风琴表,当使用日期范围选择器选择不同的日期范围时,该表会更改以显示不同的数据日期范围。 当桌子再生时,它将不再像手风琴部分一样打开和关闭。
这是我页面上生成表格和日期范围选择器的 HTML/PHP:
<!-- Date selector -->
<div id="reportrange">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span>
</div>
<!-- Our table -->
<div id="replace">
<?php
$yesterday = date("m/d/Y", strtotime('-31 hours'));
table($yesterday, $yesterday);
?>
</div>
在页面底部,我有日期范围选择器的所有信息以及用于调用 table() 函数的 AJAX 调用。 这是 AJAX 调用:
// AJAX call to our php function which creates the table
$.ajax({
url: 'php/jstranslator.php',
type: 'post',
data: {'action': 'table', 'start': begin, 'stop': stop},
success:function(result){
document.getElementById("replace").innerHTML = result;
},
error: function(xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
});
我需要帮助弄清楚为什么我的表在重新生成数据后将不再打开/关闭。 如果您检查页面并查看内容,您会发现表格中充满了您看不到的所有数据!
感谢帮助过的人!
我的问题是 js 事件与原始表相关联。 所以我所要做的就是添加使表打开并接近 ajax 成功语句末尾的 javascript。
/* When the date range is changed, update the table
*/
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
var begin = picker.startDate.format('MM/DD/YYYY');
var stop = picker.endDate.format('MM/DD/YYYY');
// AJAX call to our php function which creates the table
$.ajax({
url: 'php/jstranslator.php',
type: 'post',
data: {'action': 'table', 'start': begin, 'stop': stop},
success:function(result){
document.getElementById("replace").innerHTML = result;
$(function(){
$(".fold-table tr.view").on("click", function(){
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
},
error: function(xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.