SharePoint

SharePoint 2013: Custom Search, Sorting And Paging Using CSOM

In this particular article I am showing data in tiles format.

So now we can display data in any format and have custom paging, sorting, and search.

For this you require a SharePoint site with Events List. The Events list needs to have the following columns.

Also you need a Location List.This Location List has a Title column which we need to refer to in Events List.

I am attaching both the list templates.



Owner is Title Column.

The Project basically contains a search box and a button and below the data is displayed in horizontal format. At the end you can see custom pager.



The Data is sorted on the basis of Title Column; i.e, Owner.

When you enter a key word in a search box and click on “Search Events”, it searches based on Title (Owner) column.



The code has page size 4 which can be changed.


  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3.     <head>  
  4.         <title>Events</title>  
  5.         <linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  6.         <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">  
  7.         </script>  
  8.         <scriptsrc="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"type="text/javascript">  
  9.         </script>  
  10.         <scripttype="text/javascript"src="/_layouts/15/sp.runtime.js">  
  11.         </script>  
  12.         <scripttype="text/javascript"src="/_layouts/15/sp.js">  
  13.         </script>  
  14.         <styletype="text/css">  
  15.             .pager {  
  16.                 padding-left: 9px;  
  17.                 /*margin: 20px 0;*/  
  18.                 text-align: center;  
  19.                 list-style: none;  
  20.                 float: left;  
  21.             }  
  22.             .boxspace  
  23.             {  
  24.                 padding:9px;  
  25.             }  
  26.   
  27.   
  28.         </style>  
  29.         <scripttype="text/javascript">  
  30.             var pageIndex = 1; // default page index value   
  31.             var pageSize = 4;//defualt page size  
  32.             var nextPagingInfo;  
  33.             var previousPagingInfo;  
  34.             var position;  
  35.             var splistitems;  
  36.             var searchvalue;  
  37.             var sflag;  
  38.             var sortColumn = 'Title';//name if sort column  
  39.             var listname = 'Events';//name if list  
  40.   
  41.             //next click code  
  42.             function btnnextclick() {  
  43.                 pageIndex = pageIndex + 1;  
  44.                 if (nextPagingInfo) {  
  45.                     position = new SP.ListItemCollectionPosition();  
  46.                     position.set_pagingInfo(nextPagingInfo);  
  47.                 }  
  48.                 else {  
  49.                     position = null;  
  50.                 }  
  51.   
  52.                 getListItems();  
  53.             }  
  54.             //prev click code  
  55.             function btnprevclick() {  
  56.                 pageIndex = pageIndex - 1;  
  57.                 position = new SP.ListItemCollectionPosition();  
  58.                 position.set_pagingInfo(previousPagingInfo);  
  59.                 getListItems();  
  60.             }  
  61.             $(document).ready(function () {  
  62.   
  63.                 //fetch items from list on page load  
  64.                 getListItems();  
  65.   
  66.             });  
  67.             function getListItems(searchbtnclickflag) {  
  68.   
  69.                 try {  
  70.   
  71.                     sflag = searchbtnclickflag;//value will be undefined as search button is not clicked  
  72.                     var context = new SP.ClientContext.get_current();  
  73.                     // Load the web object  
  74.                     this.web = context.get_web();  
  75.                     //Get the list  
  76.                     var list = this.web.get_lists().getByTitle(listname);  
  77.                     var spQuery = new SP.CamlQuery();  
  78.                     //if search button is click then if condition will execute to set the default position of pager  
  79.                     if (sflag == "1") {  
  80.                         spQuery.set_listItemCollectionPosition(undefined);  
  81.                     }  
  82.                     else {  
  83.                         spQuery.set_listItemCollectionPosition(position);  
  84.                     }  
  85.                     //on page load search input box is not created,hence this condition will execute.  
  86.                     if (document.getElementById('search') == null) {  
  87.                         spQuery.set_viewXml("  
  88.             <View>  
  89.                 <Query>  
  90.                     <OrderBy>  
  91.                         <FieldRef Name='" + sortColumn + "' Ascending='True'/>  
  92.                     </OrderBy>  
  93.                 </Query>" + "  
  94.                 <RowLimit>" + pageSize + "</RowLimit>  
  95.             </View>");  
  96.   
  97.                     }  
  98.             //when search box does not contain any text  
  99.             elseif (document.getElementById('search').value == "") {  
  100.                         spQuery.set_viewXml("  
  101.                 <View>  
  102.                     <Query>  
  103.                         <OrderBy>  
  104.                             <FieldRef Name='" + sortColumn + "' Ascending='True'/>  
  105.                         </OrderBy>  
  106.                     </Query>" + "  
  107.                     <RowLimit>" + pageSize + "</RowLimit>  
  108.                 </View>");  
  109.                     }  
  110.                     //when search value contains text  
  111.                     else {  
  112.                         searchvalue = document.getElementById('search').value;  
  113.   
  114.                         spQuery.set_viewXml("  
  115.                 <View>  
  116.                     <Query>  
  117.                         <Where>  
  118.                             <Contains>  
  119.                                 <FieldRef Name='Title' />  
  120.                                 <Value Type='Text'>" + document.getElementById('search').value + "</Value>  
  121.                             </Contains>  
  122.                         </Where>  
  123.                         <OrderBy>  
  124.                             <FieldRef Name='" + sortColumn +  
  125.                             "' Ascending='True'/>  
  126.                         </OrderBy>  
  127.                     </Query>" + "  
  128.                     <RowLimit>" + pageSize + "</RowLimit>  
  129.                 </View>");  
  130.                     }                   
  131.                     splistitems = list.getItems(spQuery);  
  132.                     context.load(splistitems);  
  133.                     context.executeQueryAsync(Function.createDelegate(this,  
  134.                     get_splistitems_onSuccess), Function.createDelegate(this,  
  135.                     get_splistitems_onFailure));  
  136.   
  137.                 }  
  138.                 catch (e) {  
  139.                     alert("An error occurred while fetching data. Please contact your system administrator.");  
  140.                 }  
  141.             }  
  142.             function get_splistitems_onSuccess() {  
  143.                 if (splistitems.get_count() > 0) {  
  144.   
  145.                     var splistitemCollection = splistitems.getEnumerator();  
  146.   
  147.   
  148.   
  149.   
  150.                     var table = "  
  151.                         <input type='text'class='form-control' id='search' value='" + searchvalue + "'/>  
  152.                         <br/>  
  153.                         <button id='btnsearch' class='btn btn-default' type='button' onclick='getListItems(1)' value='Search Events'>Search Events</button>  
  154.                         <br/>  
  155.                         <table class='status'>  
  156.                         <tr>";  
  157.   
  158.                     while (splistitemCollection.moveNext()) {  
  159.                         var listItem = splistitemCollection.get_current();  
  160.                         table += "  
  161.                     <td class='boxspace'>  
  162.                         <div class='well'>  
  163.                             <span class='span2 title boldName id='" + listItem.get_item('ID') + "span1" + "'>" + listItem.get_item('Title') + "</span>  
  164.                             <br/>  
  165.                             <span class='span2 title boldCategory' id='" + listItem.get_item('ID') + "span2" + "'>" + listItem.get_item('StartDate') + "</span>  
  166.                             <br/>  
  167.                             <br/>  
  168.                             <span class='span2 title boldCode' id='" + listItem.get_item('ID') + "span3" + "'>" + listItem.get_item('Location').get_lookupValue() + "</span>  
  169.                         </div>  
  170.                     </a>  
  171.                 </td>";  
  172.                         }  
  173.   
  174.                     table += "  
  175.             </tr>  
  176.         </table>";  
  177.                     tableview.innerHTML = table + "  
  178.         <br/>  
  179.         <div class='pager'>  
  180.             <button id='btnBack' type='button' onclick='btnprevclick()'>"  
  181.                     + "< Back" + "  
  182.             </button>" +  
  183. "  
  184.             <span id='pageInfo'></span>" +  
  185. "  
  186.             <button id='btnNext' type='button' onclick='btnnextclick()'>Next></button>" +  
  187. "  
  188.         </div>";  
  189.                     if (document.getElementById('search').value == "undefined") {  
  190.                         document.getElementById('search').value = "";  
  191.                     }  
  192.                     managePagerControl();  
  193.                 }  
  194.                 else {  
  195.                     alert("No Data found");  
  196.                 }  
  197.             }  
  198.             function managePagerControl() {  
  199.   
  200.                 if (sflag == "1") {  
  201.                     pageIndex = 1;  
  202.                 }  
  203.                 if (splistitems.get_listItemCollectionPosition()) {  
  204.                     nextPagingInfo = splistitems.get_listItemCollectionPosition().get_pagingInfo();  
  205.                 } else {  
  206.                     nextPagingInfo = null;  
  207.                 }  
  208.   
  209.                 //The following code line shall add page information between the next and back buttons   
  210.                 $("#pageInfo").html((((pageIndex - 1) * pageSize) + 1) + " - " + ((pageIndex * pageSize) - (pageSize - splistitems.get_count())));  
  211.                 previousPagingInfo = "PagedPrev=TRUE&Paged=TRUE&p_ID=" + splistitems.itemAt(0).get_item('ID') + "&p_" + sortColumn + "=" + encodeURIComponent(splistitems.itemAt(0).get_item(sortColumn));  
  212.   
  213.   
  214.   
  215.                 if (pageIndex <= 1) {  
  216.                     $("#btnBack").attr('disabled', 'disabled');  
  217.                 }  
  218.                 else {  
  219.                     $("#btnBack").removeAttr('disabled');  
  220.                 }  
  221.   
  222.                 if (nextPagingInfo) {  
  223.                     $("#btnNext").removeAttr('disabled');  
  224.                 }  
  225.                 else {  
  226.                     $("#btnNext").attr('disabled', 'disabled');  
  227.                 }  
  228.   
  229.             }  
  230.                 function get_splistitems_onFailure() {  
  231.                 alert("An error occurred while fetching data. Please contact your system administrator."+e);  
  232.             }  
  233.   
  234.     </script>  
  235. </head>  
  236. <body>  
  237.     <!--HTML Content-->  
  238.     <divclass="Status"id="tableview">  
  239.     </div>  
  240. </body>undefined</html>  

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs