【问题标题】:Datatables: dynamic columns and huge amount of data数据表:动态列和海量数据
【发布时间】:2016-12-01 09:32:56
【问题描述】:

我正在使用 datatables 与 ajax 数据请求(json 格式)和动态列加载。这是我的实际代码:

var tableData;
var tableName='#iuprTable';

$(document).ready(function (){

    jQuery.ajax({
        type : "GET",
        url : "table/"+document.getElementById("hiddenIdCar").value,
        headers: {'Content-Type': 'application/json'},  
        beforeSend: function() {
            waitingModal.showPleaseWait();
        },
        success: function(data,status,xhr){
            //No exception occurred
            if(data.success){
                tableData = data.result;
                $.each(tableData.columns, function (k, colObj) {
                    var str = '<th data-html="true" data-toggle="tooltip" title="<b>NAME</b>:'+ colObj.parName + '<br><b>DESCRIPTION</b>:' + colObj.description + '<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.parName + '</th>';
                    $(str).appendTo(tableName+'>thead>tr');
                });
            } else {
                waitingModal.hidePleaseWait();
                notifyMessage(data.result, 'error');
            }
        },
        error: function(xhr,status,e){
            window.location.href = "/500";
        }
    }).complete(function() {
        //initialize datatable
        if ( ! $.fn.DataTable.isDataTable( tableName ) ) {
            var iuprTable = $(tableName).DataTable({
                scrollCollapse: true,
                scrollX:        true,
                scrollY:        '60vh',
                paging:         false,
                "data": tableData.data,
                "columns": tableData.columns,
                fixedColumns:   {
                    leftColumns: 4
                },
                "initComplete": function(settings){
                    //TOOLTIP cell
                    $(tableName+ ' tbody td').each( function (k, cellObj){
                        this.setAttribute( 'title', cellObj.innerText );
                        this.setAttribute( 'data-toggle', "tooltip" );
                    });
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    }); 
                    //add timeout because otherwise user could see a too fast waiting modal
                    setTimeout(function(){
                        waitingModal.hidePleaseWait();
                    }, 1000);       
                } 
            });
        }
        else {
            iuprTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load();
        }
    }); 
});

function notifyMessage(textMessage, typeMessage){
    $.bootstrapGrowl(textMessage, {
        type: typeMessage, // (null, 'info', 'error', 'success')
    });
}

由于我可能有 300 行和 300 列,因此使用这个数字会使页面变慢。我阅读了有关服务器端处理的信息,我想知道如何提高性能。 我找到了 2 个解决方案:

1)服务器端处理:只请求服务器显示的行

2)客户端:json返回所有行,但在特定时间只显示其中一些行,当用户滚动时,数据会更新(初始加载后页面更快)。

第一个解决方案比客户端处理最复杂,因为我应该更改 Web 服务。你对我有什么建议吗?我该如何实施这些解决方案?谢谢

【问题讨论】:

  • 您似乎已经知道您的选择,所以我只能说#1 将有更多的性能优势,#2 更容易实现。
  • 是的,但我不知道如何实现它们,特别是使用动态数据

标签: javascript java jquery ajax datatables


【解决方案1】:

使用服务器端分页,每页限制和偏移量为 50 等

并使用相应的引用列为您的数据库建立索引,这肯定会提高性能..

如果可能,也可以使用缓存查询,如 memcached 等

【讨论】:

  • 这是查询,我的问题是数据表
猜你喜欢
  • 2011-06-12
  • 1970-01-01
  • 2016-09-01
  • 2023-03-07
  • 1970-01-01
  • 2014-02-15
  • 1970-01-01
  • 1970-01-01
  • 2018-12-10
相关资源
最近更新 更多