如何解决如何将Ajax数据发布到您的服务器以更新SharePoint列表数据
我已经在这个DataTable上工作了一段时间了，除了最后一件事之外，它具有我需要的所有功能。现在，我的表从AJAX“ GET”请求中读取SharePoint列表数据，并根据父/子行对其进行填充和组织。
我需要我的DataTable做的最后一个功能是创建一个按钮，该按钮可让您向表中添加新行，然后根据“程序与可交付项”将其自动分类为正确的子行。类别。完成之后，我想让DataTable将数据发送到相应的SharePoint列表，这是否可以通过AJAX“ POST”请求完成？
我该如何实现这一目标？此刻我完全迷路了。
这是我的代码：
function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
//create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
var urls = ["url1","url2","url3","url4","url5","url6","url7","url8"];
for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
$.ajax({
url: urls[i],'headers': { 'Accept': 'application/json;odata=nometadata' },success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
data = data;
var table = $('#myTable').DataTable();
table.rows.add( data.value ).draw();
}
});
}
}
$(document).ready(function() {
var collapsedGroups = {};
var top = '';
var parent = '';
var table = $('#myTable').DataTable( {
"columns": [
{ "data": "Program",visible: false },{ "data": "Deliverable",{ "data": "To" },{ "data": "Date" },{ "data": "Approved" },{ "data": "Notes" }
],dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",buttons: [{
extend: 'collection',className: "btn-dark",text: 'Export',buttons:
[{
extend: "excel",className: "btn-dark"
},{
extend: "pdf",{
extend: "print",className: "btn-dark"
},],}],order: [[0,'asc'],[1,'asc'] ],rowGroup: {
dataSrc: [
'Program','Deliverable'
],startRender: function (rows,group,level){
var all;
if (level === 0) {
top = group;
all = group;
} else if (level === 1) {
parent = top + group;
all = parent;
// if parent collapsed,nothing to do
if (!collapsedGroups[top]) {
return;
}
} else {
// if parent collapsed,nothing to do
if (!collapsedGroups[parent]) {
return;
}
all = top + parent + group;
}
var collapsed = !collapsedGroups[all];
console.log('collapsed:',collapsed);
rows.nodes().each(function(r) {
r.style.display = collapsed ? 'none' : '';
});
//Add category name to the <tr>.
return $('<tr/>')
.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name',all)
.toggleClass('collapsed',collapsed);
}
}
} );
loadData();
$('#myTable tbody').on('click','tr.dtrg-start',function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
var table = $('#example').DataTable( {
var urls = ["url1",...];
for (i=0; i < urls.length; i++) {
ajax: {
url: urls[i],method: "POST",data: function( ) {
return dataToSend;
}
},}
} );
} );
} );.btn-dark {
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
div.container {
min-width: 980px;
margin: 0 auto;
}
.header {
padding: 10px;
text-align: center;
}
body {
font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.dt-button-collection {
position: static;
}<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
<link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
<link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
<h1><strong>Deliverables</strong></h1>
<p><strong>Click the Program/Deliverable names to Collapse/Expand the rows</strong></p>
</div>
<div class ="container">
<table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>Program</th>
<th>Deliverable</th>
<th>To</th>
<th>Date</th>
<th>Approved</th>
<th>Notes</th>
</tr>
</thead>
<tfoot class="thead-dark">
<tr>
<th>Program</th>
<th>Deliverable</th>
<th>To</th>
<th>Date</th>
<th>Approved</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
</div>我认为这应该是将数据从DataTable发送到SharePoint列表的正确功能，但是由于我无法弄清楚如何向数据表中添加新行/数据，因此它目前无用。
function sendData() {
var urls = ["url1","url8"];
var data1 = {
Program: 'Please provide the Program name here',Deliverable: 'Please provide the type of deliverable here',To: 'Please provide the recipients email here',Date: 'Please provide the submission date here',Approved: 'Please provide where or not the deliverable has been approved here',Notes: Please provide notes about the deliverable here'
};
$.ajax({
for (i=0; i < urls.length; i++) {
$.ajax({
url: urls[i],data: JSON.stringify(data),headers: { "Accept": "application/json; odata=verbose","X-RequestDigest": $("#__REQUESTDIGEST").val()
},success: function (data) {
alert('Item added successfully');
},error: function (error) {
alert("Error: "+ JSON.stringify(error));
}
});
}
});
}
解决方法
您可以使用标准的jQuery ajax data选项从DataTales ajax请求中将数据发布到服务器-但要稍作修改以符合DataTables的使用方式。
用于将动态生成的数据发送到服务器的DataTables语法为documented here。方法是这样的：
ajax: {
type: "POST",// or "GET"
url: "http://whatever.com/endpoint",data: function () {
return dataToSend; // dataToSend is just my JS variable
}
}
请注意，这里的data选项是函数，它返回要发送到服务器的数据。
可以根据您的特定需求和上下文，以各种方式准备变量dataToSend的数据。
例如，它可以是标准HTML <form>的内容-所有表单输入字段的值。在这种情况下，您可能希望将表单的数据转换为JSON（例如，使用jQuery的$.serialize()函数或$.serializeArray()函数。
如果您的JavaScript代码中已经有一个JSON对象，则可以通过设置ajax contentType并对JSON进行字符串化来发送它-像这样：
ajax: {
type: "POST",data: function () {
contentType: "application/json",return JSON.stringify(dataToSend);
}
}
（否则，默认内容类型为application/x-www-form-urlencoded。）
这里是一个示例，其中我们在一个页面中有一个简单的表格与DataTable：
<form id ="formOne">
<input id="fieldOne" type="text" name="fieldOne"></input>
<input id="fieldTwo" type="text" name="fieldTwo"></input>
<input type="submit" value="Submit">
</form>
该表单具有两个输入字段和一个提交按钮。
DataTable ajax部分如下：
var table = $('#example').DataTable( {
ajax: {
url: "http://whatever.com/endpoint",method: "POST",data: function( ) {
return dataToSend;
}
},// other items not shown
} );
页面加载后，表格照常显示。
如果用户填写表格并单击“提交”按钮，则此操作将被以下代码拦截：
var dataToSend;
$( "#formOne" ).on( "submit",function( event ) {
event.preventDefault(); // stops the standard form submission from happening
dataToSend = $( "#formOne" ).serializeArray();
console.log( dataToSend );
table.ajax.reload(); // calls the DataTables ajax request again
});
当然，由服务器来处理此请求中的结果数据。因为我的示例是一个POST请求，所以这将涉及服务器端代码访问表单参数数据。如何执行此操作取决于您使用的服务器端框架。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
