После вызова Ajax таблица данных не может перезагрузиться

После успешного вызова Ajax я хочу перезагрузить свою загрузочную таблицу новыми значениями, которые возвращаются из моей php-части.

<table id="gelirtableid" data-toggle="table" data-url="gelir-getdata.php" data-classes="table table-hover" data-striped="true"
                        data-pagination="true" data-page-list=[20, 40, 75, 100] data-search="true">
                            <thead>
                                <tr >
                                    <th data-sortable="true" data-field="tarih">Tarih</th>
                                    <th data-sortable="true" data-field="Toplam">Toplam</th>                                    
                                </tr>
                            </thead>
</table>

мой php-скрипт, который извлекает данные из mysql

<?php 
include "dbcon.php";
if($_POST["gelirtablosecimi"]){
        $gelirtabloadi = $_POST["gelirtablosecimi"];
        $_SESSION["gelirtabloadi"] = $gelirtabloadi;
}

$gelirtabloadi = $_SESSION["gelirtabloadi"];
$gelirgunluktoplam = $db->prepare("select tarih, hasilat + visa + butce_ici + hisse_satis + sosyal_konut + elektrik + haberlesme + iller_bank + diger AS Toplam from $gelirtabloadi");
$gelirgunluktoplam->execute();
$results = $gelirgunluktoplam->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo $json;

 ?>

и мой вызов Ajax

$("#gelirgetir").click(function() {
                    var gelirtablosecimi = $("#select1").val();
                    if (gelirtablosecimi) {
                        $.ajax({
                            type: "POST",
                            url: "gelir-getdata.php",
                            data: {
                                "gelirtablosecimi": gelirtablosecimi
                            },
                            success: function(result) {                                                                
                                notifyUser('success', 'Başarılı!', 'Tablo başarıyla güncellendi');
                                location.reload();
                            },
                            error: function(result) {
                                notifyUser('error', 'Hata', 'error');
                            }
                        });
                    } else {
                        notifyUser('info', 'Dikkat', 'Tablo seçimi yapmadınız!');
                    }

                });

Я новичок в вызовах Ajax, возможно, проблема связана с моей частью ajax. Как видите, я имею дело с location.reload(); после успешного вызова. Я пытался перезагрузить .container и #gelirtableid, но у меня ничего не получилось. По сути, когда я нажимаю кнопку #gelirgetir, она обновляет одно из моих значений сеанса, и моя таблица зависит от этого значения сеанса. После того, как значение сеанса изменится, и если я перезагружу страницу, появятся новые значения, но мне придется принудительно обновить страницу. Я только хочу обновить таблицу. Любое предложение?


php jquery ajax bootstrap-table
person Kerem    schedule 16.04.2018    source источник
comment
Итак, вы просто перезагружаете окно. Это на самом деле ничего не даст. Если вы собираетесь использовать AJAX и jQuery, вы можете очистить таблицу и перезагрузить ее проанализированными данными json.   -  person Adam J    schedule 16.04.2018
comment
это имеет смысл. как я могу реализовать подобное?   -  person Kerem    schedule 16.04.2018

Ответы (2)


arrow_upward
0
arrow_downward

Замените код таблицы, чтобы у вас было тело таблицы. Мы собираемся заменить это позже.

<table id="gelirtableid" data-toggle="table" data-url="gelir-getdata.php" data-classes="table table-hover"
       data-striped="true"
       data-pagination="true" data-page-list=[20, 40, 75, 100] data-search="true">
    <thead>
    <tr>
        <th data-sortable="true" data-field="tarih">Tarih</th>
        <th data-sortable="true" data-field="Toplam">Toplam</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

В вашей функции вам нужно извлечь данные из ответа с помощью функции parseJSON в jQuery. Затем вам нужно создать контент для тела таблицы. Вот пример.

$("#gelirgetir").click(function () {
    var gelirtablosecimi = $("#select1").val();
    if (gelirtablosecimi) {
        $.ajax({
            type: "POST",
            url: "gelir-getdata.php",
            data: {
                "gelirtablosecimi": gelirtablosecimi
            },
            success: function (result) {
                notifyUser('success', 'Başarılı!', 'Tablo başarıyla güncellendi');
                var content = '';
                $.each(result, function(i, data) {
                    content += '<tr>';
                    content += '<td>'+result[i].tarih+'</td>';
                    content += '<td>'+result[i].Toplam+'</td>';
                    content += '</tr>';
                });

                $('#gelirtableid tbody').html(content);
            },
            error: function (result) {
                notifyUser('error', 'Hata', 'error');
            }
        });
    } else {
        notifyUser('info', 'Dikkat', 'Tablo seçimi yapmadınız!');
    }

});
person Adam J    schedule 16.04.2018
comment
мой ответ php - [{"tarih":"14_03_2018","Toplam":"1516"},{"tarih":"14_03_2018","Toplam":"1524"},{"tarih":"14_03_2018","Toplam":"4625"},{"tarih":"15_03_2018","Toplam":"1512000"}], и я изменил часть ‹td›‹/td› на <td>["tarih"]</td> <td>["Toplam"]</td>, и ничего не изменилось. какая-то ошибка здесь? - person Kerem; 17.04.2018
comment
@KeremCan - я обновил свой ответ для вас. Вы должны быть в состоянии использовать это сейчас. - person Adam J; 17.04.2018

arrow_upward
0
arrow_downward

Ошибка, когда я получаю вышеуказанное решение, составляет около JSON.parse(). $.each ожидает анализа данных JSON. Следующие коды работают как шарм.

<table id="gelirtableid" data-toggle="table" data-url="gelir-getdata.php" data-classes="table table-hover" data-striped="true"
                            data-pagination="true" data-page-list=[20, 40, 75, 100] data-search="true">
                                <thead>
                                    <tr >
                                        <th data-sortable="true" data-field="tarih">Tarih</th>
                                        <th data-sortable="true" data-field="Toplam">Toplam</th>                                    
                                    </tr>
                                </thead>
</table>

Звонок Аякса:

$("#gelirgetir").click(function() {
                    var gelirtablosecimi = $("#select1").val();
                    if (gelirtablosecimi) {
                        $.ajax({
                            type: "POST",
                            url: "gelir-getdata.php",
                            data: {
                                "gelirtablosecimi": gelirtablosecimi
                            },
                            success: function(result) {
                                var content = '';
                                    var obj = JSON.parse(result);
                                    $.each(obj, function(i, data) {                                        
                                        content += '<tr>';
                                        content += '<td>'+obj[i].tarih+'</td>';
                                        content += '<td>'+obj[i].Toplam+'</td>';
                                        content += '</tr>';
                                    });

                                    $('#gelirtableid tbody').html(content);                                                             
                                notifyUser('success', 'Başarılı!', 'Tablo başarıyla güncellendi');                                
                            },
                            error: function(result) {
                                notifyUser('error', 'Hata', 'error');
                            }
                        });
                    } else {
                        notifyUser('info', 'Dikkat', 'Tablo seçimi yapmadınız!');
                    }

                });
person Kerem    schedule 17.04.2018