SharePoint AJAX/jQuery DataTable 卡住加载
SharePoint AJAX/jQuery DataTable Stuck Loading
我取得了巨大进步,我什至无法将 DataTable 附加到我在 SharePoint 上的登录页面,但现在 DataTable 发布但项目未填充。在我将提供的代码中,它是 运行 一个子站点“XDeliverables”,最终我将需要它从三个列表中提取。 X、Y 和 ZDeliverables,但我不知道如何在一个 AJAX 电话内或什至可能做到这一点。
这是我的 DataTable 的图片,它只是说正在加载...
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Program</th>
<th>Deliverable</th>
<th>To</th>
<th>Date</th>
<th>Approved</th>
<th>Notes</th>
</tr>
</thead>
</table>
<script>
// UMD
(function(factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], function ($) {
return factory( $, window, document );
});
}
else if (typeof exports === 'object') {
// CommonJS
module.exports = function (root, $) {
if (!root) {
root = window;
}
if (!$) {
$ = typeof window !== 'undefined'
? require('jquery')
: require('jquery')( root );
}
return factory($, root, root.document);
};
} else {
// Browser
factory(jQuery, window, document);
}
}
(function($, window, document) {
$.fn.dataTable.render.moment = function (from, to, locale) {
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'YYYY-MM-DD';
} else if (arguments.length === 2) {
locale = 'en';
}
return function (d, type, row) {
var m = window.moment(d, from, locale, true);
// Order and type get a number value from Moment, everything else
// sees the rendered value
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
};
};
}));
</script>
<script>
$(document).ready(function() {
$('#myTable').DataTable({
'ajax': {
'url': "_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
'headers': { 'Accept': 'application/json;odata=nometadata' },
'dataSrc': function(data) {
return data.value.map(function(item) {
return [
item.Program,
item.Deliverable,
item.To,
new dueDate(item.Date),
item.Approved,
item.Notes
];
console.log(item);
});
}
},
columnDefs: [{
targets: 4,
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
}]
});
});
</script>
这修复了我的错误,但现在我无法弄清楚如何使用相同类型的列表调用另外两个 URL?有人知道怎么做吗?
$(document).ready(function() {
$('#myTable').DataTable({
'ajax': {
'url': "_api/web/lists/getbytitle('XDeliverables')/items?$select=Program, Deliverable, To, Date, Approved, Notes",
'headers': { 'Accept': 'application/json;odata=nometadata' },
'dataSrc': function(data) {
return data.value.map(function(item) {
return [
item.Program,
item.Deliverable,
item.To,
item.Date,
item.Approved,
item.Notes
];
});
}
},
columnDefs: [{
targets: 4,
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
}]
});
});
</script>
我取得了巨大进步,我什至无法将 DataTable 附加到我在 SharePoint 上的登录页面,但现在 DataTable 发布但项目未填充。在我将提供的代码中,它是 运行 一个子站点“XDeliverables”,最终我将需要它从三个列表中提取。 X、Y 和 ZDeliverables,但我不知道如何在一个 AJAX 电话内或什至可能做到这一点。
这是我的 DataTable 的图片,它只是说正在加载...
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Program</th>
<th>Deliverable</th>
<th>To</th>
<th>Date</th>
<th>Approved</th>
<th>Notes</th>
</tr>
</thead>
</table>
<script>
// UMD
(function(factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], function ($) {
return factory( $, window, document );
});
}
else if (typeof exports === 'object') {
// CommonJS
module.exports = function (root, $) {
if (!root) {
root = window;
}
if (!$) {
$ = typeof window !== 'undefined'
? require('jquery')
: require('jquery')( root );
}
return factory($, root, root.document);
};
} else {
// Browser
factory(jQuery, window, document);
}
}
(function($, window, document) {
$.fn.dataTable.render.moment = function (from, to, locale) {
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'YYYY-MM-DD';
} else if (arguments.length === 2) {
locale = 'en';
}
return function (d, type, row) {
var m = window.moment(d, from, locale, true);
// Order and type get a number value from Moment, everything else
// sees the rendered value
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
};
};
}));
</script>
<script>
$(document).ready(function() {
$('#myTable').DataTable({
'ajax': {
'url': "_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable",
'headers': { 'Accept': 'application/json;odata=nometadata' },
'dataSrc': function(data) {
return data.value.map(function(item) {
return [
item.Program,
item.Deliverable,
item.To,
new dueDate(item.Date),
item.Approved,
item.Notes
];
console.log(item);
});
}
},
columnDefs: [{
targets: 4,
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
}]
});
});
</script>
这修复了我的错误,但现在我无法弄清楚如何使用相同类型的列表调用另外两个 URL?有人知道怎么做吗?
$(document).ready(function() {
$('#myTable').DataTable({
'ajax': {
'url': "_api/web/lists/getbytitle('XDeliverables')/items?$select=Program, Deliverable, To, Date, Approved, Notes",
'headers': { 'Accept': 'application/json;odata=nometadata' },
'dataSrc': function(data) {
return data.value.map(function(item) {
return [
item.Program,
item.Deliverable,
item.To,
item.Date,
item.Approved,
item.Notes
];
});
}
},
columnDefs: [{
targets: 4,
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
}]
});
});
</script>