Question

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

<!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>

Answer 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

示例：

DeferRender：

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

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

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

1 个答案: