Question

我有一个错误：

无效的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>

Answer 1

尝试：

为数据表初始化分配一个变量

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

然后，在ajax成功中使用此

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

您可以在官方文档中找到draw()函数的参考。

Answer 2

我可能猜到，您的问题有点不同-它是一堆PHP，Javascript和HTML。为了修复它，我会这样：

让您的初始PHP返回简单的HTML，其中<body>包含空的<table id="selected"></table>和<head>，其中包含所有必要的先决条件（包括jQuery和DataTables）。
在起始页<head>中包含对脚本的引用，其中包含内容，例如：

$(document).ready(function () {
    $('#selected').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'print', 'excel', 'pdf'
        ],
        ajax: {
            url: 'temp_trans.php',
            dataSrc: ''
        },
        columns: [{
                data: 'field1Name',
                title: 'columnTitle'
            },
            ....
        ]
        ...
    });
});

这将对服务器端脚本执行ajax-call，以检索数据并使用相应的内部HTML内容填充表

在temp_trans.php脚本中进行排序，以便执行SQL查询并返回格式正确的JSON，例如：

[
   {"field1":"value", "field2":"value" ...},
   ...
]

单击某个按钮或需要重新加载最新数据时，触发ajax().reload()。

刷新jQuery DataTables

2 个答案: