显示加载消息 - Jquery Datatables答案

【问题标题】：Displaying loading message - Jquery Datatables显示加载消息 - Jquery Datatables
【发布时间】：2015-01-13 14:18:33
【问题描述】：

更新：

这是我的 html 的样子，我有为数据表创建的 angularjs 指令

<table id="vendor" ng-gridview="employee" resource="$employee">
  <thead>
    <tr>
      <th data-name="EmployeeId" data-width="50">Id</th>
      <th data-name="Name" data-width="75">Name</th>
      <th data-name="PhoneNumber" data-width="160">Phone Number</th>
      <th data-name="$options" data-width="160">Options</th>
    </tr>
  </thead>
</table>

加载记录时如何在 DataTables 中显示处理消息？我有 20K 条记录，加载大约需要 10-15 秒。我正在使用 MVC 5 操作方法传递数据

我尝试使用 bProcessing 作为 true 并使用 sProcessing 来提供自定义进度消息，但它不起作用。我怎样才能做到这一点？

/*!数据表 1.10.2 */

这是我的 JQuery 数据表设置：

 settings = {
                        'data': scope[attrs.ngModel] || {},
                        'oLanguage': {
                            'sSearch': 'Search: _INPUT_',
                            'sLengthMenu': attrs.title || 'Display _MENU_ items.',
                            'sInfo': 'Showing _START_ to _END_ of _TOTAL_ items.',
                            "bProcessing": true,
                            "bServerSide": true,
                            "bDeferRender": true,

                            'sLoadingRecords': 'Please wait - loading...',
                            'sProcessing': '<div class="grid-loading"><img src="images/spinner.gif" width="32" align="middle" /> Loading</div>',
                            'sInfoEmpty': 'No entries to show'
                        },
                        'iDisplayLength': 10,
                        "lengthMenu": [5, 10, 20, 30, 50, 100],
                        'columnDefs': []
                    };

【问题讨论】：

你真的应该考虑使用一些分页
是的，我正在使用分页，但仍然需要很长时间
啊抱歉，我以为你一次在表中显示 20k 条记录，我的错。很抱歉，无法帮助您解决您的问题
您的假设是正确的，它一次在表格中显示 20k 条记录，但我确实有分页并且仍然需要 10-15 秒来加载页面

标签： jquery datatable

【解决方案1】：

假设你的表有<table id="table">

HTML

<div id="message">Loading, please wait</div>
<table id="table></table>

CSS

#table{
    display:none;
}

$('#table').on('init.dt', function () {
    console.log('Table initialisation complete: ' + new Date().getTime());
    $('#table').show();
    $('#message').hide();
})
        .dataTable(settings);

【讨论】：

我已经更新了我的问题，如果您想查看我的 angularjs 指令，我可以粘贴它
只需将我示例中的 js 更改为使用 id vendor 其余部分应该相同。
发生了什么
你有机会看到吗？
@AbuHamzah 我不了解 Angular，所以我认为我不会有太大帮助。您的任务是为不同的 javascript 函数分配不同的击键，还是超出此范围？

【解决方案2】：

[重复] 您可以将微调器 gif（在此处查找：http://www.ajaxload.info/）作为 div 添加到您的表格应位于的位置，然后在表格加载时使用 initComplete 将其清除。

类似：

<img id="loading" src="/myspinner.gif">//put this right below `<div class="col-md-12">`

然后像这样调用你的表：

var table = $('#tableId').DataTable( {

            initComplete: function(settings, json) {
                $("#tableId").removeClass("hide");
                $("#tableId").show();
                $("#loading").hide();
            },
     });

Check it here.

【讨论】：