Below code copy and past into script Editor webpart and check
<script type="text/javascript" src="../SiteAssets/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices-0.7.2.min.js"></scrip>
<script type="text/javascript">
//this is where the script starts after the page is loaded
$(document).ready(function() {
GetSpeakers();
});
function GetSpeakers()
{
//The Web Service method we are calling, to read list items we use 'GetListItems'
var method = "GetListItems";
//The display name of the list we are reading data from
var list = "Employee";
//We need to identify the fields we want to return. In this instance, we want the Name (Title),
//Blog, and Picture fields from the Speakers list. You can see here that we are using the internal field names.
//The display name field for the Speaker's name is "Name" and the internal name is "Title". You can see it can
//quickly become confusing if your Display Names are completely differnt from your internal names.
//For whatever list you want to read from, be sure to specify the fields you want returned.
var fieldsToRead = "<ViewFields>" +
"<FieldRef Name='Title' />" +
"<FieldRef Name='Name' />" +
"<FieldRef Name='Description' />" +
"<FieldRef Name='DOB' />" +
"<FieldRef Name='isActive' />" +
"</ViewFields>";
//this is that wonderful CAML query I was talking about earlier. This simple query returns
//ALL rows by saying "give me all the rows where the ID field is not equal to 0". I then
//tell the query to sort the rows by the Title field. FYI: a blank query ALSO returns
//all rows, but I like to use the below query because it helps me know that I MEANT to
//return all the rows and didn't just forget to write a query :)
var query = "<Query>" +
"<Where>" +
"<Neq>" +
"<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
"</Neq>" +
"</Where>" +
"<OrderBy>" +
"<FieldRef Name='Title'/>" +
"</OrderBy>" +
"</Query>";
//Here is our SPServices Call where we pass in the variables that we set above
$().SPServices({
operation: method,
async: false, //if you set this to true, you may get faster performance, but your order may not be accurate.
listName: list,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
//this basically means "do the following code when the call is complete"
completefunc: function (xData, Status) {
//this code iterates through every row of data returned from the web service call
$(xData.responseXML).SPFilterNode("z:row").each(function() {
//here is where we are reading the field values and putting them in JavaScript variables
//notice that when we read a field value there is an "ows_" in front of the internal field name.
//this is a SharePoint Web Service quirk that you need to keep in mind.
//so to read a field it is ALWAYS $(this).attr("ows_
//get the title field (Speaker's Name)
var Title = ($(this).attr("ows_Title"));
//get the blog url, SharePoint stores a url in the form of
//We only want the
//which will turn
//is the url. Catch all that? if you didn't this is another reason you should be
//a developer if you are writing JavaScript and jQuery :)
var Name = ($(this).attr("ows_Name"));
//same thing as the blog, a picture is stored as
var Description = ($(this).attr("ows_Description"));
var DOB = ($(this).attr("ows_DOB"));
var isActive = ($(this).attr("ows_isActive"));
if(isActive)
isActive="Yes";
else
isActive="No";
// alert("Title: "+Title+"Name: "+Name+"Description:"+Description+"DOB:"+DOB+"is Active"+isActive);
//call a function to add the data from the row to a table on the screen
var liHtml = "
Description: " + Description+"
DOB: "+DOB+"
Is active: "+isActive+"
$("#ulTasks").append(liHtml);
});
}
});
}
// very simple function that adds a row to a table with the id of "speakerTable"
// for every row of data returned from our SPServices call.
// Each row of the table will display the picture of the speaker and
// below the speaker's picture will be their name that is a hyperlink
// to the speaker's blog.
</script>
<ul id="ulTasks"/>
