Want to display a SharePoint list from another site collection? Use these 2 lines of jquery script!

I was preparing a demo where the clients demand was to display a SharePoint list (well, in this case a document library) from another site collection. They had a site collection with legal information and some of these documents had to be visible in a team site, but with the original metadata.

There are a few ways you could tackle this (iframes and page viewers for example) but with all the stuff I did with jQuery I thought this would also make an excellent case to do a bit of codework.
You could also use this to show a list from the same SharePoint site collection ofcourse

The solution
I did a quick google around (Never reinvent the wheel!!) and I found this blogpost from Christophe at PathToSharePoint.
He did both a javascript and a jQuery version so you can see that the difference between the two is huge!

What the code does is put a DIV element on the page and load the mslistviewtable from the list onto the page.
What you get after you save is the exact view on how the list looks on the page. It is an awesome, little yet effective solution to show a list with metadata on a page. Only downside is that the context menu doesn’t work (it runs on some .js scripts which are not included in the solution), that is why the code has some “removeAttr” lines.

The Code
1 go to the list you want to show. Create a new view (select the columns you want to show, filters, group by, sort,…) and give it a good name. We will use that view as the data that is shown on the other site collection.

2. Open a notepad on your pc (or your favorite javascript/jQuery editor tool) and add following code:

//the placeholder for the webpart, with a nice waiting image
<div id="ListPlaceholder"><img src="/_layouts/images/GEARS_AN.GIF" alt="" /></div>

<script type="text/javascript">
// add the link to the view of the list you want to show:
var ShowWP = "http://domain.com/yourSiteCollection/YourSite/List/View.aspx";
$("#ListPlaceholder").load(ShowWP +" #WebPartWPQ2 .ms-listviewtable",function() {
    $("#ListPlaceholder *").removeAttr("id onclick onfocus onmouseover");
});
</script>

Don’t forget to add the link to the jquery file and the link to the webpart you want to show!!!
Save it somewhere on the site (I recommend the “Site Assets library” or a created “Scripts” library)

3. Go to the place where you want to show that list. Add a Content Editor Webpart , Edit and add the link to the .js file
Click save, and you will see the waiting icon, and after some time (depending on the number of items in the original list) you will see the items just like the view!

Awesome!