You can use SPServices jQuery Library and CAML query to get data from a SharePoint List and display that retrieved data in Content Editor Web Part where you would write your html table code.
To learn more about SPServices refer this: SPServices CodePlex
Before writing the below code in Content Editor Web Part make sure you download jquery-1.4.2.min.js from https://code.jquery.com/jquery/ and SPServices library from http://spservices.codeplex.com/releases/view/119578 and upload both in a document library.
In below code, "GetListItems" operation will get the list items.
Example:
<html>
<head>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery.SPServices-0.7.2.min.js></SCRIPT>
</head>
<body>
<table id="myHTMLTable" border=1 width="90%" align="center">
<tr align='left'>
<td><B>ID</B></td>
<td><B>EmpName</B></td>
<td><B>JobTitle</B></td>
<td><B>Department</B></td>
</tr>
</table>
<SCRIPT type=text/javascript>
getMyListData() ;
function getMyListData()
{
var method = "GetListItems";
var webURL = $().SPServices.SPGetCurrentSite() ;
var list = "MyCustomList";
var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";
var query = "<Query><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>";
$().SPServices
({
operation: method,
async: false,
webURL: webURL,
listName: list,
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: query,
completefunc: function (xData, Status)
{
$(xData.responseXML).SPFilterNode("z:row").each(function()
{
var ID = $(this).attr("ows_ID");
var empName = $(this).attr("ows_EmpName");
var jobtitle = $(this).attr("ows_JobTitle");
var dept = $(this).attr("ows_Department");
$("#myHTMLTable").append("<tr align='middle'>" +
"<td align='left'>"+ID+"</td>" +
"<td align='left'>"+empName+"</td>" +
"<td align='left'>"+jobtitle+"</td>" +
"<td align='left'>"+dept+"</td>" +
"</tr>");
});
}
});
};
</script>
</body>
</html>
0 comments:
Post a Comment