DataTables 显示问题 - 未格式化的表 Blip答案

【问题标题】：DataTables Display Issue - Unformatted Table BlipDataTables 显示问题 - 未格式化的表 Blip
【发布时间】：2017-08-18 20:04:20
【问题描述】：

我只是在做一个简单的 DataTable 显示，但我注意到当页面加载时，无样式的 HTML 数据表出现在样式化的 DataTable 出现之前。有人可以指出为什么会发生这种情况吗？脚本和链接声明的顺序有区别吗？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo DataTable Display</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

        <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>      

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">

        <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

        <script>
            $(document).ready(function(){
                $('#example').DataTable();
            });
        </script>


    </head>
    <body>
        <table id="example" class="display">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

【问题讨论】：

尝试在页面底部添加脚本
我尝试将脚本移到

标签： jquery html datatable

【解决方案1】：

也许尝试通过启用 deferRender 选项的 Ajax 填充您的数据表。我使用它并且从未遇到过渲染问题，因为数据是异步加载的。下面是一个实现的例子：

// HTML
<table id="example">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </tfoot>
</table>


// DATATABLE AJAX SCRIPT
var table = $('#example').DataTable({
    ajax: {
        url: 'your-datatable-populate-script',
        type: 'POST',
        data: function(d) {

        },
    },
    deferRender: true,
    pageLength: 10,

    initComplete: function(settings, json) {

    },
});

// PHP POPULATE SCRIPT
<?php
    $json[] = array(
        'Data 1',
        'Data 2',
        'Data 3',
    );

    $response = array();
    $response['data'] = $json;
    $response['success'] = TRUE;

    echo json_encode($response);
?>

参考：https://datatables.net/manual/ajax

例子：

延迟渲染：

默认情况下，当 DataTables 从 Ajax 或 Javascript 数据源（分别为 ajax 和数据）加载数据时，它将预先创建所有需要的 HTML 元素。在处理大型数据集时，此操作可能需要相当长的时间，尤其是在 IE6-8 等较旧的浏览器中。此选项允许 DataTables 仅在绘制需要时创建节点（表格主体中的行和单元格）。

作为帮助说明这一点的示例，如果您加载一个包含 10,000 行的数据集，但分页显示长度仅为 10 条记录，而不是创建所有 10,000 行，则启用延迟呈现时，DataTables 将仅创建 10 条记录。当最终用户对数据进行排序、分页或过滤时，将自动创建下一次显示所需的行。这有效地将创建行的负载分散到页面的整个生命周期中。

【讨论】：