How to Display Item Count in Listview using SP Client Side Scripting

INTRODUCTION

We have a request from our client to display in the listview page the number of items on a Sharepoint list. They wanted us to do this via only the Content Editor Webpart and SP Client side scripting.

I will detail out on this post how to accomplish this task. Special thanks to our onshore counterpart who guided us on doing this.

SCOPE

This post would assume that there is already an existing custom list in place. I will not detail out how to create a site and custom list in sharepoint.

IMPLEMENTATION

1.       Make sure that you have at least a designer permission before you proceed.

2.       Navigate to your list http://< your site collection>/Lists/<List Name>/

3.       On the Site Actions link, click on the ‘Edit Page’ link.

4.       On the Main Content section, Click on the ‘Add a Web Part’ link. On the Categories section, click on the Media and Content and select Content Editor.

5.       On the Editing Tools tab, click on the Edit HTML Source link.

6.       On the HTML Source Edit box, create the controls that will be used. Create an html button and a span tag with an id “itemCount”.

7.       Insert the script inside the span ‘ItemCount’ tag.

8.       Press on OK, and on the Page ribbon, click on Stop Editing.

To test what we have done, click on the Show Item Total Count