2

How can I export the contents of a list to a html table?

I know how to extract the elements of a list using CAML Queries, but how do I generate a html table containing the elements dynamically?

  • You have some libraries that can help you doing it easily, like the mentionned below SPServices. You also have SharepointPlus that I've created (aymkdn.github.io/SharepointPlus). – AymKdn Apr 8 '15 at 9:15
5

You can use SPServices jQuery Library and CAML query to get data from a SharePoint List and display that retrieved data in Content Editor Web Part where you would write your html table code.

To learn more about SPServices refer this: SPServices CodePlex

Before writing the below code in Content Editor Web Part make sure you download jquery-1.4.2.min.js from https://code.jquery.com/jquery/ and SPServices library from http://spservices.codeplex.com/releases/view/119578 and upload both in a document library.

In below code, "GetListItems" operation will get the list items.

Example:

<html>
<head>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery.SPServices-0.7.2.min.js></SCRIPT>
</head>

<body>
<table id="myHTMLTable" border=1 width="90%" align="center">
                    <tr align='left'>
                    <td><B>ID</B></td>
                    <td><B>EmpName</B></td>
                    <td><B>JobTitle</B></td>
                    <td><B>Department</B></td>
                    </tr>
</table>

<SCRIPT type=text/javascript>

getMyListData() ;

function getMyListData()
{                     
        var method = "GetListItems";                 
        var webURL =  $().SPServices.SPGetCurrentSite() ;                     
        var list = "MyCustomList";                      
        var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";
        var query = "<Query><OrderBy><FieldRef Name='ID'  Ascending='True' /></OrderBy></Query>";                       

        $().SPServices
        ({
                    operation: method,
                    async: false, 
                    webURL: webURL,
                    listName: list,
                    CAMLViewFields: "<ViewFields Properties='True' />",
                    CAMLQuery: query,                                                                                     
                    completefunc: function (xData, Status)
                     {
                         $(xData.responseXML).SPFilterNode("z:row").each(function() 
                         {
                              var ID = $(this).attr("ows_ID");
                              var empName = $(this).attr("ows_EmpName");
                              var jobtitle =  $(this).attr("ows_JobTitle");
                              var dept =  $(this).attr("ows_Department"); 

                              $("#myHTMLTable").append("<tr align='middle'>" +
                               "<td align='left'>"+ID+"</td>" +
                               "<td align='left'>"+empName+"</td>" +
                               "<td align='left'>"+jobtitle+"</td>"  +                                         
                               "<td align='left'>"+dept+"</td>" +
                               "</tr>");
                           });
                   }
       });
       };

      </script>
      </body>
      </html>
0

I wrote a tutorial on how this is done. http://michaelsoriano.com/sharepoint-bootstrap-using-spservices-and-jquery/

The plugin is also available in Github: https://github.com/michaelsoriano/sp-bootstrap-list-viewer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.