我要从SharePoint列表中引入数据,并按“客户端”过滤列表。在大多数情况下,将传输多条数据。我希望能够分离信息并设置其格式。我知道CSS是答案,但想知道这样做的最佳实践是什么。
另一个问题是,当从列表中获取联系信息时,我想引入在列表中显示的Microsoft联系人样式。有什么办法做到这一点。
谢谢。
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<!--SPServices Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!--SpServices JavaScript get items from list 'files'-->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var myQuery =
"<Query>" +
"<Where><Eq><FieldRef Name='Client'/><Value Type='Text'>South West Water H5O</Value></Eq></Where>"+
"<OrderBy>" +
"<FieldRef Name='Client' />" +
"</OrderBy>" +
"</Query>";
$().SPServices({
webURL: "https://ext.kier.group/teams/Utilities/",
operation: "GetListItems",
async: false,
listName: "UtilitiesContracts",
CAMLQuery: myQuery,
CAMLRowLimit: 100,
completefunc: function(xData, Status) {
var liHtml = "<tbody>";
$(xData.responseXML).SPFilterNode("z:row").each(function() {
liHtml = liHtml + "<tr><td>" + $(this).attr("ows_ContractDetailPage").substring(8) + "</td></tr><tr><td><img src='" + $(this).attr("ows_ClientLogo").split(', ')[1] + "' /></td></tr><tr><td>" + $(this).attr("ows_Client") + "</td></tr><tr><td>" + $(this).attr("ows_ContractDescription") + "</td></tr><tr><td>" + $(this).attr("ows_OperationalContacts") + "</td></tr><tr><td>" + $(this).attr("ows_CommercialContatcs") + "</td></tr><tr><td>" + $(this).attr("ows_ContractDetailPage").substring(8) + "</td></tr><tr><td>" + $(this).attr("ows_OperationalPage").substring(8) + "</td></tr>";
});
liHtml += "</tbody>";
$("#Contracts").append(liHtml);
}
});
$('#Contracts').DataTable({
"dom": 'Rlfrtip'
});
});
</script>
<style>
#Contracts {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<div id = "Contracts"/>
</body>