如何限制 jquery 数据表中的初始 api 调用

Question

我正在使用 jquery.dataTables.js 来显示我的表数据，但在初始加载时，我想要一个空表，然后当我选择一些过滤器后，表会相应地加载数据。我也使用 iDeferLoading，但它需要加载一些初始数据，但我想要一个空表

版本 1.9.4

文件 jquery.dataTables.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js")></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.9.4/js/jquery.dataTables.js")></script>
</head>
<body>
    <script type="text/javascript">
        (function () {
    $.extend(true, window, {
        Admin: {
            LogEntryTable: LogEntryTable
        }
    });
    function LogEntryTable(options) {
        var table = $(options.tableId).dataTable({
            bServerSide: true,
            bSort: false,
            bAutoWidth: false,
            iDisplayLength: 100,
            bScrollInfinite: false,
            bScrollCollapse: true,
            sScrollY: "550px",
            sDom: "rtip",
            sAjaxSource: options.url,
            sAjaxDataProp: "model",
        });
    }
})();
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var table = new Admin.LogEntryTable(
                    {
                        tableId: "#jLogEntryTable",
                        url: 'http://localhost/abcd'
                    });
            });
        </script> 
    <div>
        <span>Log Entries</span>
    </div>
    <table class="mws-table" id="jLogEntryTable">
        <thead>
            <tr>
                <th>Date (UTC)</th>
                <th></th>
                <th>App</th>
                <th>Machine</th>
                <th>Logger</th>
                <th>Message</th>
                <th>Exception</th>
            </tr>
        </thead>
        <tbody>         
            <tr>
                <td colspan="7" class="dataTables_empty">Loading data from server</td>
            </tr>
        </tbody>
    </table>
    <div>
    <button>Search</button
    </div>
</body>
</html>

Answer 1

在第一次加载时初始化没有任何选项的 DataTable 选择过滤器后，使用

销毁旧数据表

$('#jLogEntryTable').DataTable().fnDestroy()

然后使用原始选项重新初始化数据表

编辑 JS小提琴 http://jsfiddle.net/tfyjmb4n/