JSOM和CAML查询的延迟加载 [英] Lazy Loading for JSOM and CAML Query
本文介绍了JSOM和CAML查询的延迟加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
亲爱的
我写了下面的代码，其中检索了将近2000个项目.
而且我们正在竞标到jQuery数据表，但是问题是我们遇到了性能问题.
现在，我想实现延迟加载，首先在页面加载时我们要显示50个拳头，剩下的我们可以慢慢地将其绑定到分页.
谁能帮我怎么做.
I had written the below code ,Where it is retrieving almost 2000 items .
And we are biding to jquery Data table ,But the problem is that we are having performance issue.
Now I would like to implement lazy loading where initially on page load we would like to displaying fist 50 items,And remaining we can slowly we bind it to Pagination.
Can any one please help me how can I make it.
<body>
<div id="tableheader">
<table id="tblsuperstore" border="1" width="100%" style="overflow-x:auto;">
<thead>
<tr class="bgcolorgray">
<th>Country</th>
<th>City</th>
<th>State</th>
<th>Order Date</th>
</tr>
</thead>
<tfoot>
<tr class="bgcolorgray">
<th>Country</th>
<th>City</th>
<th>State</th>
<th>Order Date</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 language="javascript" src="https://momentjs.com/downloads/moment.min.js"></script>
<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");
sortDatePlugin();
});
// Function is to Sort the Date Column based on DD/MM/YYYY
function sortDatePlugin(){
$.fn.dataTable.moment = function (format,locale){
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift( function ( d ) {
return moment( d, format, locale, true ).isValid() ? 'moment-'+format : null;
});
// Add sorting method - use an integer for the sorting
types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
return moment( d, format, locale, true ).unix();
};
};
$.fn.dataTable.moment('DD/MM/YYYY');
}
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Supersotres');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Country' /></OrderBy></Query> </View>");
camlQuery.RowLimit = 101;
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 orderdate=null;
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');
orderdate=moment.utc(oListItem.get_item('OrderDate')).format('DD/MM/YYYY');
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);
var td = $('<td>');
td.append(orderdate);
tr.append(td);
$("#tblsuperstore").append(tr);
}
$('#tblsuperstore').DataTable({
initComplete: function () {
this.api().columns().every(function () {
var column = this;
$(column.header()).append("<br>")
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
var position = collListItem.get_listItemCollectionPosition();
if (position != null) {
query.set_listItemCollectionPosition(position);
collListItem = targetList.getItems(query);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
//<p id="divHelloWorld">Hello World!</p>
SP评估
推荐答案
可以使用DataTable Scroller实现延迟加载:
Lazy Loading can be achieve with DataTable Scroller:
使用滚动条，DataTable可以在可滚动的表中快速显示大数据集.
With the Scroller, DataTable can display Large DataSet fast in a scrollable table.
(文档).ready(function(){
(document).ready(function() {
('#example').DataTable({ serverSide:是的， 排序:假， 搜索:错误， ajax:"/path/to/script"， 滚动Y:200， 滚动条:{ loadingIndicator:正确 } })； });
('#example').DataTable( { serverSide: true, ordering: false, searching: false, ajax: '/path/to/script', scrollY: 200, scroller: { loadingIndicator: true } } ); } );
Same question raised here:
谢谢
最好的问候
这篇关于JSOM和CAML查询的延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
