1

我正在使用 jquery 数据表来显示记录。我从数据库中获取大约 12000 条记录并将其附加到 html 表，然后将其转换为 jQuery 数据表。

转换为数据表需要很长时间。我等了大约 15 分钟，但桌子仍然没有加载。

任何想法如何解决它？

4

7 回答 7

1

滞后的主要原因是您尝试在页面上显示的大量 HTML 元素对应于 12000 条记录，唯一的解决方案是尽可能减少它。

  1. 不要将记录放在 html 中，通过 JSON 将它们发送到您的页面 - 您可以将其加载为 a<script>或通过 ajax 或其他...

  2. 限制数据表的每页记录。第一次启用分页bPaginate: true，第二次设置每页记录iDisplayLength: 25

  3. 用于yourDataTable.fnAddData(data)将数据集加载到其中。

于 2014-05-08T10:19:04.467 回答
1

已在查询使用的键列上启用了信任索引。此外，尽管将结果附加到 HTML 并转换为 DataTable，我还是建议以下

$('#table_id').DataTable({
    ajax: {
      url: url_to_data,
      dataSrc: "",                  
      contentType: "application/json",
      type: "POST",
      data : function(d) {
          return JSON.stringify({ param1: param1_val, param2: param2_val });
      },
   },
   pageLength: 30,
   processing: true,
   serverSide: true, //server side processing for larger datasets
   columns: [
      { sTitle: "col_1", data: "col_1_field" },
      { sTitle: "col_2", data: "col_2_field" },
   ],
});
于 2016-09-09T02:17:56.953 回答
0

建议pagination一次只使用和显示几条记录，看看：http ://datatables.net/plug-ins/pagination 。一次显示 12000 条记录，我不认为这真的提供了良好的用户体验。使用 ajax 和分页为每个页面加载数据。

于 2013-07-17T11:41:06.013 回答
0

尝试这个..

<script type="text/javascript" src="jquery.dataTables.js"></script>
    <script type="text/javascript" src="dataTables.scrollingPagination.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#example').dataTable( {
                "sPaginationType": "scrolling",
                 "bProcessing": true

            } );
        } );
    </script>
于 2013-07-17T11:46:18.697 回答
0

这很旧但很有用......我使用以下内容为我的长时间加载数据显示加载 gif。将此与分页结合使用。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<style>
 #dvLoading
 {
  background:#000 url(http://mfgweb.binney.com/manuf/all_data    
 /img/loader2.gif) no-repeat center center;
   height: 100px;
 width: 100px;
 position: fixed;
 z-index: 1000;
 left: 50%;
 top: 50%;
 margin: -25px 0 0 -25px;
 }

</style>

<script>
$(window).load(function(){
$('#dvLoading').fadeOut(500);
});
</script>
<div id="dvLoading"></div>
于 2015-10-15T14:26:22.980 回答
0

加载需要时间，因为会有两次迭代——一次迭代并加载 HTML 中的内容，另一次用它制作数据表。而是使用如下参数直接从服务器加载数据表：

       "sAjaxSource": '#yourServerCallHereWhichReturnsJSON#',
       "fnServerData": fnServerObjectToArray(aPublicationElements),

这里的“aPublicationElements”是一个包含 JSON 元素的变量，如下所示：

var aPublicationElements = ['jsonParameter1','jsonParameter2','jsonParameter3','jsonParameter4'];

并在参数中渲染这些数据，如下所示：

       "aoColumns": [
                        {"sTitle":"Title1",
                            "render": function(data, type, oObj) {
                                return oObj[0];
                            }   
                        },
                        {"sTitle":"Title2",
                            "render": function(data, type, oObj) {
                                return oObj[1];
                            }   
                        },
                        {"sTitle":"Title3",
                            "render": function(data, type, oObj) {
                                return oObj[2];
                            }   
                        },
                        {"sTitle":"Title4",
                            "render": function(data, type, oObj){
                                return oObj[3];
                            }
                        }
                        }
                    ],

函数“fnServerObjectToArray”类似于将服务器对象转换为数组：

fnServerObjectToArray = function ( aElements ){
    return function ( sSource, aoData, fnCallback ) {
        $.ajax({
            "dataType": 'json',
            "type": "POST",
            "url": sSource,
            "data": aoData,
            "success": function (json) {
                var a = [];
                for ( var i=0, iLen=json.length ; i<iLen ; i++ ) {
                    var inner = [];
                    for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {
                        inner.push( json[i][aElements[j]] );
                    }
                    a.push( inner );
                }
                json.aaData = a;
                fnCallback(json);
            }
        });
    }
};

希望这可以帮助。

于 2016-06-20T06:41:26.177 回答
0

试试 Datatable ServerSide... 按照这个链接

于 2016-10-12T14:00:59.033 回答