Как ограничить начальный вызов API в таблицах данных JQuery - PullRequest
0 голосов
/ 18 февраля 2019

Я использую 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>

1 Ответ

0 голосов
/ 18 февраля 2019

Инициализируйте DataTable без каких-либо опций при первой загрузке. После выбора фильтров уничтожьте старый Datatable с помощью

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

, а затем повторно инициализируйте Datatable с исходными опциями

РЕДАКТИРОВАТЬ JS Fiddle http://jsfiddle.net/tfyjmb4n/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...