SPJS List as Table

Forums Requests SPJS List as Table

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  Alexander Bautz 1 year, 2 months ago.

  • 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 1 year, 2 months ago by  Alexander Bautz. Reason: Fixed typo

You must be logged in to reply to this topic.