Showing SharePoint 2010 anonymous list items in HTML page with HTML Dynamic Table

First of all, I would like to thank Mr. Gowri Sankar Pokuri who helped me to get this done

Requirement: 

Showing  SharePoint 2010 anonymous list items in a HTML page

Solution:

We have used the below code to get the above mentioned requirement

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title></title>
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

<style type=”text/css”>
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:black;
border-width: 1px;
border-color: black;
border-collapse: collapse;
width: 100%;

}
table.hovertable th {
background-color:#D3E2E5;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: black;
}
table.hovertable tr {
background-color:white;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: black;
color:#666666;
}
</style>

</head>
<body>

$(document).ready(function () {

$(“#tblCalendar > tbody:last”).children().remove();

var soapEnv =
” \
\
\
AnonymousList \
\
\
\
\
\
\
\
\
\
\
\
\
\
4 \
\
\
“;

$.ajax({
url: “http:///sites/JDT/_vti_bin/lists.asmx&#8221;,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processListAccessResult,
contentType: “text/xml; charset=\”utf-8\””
});
});

// Process result
function processListAccessResult(xData, status) {

$(xData.responseXML).find(“z\\:row”).each(function () {

var tbl = document.getElementById(‘data’);
var lastRow = tbl.rows.length;
// if there’s no header row in the table, then iteration = lastRow + 1
var iteration = lastRow+1;
var row = tbl.insertRow(lastRow);

// Title cell
var cellTitle = row.insertCell(0);
var NodeTitle = document.createElement(‘a’);
NodeTitle.setAttribute(‘href’,”http:///sites/JDT/Lists/AnonymousList/DispForm.aspx?ID=&#8221; + $(this).attr(“ows_ID”));
NodeTitle.style.textDecoration = “none”;
NodeTitle.innerHTML = “. ” + $(this).attr(“ows_Title”);
cellTitle.appendChild(NodeTitle);

// Date cell
var cellDate = row.insertCell(1);
var NodeDate = document.createElement(‘span’);
NodeDate.innerText=$(this).attr(“ows_DateValue”).substring(5,7) + ‘/’ + $(this).attr(“ows_DateValue”).substring(8,10) + ‘/’ + $(this).attr(“ows_DateValue”).substring(0,4);
cellDate.appendChild(NodeDate);
cellDate.setAttribute(‘align’,’right’);

});
}

AMK Calendar /sites/JDT/Lists/AnonymousList/AllItems.aspx”>more->

</body>
</html>

Reference links we used

http://www.codeproject.com/Articles/19532/Dynamic-Table-using-html-and-javascript

http://stackoverflow.com/questions/370013/jquery-delete-all-table-rows-except-first

That’s it Done 🙂 Now run and check your code in any browser. It will render the data like below

Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: