Display sharepoint list data to dynamic html table using jQuery - sharepoint

Question

I am having a scenario where i need to get the list data to be shown in dynamic html table using jQuery to display in site with content editor webpart. Please help me out with this regards thanks in advance...

Answer 1

You can use SharePoint Client Context REST API to get the data and display it in a table. Add reference to these three scripts:
1. /_layouts/15/SP.Runtime.js
2./_layouts/15/SP.js
3. //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
And use below example:
<script type="text/javascript">
$(document).ready(function () {
fnGetData();
});
function fnGetData() {
context = new SP.ClientContext.get_current();
web = context.get_web();
var list = web.get_lists().getByTitle('Users');
var myquery = new SP.CamlQuery();
myquery.set_viewXml("<View><Query>" +
"<Where>" +
"<IsNotNull>" +
"<FieldRef Name='Title' />" +
"</IsNotNull>" +
"</Where>" +
"</Query></View>");
myquery.set_datesInUtc(false);
myItems = list.getItems(myquery);
context.load(myItems);
context.executeQueryAsync(Function.createDelegate(this, function () { fnGetDataSuccess(); }), Function.createDelegate(this, this.fnGetDataFailed));
}
function fnGetDataSuccess() {
var txtHTML = "";
var ListEnumeratorAcc = this.myItems.getEnumerator();
while (ListEnumeratorAcc.moveNext()) {
var currentItem = ListEnumeratorAcc.get_current();
txtHTML = txtHTML + "<tr>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('Title') != null) {
txtHTML = txtHTML + currentItem.get_item('Title');
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('Owner') != null) {
txtHTML = txtHTML + currentItem.get_item('Owner').get_lookupValue();
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "</tr>";
}
$("#tblCustomListData").append(txtHTML);
}
function fnGetDataFailed(sender, args) {
alert("Error Message:\n" + "URL: " + sender.get_url() + ". \n\Error Description:" + args.get_message());
}
</script>
<table id="tblCustomListData" border="1">
<thead>
<tr>
<th>Title
</th>
<th>Owner
</th>
</tr>
</thead>
</table>

Answer 2

You can either use SharepointPlus or SPServices to retrieve the list data. Then it's easy to use jQuery to insert the data into the HTML page.