Question

当我选择一个下拉日期显示表格时，我有一个使用ajax响应的表格。

    <!--datepicker-->


    <div class="col-md-4">
            <input type="text" name="date_po_month_picker" id="date_po_month_picker" class="form-control" placeholder="Date"/>
            </div>
   <!--button-->
 <div class="col-md-8">
        <input type="button" name="range" id="range" value="Prikaži" class="btn btn-success"/>
        </div>

<!--table that generate from ajax -->           

 <div id="purchase_order" class="table table-striped table-bordered">

<!--stady table header-->

    <table id="datatable" class="table table-striped table-bordered">
    <thead>
    <tr>
    <th style="text-align:center;">Agent</th>
    <th style="text-align:center;">Obrade</th>
    <th style="text-align:center;">Kontakti</th>
    <th style="text-align:center;">Zadržani</th>
    <th style="text-align:center;">Terminirani</th>
    <th style="text-align:center;">Coversion rate</th>
    </tr>
    </thead>
    </table>


<!--script for datepicker -->
<script>
        $('#date_po_month_picker').daterangepicker({
        format: 'YYYY-MM-DD',
        singleDatePicker: true,
        singleClasses: "picker_1",
         locale: {
                format: 'YYYY-MM-DD'
            }
        }, function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
        });
    </script>

<!--script for ajax-->

    <script>
    $(document).ready(function(){

        $('#range').click(function(){
            var From = $('#date_po_month_picker').val();
            var to = $('#to').val();
            if(From != '')
            {
                $.ajax({
                    url:"wb_statistika_po_danu_ajax.php",
                    method:"POST",
                    data:{From:From},
                    success:function(data)
                    {
                        $('#purchase_order').html(data);
                    }
                });
            }
            else
            {
                alert("Please Select the Date");
            }
        });
    });
    </script>

这是我的ajax文件：

if(isset($_POST["From"]))   
{                   $result = '';
$date_month = date("m",strtotime($_POST['From']));
$date_year = date("Y",strtotime($_POST['From']));
                    //get records from database
                    $sql_list = "SELECT Agent,count(datum_obrade) as obrada, 
                    count(case when datum_kontakta>0 then 1 end) as kontakti,
                    count(case when datum_vracanja>0 then 1 end) as zadrzani,
                    count(case when datum_terminacije>0 then 1 end) as terminacija 
                    from wb_base WHERE MONTH(datum_obrade) = '".$date_month."' AND YEAR(datum_obrade) = '".$date_year."' group by Agent";
                    $sql_list_result = $mysqli->query($sql_list);
                    $result .='
                    <table class="table table-striped table-bordered tablesorter">
                      <thead>
                        <tr>
                            <th style="text-align:center;">Agentt</th>
                            <th style="text-align:center;">Obrade</th>
                            <th style="text-align:center;">Kontakti</th>
                            <th style="text-align:center;">Zadržani</th>
                            <th style="text-align:center;">Terminirani</th>
                            <th style="text-align:center;">Coversion rate</th>
                        </tr>
                      </thead>';




                    if($sql_list_result->num_rows > 0){ 
                        while($row = $sql_list_result->fetch_assoc())
                        { 
                    $str = substr(($row["zadrzani"] / $row["obrada"]*'100'),0,5);
                        $result .='

            <tr>
            <td style="text-align:center;">'.$row["Agent"].'</td>
            <td style="text-align:center;">'.$row["obrada"].'</td>
            <td style="text-align:center;">'.$row["kontakti"].'</td>
            <td style="text-align:center;">'.$row["zadrzani"].'</td>
            <td style="text-align:center;">'.$row["terminacija"].'</td>
            <td style="text-align:center;">'. $str .'%</td>
            </tr>';



}
    }
    else
    {
        $result .='
        <tr>
        <td colspan="5">Za navedeni mjesec nema rezultata</td>
        </tr>';
    }
    $result .='</table>';
    echo $result;
}

所有这些都很好，但是当我单击按钮时，排序标题消失了。在我单击按钮之前，我在列标题中有用于排序的箭头，但是单击后它们消失了。我注意到排序是由表ID id="datatable"生成的，我尝试将id="datatable"添加到我的ajax文件中的表中，但是没有帮助。该表使用datatables.net插件生成表和功能。但我想添加排序功能。

Answer 1

您正在覆盖将DataTables变成可排序表格的HTML元素。
这会破坏这些元素（以及对它们所做的任何事情），并用新元素替换它们。
由于这些元素是新元素，因此您需要再次使它们“可排序”。

替换表后只需重新初始化表即可：

success: function(data) {
    // this replaces the content of that div
    $('#purchase_order').html(data);

    // so reinitialize that table
    $('#purchase_order > table').DataTable({
        // whatever options you want
    });
}

顺便说一句，由于您要覆盖整个div（而不仅仅是表格）的内容，因此，如果您不想覆盖表格下方的script标签，则可以想考虑在div之后立即关闭table。

<!--table that generate from ajax -->
<div id="purchase_order" class="table table-striped table-bordered">

    <!--stady table header-->
    <table id="datatable" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th style="text-align:center;">Agent</th>
                <th style="text-align:center;">Obrade</th>
                <th style="text-align:center;">Kontakti</th>
                <th style="text-align:center;">Zadržani</th>
                <th style="text-align:center;">Terminirani</th>
                <th style="text-align:center;">Coversion rate</th>
            </tr>
        </thead>
    </table>
</div><!-- close this off here so the scripts below aren't overwritten by the AJAX call.

Answer 2

我正在尝试为您找到解决方案，因此您可以使用下面粘贴的代码。在结束时进行必要的更改。

$('#range').click(function(){
    var From = $('#date_po_month_picker').val();
    var to = $('#to').val();
    if(From != '')
    {
        $('#datatable').DataTable().destroy();
        $('#datatable').DataTable({
            "order": [[ 0, "desc" ]],
            "pageLength": 50,
            "ajax": {
                type: "POST",
                url: "wb_statistika_po_danu_ajax.php}",
                data: {From:From}
           }                    
        });
    }
    else
    {
        alert("Please Select the Date");
    }
});

// PHP

foreach(loop for your data to return) {
    $row = array();
    $row[] = 'col1 data';
    $row[] = 'col2 data';
    $row[] = 'col3 data';
    $row[] = 'col4 data';
    $row[] = 'col5 data';
    $row[] = 'col6 data';

     $data[] = $row;
}

echo json_encode(['data'=>$data]);

ajax调用后表排序不起作用

2 个答案: