刷新 jQuery 数据表答案

【问题标题】：Refreshing jQuery DataTables刷新 jQuery 数据表
【发布时间】：2019-02-25 21:23:56
【问题描述】：

我有一个错误：

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

【问题讨论】：

标签： javascript php jquery datatables

【解决方案1】：

我可能猜到，您的问题有点不同 - 它是 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()。

【讨论】：

【解决方案2】：

试试这个：

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

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

然后，在ajax成功使用这个

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

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

【讨论】：