SPJS List as Table

[Brett]

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

[Alexander Bautz]

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

[Brett]

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.

[Brett]

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.

[Alexander Bautz]

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 8 years, 3 months ago by Alexander Bautz. Reason: Fixed typo

[Author]

Posts