SPJS List as Table

Forums Requests SPJS List as Table

Tagged: 

Viewing 4 reply threads
  • Author
    Posts
    • #12661
      Brett
      Participant

      Hi Alexander,

      Do you have something using SPJS-Utility to display a large list, 1000+ items in html table format?
      I would like to specify my own id= for the table and also specify which columns to be displayed.
      I’ve tried dvwp’s but when it comes to displaying all items, my SPD freezes or crashes and when I do save it, the page-load times are 20+ seconds.

      I’m using SharePoint 2010 and have custom scripts (Datatables) that convert the columns into live drop-down filters.

      Many thanks,

      Brett

    • #12727
      Alexander Bautz
      Keymaster

      Hi,
      You can use something like this to get a very simple table with all documents in a library named “LargeDocLib”:

      function buildCustomTable(){
      	var query = "<Where><IsNotNull><FieldRef Name='ID' /></IsNotNull></Where><OrderBy><FieldRef Name='ID' /></OrderBy>";
      	var viewFields = ["FileLeafRef","Author","ID"];
      	var res = spjs_QueryItems({"listName":"LargeDocLib","query":query,"viewFields":viewFields,"scope":"RecursiveAll"});
      	var b = [];
      	//console.log(res.count);
      	$.each(res.items,function(i,item){
      		b.push("<tr>")
      		$.each(viewFields,function(j,fin){
      			b.push("<td valign='top'>"+item[fin]+"</td>")
      		});
      		b.push("</tr>")
      	});
      	// change "body" to a placeholder where you want the table to show
      	$("body").prepend("<table id='yourCustomTableID'>"+b.join("")+"</table>")
      }
      buildCustomTable();

      You can change the list name (display name or GUID), and the viewFields to match your requirements.

      Hope you can make use of this.

      Alexander

    • #12735
      Brett
      Participant

      Thanks for the code sample Alexander.
      I’ll give this a try with your SPJS Utility and JQuery scripts added.
      Much appreciated for your time.

    • #12793
      Brett
      Participant

      HI Alexander,
      I tried the script in a cewp and it works great except:

      1: It works with body and html tags only and shows as full screen(No menus or ribbon) with no scroll-bars.
      2: When I change the “body” tag to anything else, eg: if I have

      <span id=tablecode>

      , with the tag as

      "#tablecode"

      , nothing is shown and no JS errors in console.
      I’ve tried other classes and id’s with no results.

      A) If I can get the table to be displayed in a cewp on a page, that would be awesome.
      B) If you have time, is there a way to dynamically display the column headers? otherwise I can add them manually, if this adds more coding?
      I’ll send some beers once I can get this working.

      Many thanks for your time and efforts.

    • #12833
      Alexander Bautz
      Keymaster

      Hi,
      Here is a more complete example – put it in a CEWP in a page:

      <style type="text/css">
      .customTableRow:nth-child(odd) {
          background: #ccc;
          cursor:defalult;
      }
      .customTableRow th{
          font-size:16px;
          padding:3px;
      }
      .customTableRow td{
          font-size:13px;
          padding:3px;
      }
      </style>
      
      <input type="button" value="Fill table" onclick="buildCustomTable()" />
      <div id="putTableHere" style="height:1000px;overflow:auto;border:1px silver solid;"></div>
      <script type="text/javascript" src="/SPJS/DFFS/plugins/jquery.js"></script>
      <script type="text/javascript" src="/SPJS/DFFS/plugins/SPJS-utility.js"></script>
      <script type="text/javascript">
      function buildCustomTable(){
      	var query = "<Where><IsNotNull><FieldRef Name='ID' /></IsNotNull></Where><OrderBy><FieldRef Name='ID' /></OrderBy>";
      	var viewFields = ["FileLeafRef","Author","ID"];
      	var res = spjs_QueryItems({"listName":"LargeDocLib","query":query,"viewFields":viewFields,"scope":"RecursiveAll"});
      	var b = [];
          var val;
          // Add headers
          b.push("<tr class='customTableRow'>");
          b.push("<th valign='top'>File name</th>");
          b.push("<th valign='top'>Author</th>");
          b.push("<th valign='top'>ID</th>");
          b.push("</tr>");
          // Fill table with all list items
      	$.each(res.items,function(i,item){
      		b.push("<tr class='customTableRow'>");
      		$.each(viewFields,function(j,fin){
                  val = item[fin] !== null ? item[fin] : "";
                  // You might want to modify the items[fin] to for example strip away the ";#" part of a people picker like this:
                  // val = val.split(";#").length > 1 ? val.split(";#")[1] : val;
      			b.push("<td valign='top'>"+val+"</td>");
      		});
      		b.push("</tr>")
      	});
      	$("#putTableHere").prepend("<table id='yourCustomTableID'>"+b.join("")+"</table>")
      }
      </script>

      You must change the headers to match your fields.

      Let me know if you have other question.

      Alexander

      • This reply was modified 7 years, 7 months ago by Alexander Bautz. Reason: Fixed typo
Viewing 4 reply threads
  • You must be logged in to reply to this topic.