手风琴 Table + 日期范围选择器 + AJAX

Question

我试图在更改日期范围选择器中的日期时更改 DIV 的内部。我正在使用 Date Range Picker, and Accordion Table 来帮助处理此页面。

DIV 包含手风琴 table，当日期范围选择器用于 select 不同的日期范围时，手风琴会更改以显示不同的数据日期范围。当table重新生成时，将不再像手风琴部分那样打开和关闭。

这是我页面上生成 table 和日期范围选择器的 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);
    }
});

我需要帮助弄清楚为什么我的 table 在数据重新生成后将不再 open/close。如果您检查页面并查看内容，您会发现 table 充满了您看不到的所有数据！

Answer 1

感谢帮助过的人！

我的问题是 js 事件与原始 table 相关联。所以我所要做的就是添加 javascript 使 table 在 ajax 成功语句的末尾打开和关闭。

/* 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);
        }
    });
});

手风琴 Table + 日期范围选择器 + AJAX

Accordion Table + Date Range Picker + AJAX

php

ajax

jquery

accordion

daterangepicker