Question

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

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

任何想法如何解决？

Answer 1

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

不要在html中放置记录，通过JSON将它们发送到您的页面 - 您可以将其作为<script>或通过ajax加载，或者......
限制数据表的每页记录数。首先启用分页bPaginate: true，每页第二组记录iDisplayLength: 25
使用yourDataTable.fnAddData(data)将数据集加载到其中。

Answer 2

已在查询使用的键列上启用

信任索引。尽管将结果附加到HTML并转换为DataTable，我还是会建议以下

<ul> <% if locals.has_key? :sermon_links %> <% sermon_links.each do |link| %> <% if link[:type].present? && link[:type] == "download" %> <li> <i class="material-icons">music_note</i> <a href="<%= link[:hyperlink] %>">Download this sermon (~5mb)</a> </li> <% else %> <% if link[:type].present? && link[:type] == "passage" %> <li> <i class="material-icons">link</i> <a href="<%= link[:hyperlink] %>"><%= sermon_passage %> on Bible Gateway</a> </li> <% end %> <% end %> <% end %> <% end %> </ul>

Answer 3

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

Answer 4

试试这个..

<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>

Answer 5

这是旧的但很有用...我使用以下内容显示我的长加载数据的加载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>

Answer 6

加载需要时间，因为会有两次迭代 - 一次迭代并以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);
            }
        });
    }
};

希望这有帮助。

Answer 7

尝试使用Datatable ServerSide ... Follow this link

数据表加载

7 个答案: