How to display total items count below the list in SP 2013?

Hi

I have a list which display data from database and it is showing 1-30 items per page. I want to change it to "Viewing 1-30 of <total items count>. How to do this task?

Thanks in advance

May 26th, 2015 10:05am

Hi

use jquery to get the total, and insert that value in your form

http://sharepointdotnetwiki.iblogger.org/2012/09/using-jquery-to-get-total-items-in-sharepoint-list/

Free Windows Admin Tool Kit Click here and download it now
May 27th, 2015 2:06am

Hi

You can use below jquery code to achieve this -

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script type="text/javascript">
$(document).ready(function(){   
   var table = $(".ms-listviewtable").prepend($("<thead></thead>").append($('.ms-listviewtable').find("tr:first"))).DataTable({"bFilter": false,});			 
});
</script>
<style type="text/css">
.even, .odd, .sorting_1{
  background-color: transparent !important;
}
.dataTable THEAD TH{
   border:0 !important;
}
</style>

This use jQuery Datatable to add a wrapper over SharePoint list. You can add this code in Content Editor Web Part.

Below is the screenshot of implementation-

Hope it helps.

May 27th, 2015 2:37am

Hi,

From your description, my understanding is that you want to customize the page footer of SharePoint list.

You could accomplish your requirement with JSOM and overwrite the method RefreshPageTo, please refer to the code below:

<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="_layouts/15/sp.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

// set the pagination as your requirement when init the page

getItemCount();

//overwritte the function RefreshPageTo() to set the pagination as your requirement when your change the page

function RefreshPageTo(evt, url, bForceSubmit) {

                //alert(1);

    CoreInvoke('_RefreshPageTo', evt, url, bForceSubmit);

    getItemCount()

}

//set the page footer as your requirement

function getItemCount(){

                var ctx = new SP.ClientContext.get_current();

                var website = ctx.get_web();

                var listCollection = website.get_lists();

                // replace your list title

                var oList = listCollection.getByTitle('customDoc');

                var camlQuery = new SP.CamlQuery();

                camlQuery.set_viewXml('<View></View>');

                var collListItem = oList.getItems(camlQuery);

                ctx.load(collListItem);

                ctx.executeQueryAsync(

                                function onSuccess(sender, args) {

                                                var count = collListItem.get_count();

                                                var obj =$(".ms-paging");

                                                obj[0].innerHTML = "Viewing "+$(".ms-paging")[0].innerHTML+" of "+count+" items."

                }, function onFail(sender, args) {

                                alert('failed to get list. Error:' + args.get_message());

                });

}

</script>

The screenshot below is my test result:

Best Regards,

Vincent Han

Free Windows Admin Tool Kit Click here and download it now
May 27th, 2015 3:13am

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics