Question

更新：

这是我的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来提供自定义进度消息，但它不起作用。我怎样才能做到这一点？

/ *！ DataTables 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': []
                    };

Answer 1

假设您的表格有<table id="table">

<强> HTML

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

<强> CSS

#table{
    display:none;
}

<强> JS

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

Answer 2

[Duplicate]你可以添加一个微调器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.

显示加载消息 - Jquery数据表

2 个答案: