Jquery 数据表加载

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

转换到datatable需要很长时间。我等了大约15分钟，但桌子还是没有装东西

---

有什么解决方法吗？

建议使用

分页

并一次只显示少数记录，请查看：。一次显示12000条记录，我不认为这真的提供了良好的用户体验。使用ajax和分页加载每个页面的数据

试试这个

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

$（文档）.ready（函数（）{
$（'#示例'）。数据表（{
“sPaginationType”：“滚动”，
“bProcessing”：true
} );
} );

造成延迟的主要原因是您试图在页面上显示大量HTML元素，这些元素对应12000条记录，唯一的解决方案是尽可能最大限度地减少这些元素

不要将记录放在html中，通过JSON将它们发送到您的页面-您可以将其作为

或通过ajax或其他方式加载

限制datatable每页的记录数。第一次启用分页

b分页：true

，第二次设置每页记录

iDisplayLength:25

使用

yourDataTable.fnAddData（data）

将数据集加载到其中

---

这很旧，但很有用…我使用下面的内容为我的长时间加载数据显示加载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>

#DV加载
{
背景：#000 url(http://mfgweb.binney.com/manuf/all_data    
/img/loader2.gif）无重复中心；
高度：100px；
宽度：100px；
位置：固定；
z指数：1000；
左：50%；
最高：50%；
利润率：-25px0-25px；
}
$（窗口）。加载（函数（）{
$（#dvLoading'）。淡出（500）；
});

加载需要时间，因为将有两次迭代-一次迭代并加载HTML中的内容，另一次用它生成数据表。而是使用以下参数直接从服务器加载datatable：

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

       "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];
                            }
                        }
                        }
                    ],

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

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

       "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];
                            }
                        }
                        }
                    ],

var apPublicationElements=['jsonParameter1'、'jsonParameter2'、'jsonParameter3'、'jsonParameter4']

并在参数内呈现这些数据，如下所示：

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

       "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);
            }
        });
    }
};

fnServerObjectToArray=函数（AEElements）{
返回函数（sSource、aoData、fnCallback）{
$.ajax({
“数据类型”：“json”，
“类型”：“职位”，
“url”：sSource，
“数据”：aoData，
“成功”：函数（json）{
var a=[]；
对于（var i=0，iLen=json.length；iTrust索引已在查询使用的键列上启用。
另外，尽管将结果附加到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" },
   ],
});

请尝试Datatable服务器端。。。
对于如此多的行是一个更好的选择。只有分页不会有太大的区别。我使用的是“sPaginationType”：“full_numbers”这只是在分页的类型上不同，而不是加载DATAHI的时间！谢谢你的回答，它对于OP可能是有用的，但是链接往往会被中断超时……请考虑复制粘贴为什么使用DATABATE ServEnter是一个好主意的主要原因（或者你也可以把它放在你自己的话里）。谢谢。对于大型数据库，这将非常有用。它不会在处理时从数据库检索所有数据。有关详细信息，请参阅