Обновление jQuery DataTables - PullRequest
Новая
       2

Обновление jQuery DataTables

0 голосов
/ 26 февраля 2019

У меня ошибка:

Неправильный ответ JSON

Моя проблема в том, что я не могу перезагрузить / обновить мои DataTable, есть ли способ, кромеиспользуя следующее:

$('#selected').load('mypage.php #selected') // обновляет таблицу, но нумерация страниц / кнопок / панели поиска исчезает 

$('#selected').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print', 'excel', 'pdf'
        ]

    } );



    $(document).ready(function() {
        <?php 
            include('../config/dbconn.php');
            mysqli_query($dbconn, 'DELETE FROM temp_trans');    
        ?>

        $(document).on('click','a[data-role=add1]', function() {
            window.onbeforeunload = function() {
                return "Data will be lost if you leave the page, are you sure?";
            };
            var transnum = '';
            if(transnum == '') {
                transnum = genId();
            }
            var id= $(this).data('id');
            var qty = 1;
            var price = $('#' + id).children('td[data-target=price]').text();
            price = parseInt(price.substr(1, price.length));

            $.ajax({
                url: 'temp_trans.php',
                method: 'get',
                data: {
                    id: id,
                    transnum: transnum,
                    qty: qty,
                    price: price
                },
                success: function() {
                    table = $("#selected").DataTable();
                    table.ajax.reload(null, false); 
                }
            });
        });
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="selected">
                            <thead>
                                <tr>
                                    <th>Transaction Number</th>
                                    <th>Product Name</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                    <th>Total</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            <?php
                                include('../config/dbconn.php');
                                $sql = "SELECT * FROM `temp_trans` inner join `products` on temp_trans.prod_id = products.prod_id";
                                $result = mysqli_query($dbconn, $sql);
                                if (mysqli_num_rows($result) > 0) {
                                    // output data of each row
                                    while($row = mysqli_fetch_assoc($result)) { ?>
                                <tr id="<?php echo $row['prod_id'] ?>">
                                    <td data-target="sid"><?php echo $row['trans_num']; ?></td>
                                    <td data-target="sname"><?php echo $row['prod_name']; ?></td>
                                    <td data-target="sqty"><?php echo $row['qty']; ?></td>
                                    <td data-target="sprice"><?php echo utf8_encode('&#8369;'). $row['price']; ?></td>
                                    <td data-target="stotal"><?php echo utf8_encode('&#8369;'). number_format($row['price'] * $row['qty'],2); ?></td>
                                    <td><a data-role="update" data-id="<?php echo $row['prod_id'];?>" style="color: orange; font-weight: bold;">Update</a></td>
                                </tr>
                                <?php }
                                }
                            ?>
                            </tbody>
                        </table>

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Я думаю, ваша проблема немного другая - это беспорядок PHP, Javascript и HTML.Чтобы исправить это, я бы сказал:

  1. Ваш первоначальный PHP вернет простой HTML, где <body> содержит пустые <table id="selected"></table> и <head>, которые ссылаются на все необходимые предпосылки(включая jQuery и DataTables).
  2. Включите на стартовую страницу <head> ссылку на скрипт с содержимым, что-то вроде: 
$(document).ready(function () {
    $('#selected').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'print', 'excel', 'pdf'
        ],
        ajax: {
            url: 'temp_trans.php',
            dataSrc: ''
        },
        columns: [{
                data: 'field1Name',
                title: 'columnTitle'
            },
            ....
        ]
        ...
    });
});

, что будет ajax-вызовите к вашему серверному сценарию, чтобы получить данные и заполнить таблицу соответствующим внутренним HTML-содержимым

Разберитесь в вашем скрипте temp_trans.php, чтобы он выполнял SQL-запрос и возвращал правильно отформатированный JSON, например: 
[
   {"field1":"value", "field2":"value" ...},
   ...
]
Триггер ajax().reload() при нажатии какой-либо кнопки или всякий раз, когда необходимо обновить актуальные данные.
0 голосов
/ 26 февраля 2019

попробуйте это:

Назначьте переменную для инициализации данных 

tb_data = $('#selected').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'print', 'excel', 'pdf'
    ]
} );

Затем, при успешном использовании ajax, используйте 

success: function() {
  tb_data.DataTable().draw();
}

Вы можете найти ссылку для Функция draw () в официальных документах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...