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


Showing  SharePoint 2010 anonymous list items in a HTML page


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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”&gt;
<html xmlns=””&gt;
<script type=”text/javascript” src=””></script&gt;

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

table.hovertable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: black;
table.hovertable tr {
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: black;


<script type=”text/javascript”>

$(document).ready(function () {

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

var soapEnv =
“<soapenv:Envelope xmlns:soapenv=’’&gt; \
<soapenv:Body> \
<GetListItems xmlns=’’&gt; \
<listName>AnonymousList</listName> \
<query> \
<Query> \
<Where> \
<Eq> \
<FieldRef Name=’DateValue’ /> \
<Value Type=’DateTime’><Today/></Value> \
</Eq> \
</Where> \
</Query> \
</query> \
<viewFields> \
<ViewFields><FieldRef Name=’Title’ /></ViewFields> \
</viewFields> \
<rowLimit>4</rowLimit> \
</GetListItems> \
</soapenv:Body> \

url: “http://<Server URL>/sites/JDT/_vti_bin/lists.asmx”,
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://<Server URL>/sites/JDT/Lists/AnonymousList/DispForm.aspx?ID=” + $(this).attr(“ows_ID”)); = “none”;
NodeTitle.innerHTML = “. ” + $(this).attr(“ows_Title”);

// 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);



<table id=”data” class=”hovertable”>
<th align=”left” width=”70%”>AMK Calendar</th>
<th align=”right” width=”30%”><a href=”http://<Server URL>/sites/JDT/Lists/AnonymousList/AllItems.aspx”>more-></a></th>



Reference links we used

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


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: Logo

You are commenting using your 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: