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.

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <title>Events</title>  
        <linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
        <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">  
        </script>  
        <scriptsrc="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"type="text/javascript">  
        </script>  
        <scripttype="text/javascript"src="/_layouts/15/sp.runtime.js">  
        </script>  
        <scripttype="text/javascript"src="/_layouts/15/sp.js">  
        </script>  
        <styletype="text/css">  
            .pager {  
                padding-left: 9px;  
                /*margin: 20px 0;*/  
                text-align: center;  
                list-style: none;  
                float: left;  
            }  
            .boxspace  
            {  
                padding:9px;  
            }  
  
  
        </style>  
        <scripttype="text/javascript">  
            var pageIndex = 1; // default page index value   
            var pageSize = 4;//defualt page size  
            var nextPagingInfo;  
            var previousPagingInfo;  
            var position;  
            var splistitems;  
            var searchvalue;  
            var sflag;  
            var sortColumn = 'Title';//name if sort column  
            var listname = 'Events';//name if list  
  
            //next click code  
            function btnnextclick() {  
                pageIndex = pageIndex + 1;  
                if (nextPagingInfo) {  
                    position = new SP.ListItemCollectionPosition();  
                    position.set_pagingInfo(nextPagingInfo);  
                }  
                else {  
                    position = null;  
                }  
  
                getListItems();  
            }  
            //prev click code  
            function btnprevclick() {  
                pageIndex = pageIndex - 1;  
                position = new SP.ListItemCollectionPosition();  
                position.set_pagingInfo(previousPagingInfo);  
                getListItems();  
            }  
            $(document).ready(function () {  
  
                //fetch items from list on page load  
                getListItems();  
  
            });  
            function getListItems(searchbtnclickflag) {  
  
                try {  
  
                    sflag = searchbtnclickflag;//value will be undefined as search button is not clicked  
                    var context = new SP.ClientContext.get_current();  
                    // Load the web object  
                    this.web = context.get_web();  
                    //Get the list  
                    var list = this.web.get_lists().getByTitle(listname);  
                    var spQuery = new SP.CamlQuery();  
                    //if search button is click then if condition will execute to set the default position of pager  
                    if (sflag == "1") {  
                        spQuery.set_listItemCollectionPosition(undefined);  
                    }  
                    else {  
                        spQuery.set_listItemCollectionPosition(position);  
                    }  
                    //on page load search input box is not created,hence this condition will execute.  
                    if (document.getElementById('search') == null) {  
                        spQuery.set_viewXml("  
            <View>  
                <Query>  
                    <OrderBy>  
                        <FieldRef Name='" + sortColumn + "' Ascending='True'/>  
                    </OrderBy>  
                </Query>" + "  
                <RowLimit>" + pageSize + "</RowLimit>  
            </View>");  
  
                    }  
            //when search box does not contain any text  
            elseif (document.getElementById('search').value == "") {  
                        spQuery.set_viewXml("  
                <View>  
                    <Query>  
                        <OrderBy>  
                            <FieldRef Name='" + sortColumn + "' Ascending='True'/>  
                        </OrderBy>  
                    </Query>" + "  
                    <RowLimit>" + pageSize + "</RowLimit>  
                </View>");  
                    }  
                    //when search value contains text  
                    else {  
                        searchvalue = document.getElementById('search').value;  
  
                        spQuery.set_viewXml("  
                <View>  
                    <Query>  
                        <Where>  
                            <Contains>  
                                <FieldRef Name='Title' />  
                                <Value Type='Text'>" + document.getElementById('search').value + "</Value>  
                            </Contains>  
                        </Where>  
                        <OrderBy>  
                            <FieldRef Name='" + sortColumn +  
                            "' Ascending='True'/>  
                        </OrderBy>  
                    </Query>" + "  
                    <RowLimit>" + pageSize + "</RowLimit>  
                </View>");  
                    }                   
                    splistitems = list.getItems(spQuery);  
                    context.load(splistitems);  
                    context.executeQueryAsync(Function.createDelegate(this,  
                    get_splistitems_onSuccess), Function.createDelegate(this,  
                    get_splistitems_onFailure));  
  
                }  
                catch (e) {  
                    alert("An error occurred while fetching data. Please contact your system administrator.");  
                }  
            }  
            function get_splistitems_onSuccess() {  
                if (splistitems.get_count() > 0) {  
  
                    var splistitemCollection = splistitems.getEnumerator();  
  
  
  
  
                    var table = "  
                        <input type='text'class='form-control' id='search' value='" + searchvalue + "'/>  
                        <br/>  
                        <button id='btnsearch' class='btn btn-default' type='button' onclick='getListItems(1)' value='Search Events'>Search Events</button>  
                        <br/>  
                        <table class='status'>  
                        <tr>";  
  
                    while (splistitemCollection.moveNext()) {  
                        var listItem = splistitemCollection.get_current();  
                        table += "  
                    <td class='boxspace'>  
                        <div class='well'>  
                            <span class='span2 title boldName id='" + listItem.get_item('ID') + "span1" + "'>" + listItem.get_item('Title') + "</span>  
                            <br/>  
                            <span class='span2 title boldCategory' id='" + listItem.get_item('ID') + "span2" + "'>" + listItem.get_item('StartDate') + "</span>  
                            <br/>  
                            <br/>  
                            <span class='span2 title boldCode' id='" + listItem.get_item('ID') + "span3" + "'>" + listItem.get_item('Location').get_lookupValue() + "</span>  
                        </div>  
                    </a>  
                </td>";  
                        }  
  
                    table += "  
            </tr>  
        </table>";  
                    tableview.innerHTML = table + "  
        <br/>  
        <div class='pager'>  
            <button id='btnBack' type='button' onclick='btnprevclick()'>"  
                    + "< Back" + "  
            </button>" +  
"  
            <span id='pageInfo'></span>" +  
"  
            <button id='btnNext' type='button' onclick='btnnextclick()'>Next></button>" +  
"  
        </div>";  
                    if (document.getElementById('search').value == "undefined") {  
                        document.getElementById('search').value = "";  
                    }  
                    managePagerControl();  
                }  
                else {  
                    alert("No Data found");  
                }  
            }  
            function managePagerControl() {  
  
                if (sflag == "1") {  
                    pageIndex = 1;  
                }  
                if (splistitems.get_listItemCollectionPosition()) {  
                    nextPagingInfo = splistitems.get_listItemCollectionPosition().get_pagingInfo();  
                } else {  
                    nextPagingInfo = null;  
                }  
  
                //The following code line shall add page information between the next and back buttons   
                $("#pageInfo").html((((pageIndex - 1) * pageSize) + 1) + " - " + ((pageIndex * pageSize) - (pageSize - splistitems.get_count())));  
                previousPagingInfo = "PagedPrev=TRUE&Paged=TRUE&p_ID=" + splistitems.itemAt(0).get_item('ID') + "&p_" + sortColumn + "=" + encodeURIComponent(splistitems.itemAt(0).get_item(sortColumn));  
  
  
  
                if (pageIndex <= 1) {  
                    $("#btnBack").attr('disabled', 'disabled');  
                }  
                else {  
                    $("#btnBack").removeAttr('disabled');  
                }  
  
                if (nextPagingInfo) {  
                    $("#btnNext").removeAttr('disabled');  
                }  
                else {  
                    $("#btnNext").attr('disabled', 'disabled');  
                }  
  
            }  
                function get_splistitems_onFailure() {  
                alert("An error occurred while fetching data. Please contact your system administrator."+e);  
            }  
  
    </script>  
</head>  
<body>  
    <!--HTML Content-->  
    <divclass="Status"id="tableview">  
    </div>  
</body>undefined</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Events</title>

<linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">

</script>

<scriptsrc="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"type="text/javascript">

</script>

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

</script>

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

</script>

<styletype="text/css">

.pager {

padding-left: 9px;

/*margin: 20px 0;*/

text-align: center;

list-style: none;

float: left;

}

.boxspace

{

padding:9px;

}

</style>

<scripttype="text/javascript">

var pageIndex = 1; // default page index value

var pageSize = 4;//defualt page size

var nextPagingInfo;

var previousPagingInfo;

var position;

var splistitems;

var searchvalue;

var sflag;

var sortColumn = 'Title';//name if sort column

var listname = 'Events';//name if list

//next click code

function btnnextclick() {

pageIndex = pageIndex + 1;

if (nextPagingInfo) {

position = new SP.ListItemCollectionPosition();

position.set_pagingInfo(nextPagingInfo);

}

else {

position = null;

}

getListItems();

}

//prev click code

function btnprevclick() {

pageIndex = pageIndex - 1;

position = new SP.ListItemCollectionPosition();

position.set_pagingInfo(previousPagingInfo);

getListItems();

}

$(document).ready(function () {

//fetch items from list on page load

getListItems();

});

function getListItems(searchbtnclickflag) {

try {

sflag = searchbtnclickflag;//value will be undefined as search button is not clicked

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

// Load the web object

this.web = context.get_web();

//Get the list

var list = this.web.get_lists().getByTitle(listname);

var spQuery = new SP.CamlQuery();

//if search button is click then if condition will execute to set the default position of pager

if (sflag == "1") {

spQuery.set_listItemCollectionPosition(undefined);

}

else {

spQuery.set_listItemCollectionPosition(position);

}

//on page load search input box is not created,hence this condition will execute.

if (document.getElementById('search') == null) {

spQuery.set_viewXml("

<View>

<Query>

</OrderBy>

</Query>" + "

<RowLimit>" + pageSize + "</RowLimit>

</View>");

}

//when search box does not contain any text

elseif (document.getElementById('search').value == "") {

spQuery.set_viewXml("

<View>

<Query>

</OrderBy>

</Query>" + "

<RowLimit>" + pageSize + "</RowLimit>

</View>");

}

//when search value contains text

else {

searchvalue = document.getElementById('search').value;

spQuery.set_viewXml("

<View>

<Query>

<Where>

<Value Type='Text'>" + document.getElementById('search').value + "</Value>

</Contains>

</Where>

<FieldRef Name='" + sortColumn +

"' Ascending='True'/>

</OrderBy>

</Query>" + "

<RowLimit>" + pageSize + "</RowLimit>

</View>");

}

splistitems = list.getItems(spQuery);

context.load(splistitems);

context.executeQueryAsync(Function.createDelegate(this,

get_splistitems_onSuccess), Function.createDelegate(this,

get_splistitems_onFailure));

}

catch (e) {

alert("An error occurred while fetching data. Please contact your system administrator.");

}

function get_splistitems_onSuccess() {

if (splistitems.get_count() > 0) {

var splistitemCollection = splistitems.getEnumerator();

var table = "

<br/>

<button id='btnsearch' class='btn btn-default' type='button' onclick='getListItems(1)' value='Search Events'>Search Events</button>

<br/>

<tr>";

while (splistitemCollection.moveNext()) {

var listItem = splistitemCollection.get_current();

table += "

<span class='span2 title boldName id='" + listItem.get_item('ID') + "span1" + "'>" + listItem.get_item('Title') + "</span>

<br/>

<span class='span2 title boldCategory' id='" + listItem.get_item('ID') + "span2" + "'>" + listItem.get_item('StartDate') + "</span>

<br/>

<span class='span2 title boldCode' id='" + listItem.get_item('ID') + "span3" + "'>" + listItem.get_item('Location').get_lookupValue() + "</span>

</div>

</a>

</td>";

}

table += "

</tr>

</table>";

tableview.innerHTML = table + "

<br/>

<button id='btnBack' type='button' onclick='btnprevclick()'>"

+ "< Back" + "

</button>" +

<span id='pageInfo'></span>" +

<button id='btnNext' type='button' onclick='btnnextclick()'>Next></button>" +

</div>";

if (document.getElementById('search').value == "undefined") {

document.getElementById('search').value = "";

}

managePagerControl();

}

else {

alert("No Data found");

}

function managePagerControl() {

if (sflag == "1") {

pageIndex = 1;

}

if (splistitems.get_listItemCollectionPosition()) {

nextPagingInfo = splistitems.get_listItemCollectionPosition().get_pagingInfo();

} else {

nextPagingInfo = null;

}

//The following code line shall add page information between the next and back buttons

$("#pageInfo").html((((pageIndex - 1) * pageSize) + 1) + " - " + ((pageIndex * pageSize) - (pageSize - splistitems.get_count())));

previousPagingInfo = "PagedPrev=TRUE&Paged=TRUE&p_ID=" + splistitems.itemAt(0).get_item('ID') + "&p_" + sortColumn + "=" + encodeURIComponent(splistitems.itemAt(0).get_item(sortColumn));

if (pageIndex <= 1) {

$("#btnBack").attr('disabled', 'disabled');

}

else {

$("#btnBack").removeAttr('disabled');

}

if (nextPagingInfo) {

$("#btnNext").removeAttr('disabled');

}

else {

$("#btnNext").attr('disabled', 'disabled');

}

function get_splistitems_onFailure() {

alert("An error occurred while fetching data. Please contact your system administrator."+e);

}

</script>

</head>

<body>

<divclass="Status"id="tableview">

</div>

</body>undefined</html>

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options

Sharepoint 2013 Hosting – HostForLIFE.eu :: Custom Search, Sorting And Paging Using CSOM

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Sharepoint 2013 Hosting – HostForLIFE.eu :: Custom Search, Sorting And Paging Using CSOM

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Tags