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. }
  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
  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. }
  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 () {
  63. //fetch items from list on page load
  64. getListItems();
  66. });
  67. function getListItems(searchbtnclickflag) {
  69. try {
  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>");
  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;
  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));
  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) {
  145. var splistitemCollection = splistitems.getEnumerator();
  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>";
  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. }
  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() {
  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. }
  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));
  215. if (pageIndex <= 1) {
  216. $("#btnBack").attr('disabled', 'disabled');
  217. }
  218. else {
  219. $("#btnBack").removeAttr('disabled');
  220. }
  222. if (nextPagingInfo) {
  223. $("#btnNext").removeAttr('disabled');
  224. }
  225. else {
  226. $("#btnNext").attr('disabled', 'disabled');
  227. }
  229. }
  230. function get_splistitems_onFailure() {
  231. alert("An error occurred while fetching data. Please contact your system administrator."+e);
  232. }
  234. </script>
  235. </head>
  236. <body>
  237. <!--HTML Content-->
  238. <divclass="Status"id="tableview">
  239. </div>
  240. </body>undefined</html>