如何使用JSOM使用jquery-debounce/显示SharePoint列表项 [英] How to use jquery-debounce/ to display SharePoint list items using JSOM
本文介绍了如何使用JSOM使用jquery-debounce/显示SharePoint列表项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
亲爱的
- 我已经编写了以下代码来获取SharePoint列表项并显示结果.就我而言，拥有2000多个项需要花费一些时间来显示结果.
- 我的客户想要显示最初的50个项目，然后将这些项目缓慢添加到html表中，例如惰性加载.在对此进行谷歌搜索时，我遇到了https://code.google.com/archive/p/jquery-debounce/.
谁能帮我使用Jquery Debounce做到吗?
- I had written the below code to get the SharePoint list items and display the result.As I a, having more then 2000 items it's taking time to display the result.
- And my client wants to display initial 50 items and then slowly add the items to html table such as like Lazy Loading.While googling on this I came ac-crossed https://code.google.com/archive/p/jquery-debounce/ .
Can any one please do help me how can I make it using Jquery Debounce
<body>
<div id="tableheader">
<table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;">
<thead>
<tr class="bgcolorgray">
<th>Country</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tfoot>
<tr class="bgcolorgray">
<th>Country</th>
<th>City</th>
<th>State</th>
</tr>
</tfoot>
</table>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
//alert('start script');
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
function retrieveListItems() {
//alert('enters function');
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('SuperStoreOders');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Country' /></OrderBy></Query><RowLimit>100</RowLimit></View>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var Country = null;
var City = null;
var State = null;
var count = 1;
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
count++;
var oListItem = listItemEnumerator.get_current();
//alert('title ' + oListItem.get_item('Title'));
listItemInfo += ' <strong>Title:</strong> ' + oListItem.get_item('Title') + '<br />';
Country = oListItem.get_item('Country');
City = oListItem.get_item('City');
State = oListItem.get_item('State');
var tr = $('<tr>');
var td = $('<td>');
td.append(Country);
tr.append(td);
var td = $('<td>');
td.append(City);
tr.append(td);
var td = $('<td>');
td.append(State);
tr.append(td);
$("#tblCustomListData").append(tr);
}
//$('#divHelloWorld').html(listItemInfo );
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
//<p id="divHelloWorld">Hello World!</p>
SP Assest
SP Assest
推荐答案
可以使用 jQuery datatable中的Scroller 扩展.以下示例供您参考:
Lazy loading can be achieved with Scroller extension in jQuery datatable. The example below for your reference:
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing .html
在SharePoint 2013中，建议您使用Ajax和REST API加载数据.
In SharePoint 2013, I suggest you use Ajax and REST API to load the data.
最好的问候，
丹尼斯
这篇关于如何使用JSOM使用jquery-debounce/显示SharePoint列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
