Search code examples
javascriptjquerysharepointspservices

Building HTML Table from SharePoint List with SPServices


I'm trying to build a HTML table with data from a SharePoint List using SPServices. I've looked through the site and my code seems to match up with working examples, but I'm getting no results on my site (I just see the text table headings), and no errors in the console.

Below is my code, thanks.

<script type="text/javascript" src="URL/SiteAssets/Libraries/jquery-min.js"></script>
<script type="text/javascript" src="URL/SiteAssets/Libraries/SPServices-min.js.js"></script>
<script type="text/javascript" src="URL/SiteAssets/Libraries/underscore.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "{REMOVED}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Project_x0020_ID' /><FieldRef Name='Title'/><FieldRef Name='Summary_x0020_Description'/><FieldRef Name='Technology_x0020_Stream'/></ViewFields>",
    completefunc: function (xData, Status) {
        $(xData.responseXML).find("[nodeName='z:row']").each(function() {
        var projectid = $(this).attr("ows_Project_x0020_ID");
        var title = $(this).attr("ows_Title");
        var sumdesc = $(this).attr("ows_Summary_x0020_Description");
        var techstream = $(this).attr("ows_Technology_x0020_Stream");
        var tableBody = document.getElementByID("tasksTB");
        tableBody.innerHTML = "<tr><td>" + projectid + "</td><td>" + title + "</td><td>" + sumdesc + "</td><td>" + techstream + "</td></tr>";
        });
    }
  });
});
</script>
<html>
<body>
<table>

   <thead>
       <tr>
           <th>Project ID</th>
           <th>Title</th>
           <th>Summary Description</th>
           <th>Technology Stream</th>
       </tr>
   </thead>

   <tbody id="tasksTB">
   </tbody>
</table>
</body>
</html>

Solution

  • Change your HTML code as below. Be sure i removed tbody and added id to the whole table

    <table id="task">
    <thead>
       <tr>
           <th>Project ID</th>
           <th>Title</th>
           <th>Summary Description</th>
           <th>Technology Stream</th>
       </tr>
     </thead>
    </table>
    

    and in complete function do something like this. In below code in first line I empty tbody of the table. Then i make variable with datarows

    completefunc: function (xData, Status) {
    $("#task > tbody").html(""); 
    var datarows = "<tbody>";
    $(xData.responseXML).find("[nodeName='z:row']").each(function() {
        var projectid = $(this).attr("ows_Project_x0020_ID");
        var title = $(this).attr("ows_Title");
        var sumdesc = $(this).attr("ows_Summary_x0020_Description");
        var techstream = $(this).attr("ows_Technology_x0020_Stream");
        datarows += "<tr><td>" + projectid + "</td><td>" + title + "</td><td>" + sumdesc + "</td><td>" + techstream + "</td></tr>";
        });
      datarows += "</tbody>";
      $("#task").append(datarows);
    }
    

    Hope this will help you.