数据表服务器端处理自定义加载屏幕答案

【问题标题】：Datatable ServerSide Processing Custom Loading Screen数据表服务器端处理自定义加载屏幕
【发布时间】：2017-10-14 07:06:18
【问题描述】：

我正在使用带有服务器端渲染的数据表。默认情况下 Datatable 会显示一个小的处理消息，但是如果在默认视图中加载记录超过 50 条，则该消息将不可见。我试图为客户加载屏幕设置和溢出，但它不起作用。

这是我的代码。

var trd= $('#datableTable').DataTable({

            // Use Ajax to submit form data

            "oLanguage": {
                "sProcessing" : "<div id='overlay'><h2>Loading .. Please wait</h2></div>"
            },
           "processing": true,
            "serverSide": true,
           'pageLength': 50,
           "sortable": false,
           'lengthMenu': [[10, 20, 25, 50,100, -1], [10, 20, 25, 50,100, 'All']],
           "order": [
               [0, 'desc']
           ],
 dom: 'lBfrtip',

            ajax:({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
              //  data:fmdata,
              //  data: { data: data },
                type: "GET",
                url: '{{ url('admin/reports/get-report') }}'+goURI,

                "dataSrc": function(json) {

                    var return_data = new Array();
                    for(var i=0;i< json.data.length; i++){
                        //console.log(json[i].conversion_id);
                        return_data.push({
                            'id': json.data[i].data_id,

                        })
                    }
                    return return_data;
                }
              // 'beforeSend': function(){
             //      $("#overlay").show();
              // },
              // success: function(data, status) {
              //     $("#overlay").hide();
              // },
               //"initComplete": function(settings, json) {
              //     $('#overlay').hide();
               //    //or $('#loadingSpinner').empty();
              // }

            }),





        });

我尝试将 oLangguage 更改为语言并将 sProcessing 更改为处理。但它没有用。我没有看到任何叠加或加载效果。我哪里做错了？

【问题讨论】：

在纯服务器端实现中，datatble XHR 请求应该有很多参数，处理分页的参数是start，length。您的服务器应该处理这些并使用诸如iDisplayLength、recordsTotal 之类的键发送正确的 JSON 响应。如果我可以建议，请在他们的网站上查看服务器端数据表实现的工作演示，并检查 XHR 请求和响应在 Web 浏览器的网络监视器中的外观。然后将其与您的特定代码上的相同外观进行比较。这可能会带来更多启示。

标签： jquery datatable

【解决方案1】：

您可以为其添加语言

例子

"processing": true,
"language": {
    processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
},
"serverSide": true,

【讨论】：

为什么添加这段代码后显示这么慢？它有效，但会导致更多延迟。
我认为是因为服务器响应数据慢。