【问题标题】:Server side processing Jquery Datatables Sharepoint服务器端处理 Jquery Datatables Sharepoint
【发布时间】:2021-05-21 00:17:59
【问题描述】:

我有一个 >50000 SharePoint Online 文档库列表正在使用下面的工作代码呈现。页面加载时间接近 10-15 秒。

我尝试实现服务器端处理以减少页面加载时间,但没有任何区别:

"processing": true, "serverSide": true,

<!DOCTYPE html>    
<html">    
<head>    
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/jquery-3.5.1.js"></script>        
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/jquery.dataTables.min.js"></script>     
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/moment.min.js"></script>     
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/datetime-moment.js"></script>      
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/dataTables.buttons.min.js"></script>       
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/buttons.flash.min.js"></script>            
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/jszip.min.js"></script>        
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/pdfmake.min.js"></script>      
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/vfs_fonts.js"></script>            
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/buttons.html5.min.js"></script>        
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/buttons.print.min.js"></script>        
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/dataTables.select.min.js"></script>    
    <script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/dataTables.searchBuilder.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/jquery.dataTables.min.css">    
    <link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/dataTables.jqueryui.min.css">      
    <link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/buttons.dataTables.min.css">  
    <link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/select.dataTables.min.css">  
    <link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/searchBuilder.dataTables.min.css">  

<script>
$(document).ready(function() {loadItems();});    

function loadItems() {    
    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;    
    var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('LIST_NAME')/items?$top=200000&$select=Created,ATA,EncodedAbsUrl";    
    $.ajax({    
        url: oDataUrl,    
        type: "GET",    
        dataType: "json",    
        headers: {    
            "accept": "application/json;odata=verbose"    
        },    
        success: mySuccHandler,    
        error: myErrHandler    
    });    
}    
  
function mySuccHandler(data) {    
    try {    
          
        $('#table_id').DataTable({    
            "pageLength": 100,
            "dom": 'Bfrtip',
            "buttons": [ {extend: 'searchBuilder', config: {columns: [0,1,2,3,4,5,6,7],},}, 'copy', 'csv', 'pdf', {extend: 'print',exportOptions: {columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]}} ],
            "aaData": data.d.results,
            "aaSorting": [[0, "desc"]],
            "aoColumns": [  
            {    
                "mData": "Created"
            },             
            {    
                "mData": "ATA"    
            },             
            {    
                "mData": "EncodedAbsUrl",
                "mRender": function ( data, type, full )
                {return '<a href="'+data+'" target="_blank">View</a>';}             
            }
            ]    
        });    
    } catch (e) {    
        alert(e.message);    
    }    
}    
    
function myErrHandler(data, errMessage) {    
    alert("Error: " + errMessage);    
}   
</script>

</head>    
<body>    
   <div> 
    <table id="table_id" class="display" cellspacing="0" width="100%">    
        <thead>    
            <tr>    
                <th>Uploaded</th>    
                <th>ATA</th>
                <th></th>           
            </tr>    
        </thead>    
    </table>    
    </div>    
</body>    
</html>   

【问题讨论】:

    标签: javascript jquery datatables sharepoint-online


    【解决方案1】:

    您必须设置后端代码,因为服务器端意味着您必须在客户端的每个操作上处理服务器上的 Datatable 行(更改页面、过滤器、搜索...)

    更多信息请点击这里:https://datatables.net/examples/data_sources/server_side

    【讨论】:

    • 同意,关于如何使用 sharepoint 执行此操作的任何指针?
    • 将词缓存添加到您的查询/搜索答案中。有许多不同种类的缓存和技巧可以使它们最有效。
    • 嗨,Nasandrata,由于此数据是动态的,并且来自具有超过 50k 条目的 SPO REST api xml 提要,我猜缓存不是最合适的?
    • 您不必同时加载 50k 个条目,您必须对数据表进行分页并仅加载 10 个条目,这是服务器端的手段,当您更改页面或进行过滤或搜索时,您根据您设置的条件获取另外 10 个条目。看看我之前给出的链接,然后单击服务器端脚本,您必须将 PHP 代码编码为共享点代码。
    猜你喜欢
    • 2011-01-13
    • 1970-01-01
    • 1970-01-01
    • 2011-04-01
    • 2018-11-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多