Client Side Repeater and Paging
Aloha.. So on this Article lest discuss How to Do a Repeater From Template But Client Side and Paging We are going to Use JTemplate and jquery Pagination. Imagine that a repeater that does not use server memory and Adding something to The Control Tree. :) Feed Them Json and They shall work, Neat.. So First We need a div container for Paging and the content it self, News-Pagination Div would be the paging container, and Mycontainer is End result container for our data
1: <div>
2: <div style="width:100%;">
3: <div id="News-Pagination" style="float:right" class="pagination"></div>
4: </div>
5: <div style="clear:both;margin-bottom:10px"></div>
6:
7: <div class="front64" id="MyContainer"></div>
8: </div>
On first Call we need to Set the Total Row That return (line 17), so that the paging can runs. What i don’t like about this is we have to make a double call.
We Can set The Template By URL or Feed String directly , The pattern is like line 27-28. On Next or Prev The Event Handler is Line 39
1: function MyInitialClass{
2: this.pagenumber=1,
3: this.pagesize=4,
4: this.totalmessage=0
5: }
6: var popMessage = new MyInitialClass();
7:
8: $(document).ready(function() {
9: FirstCall(popMessage.pagenumber, popMessage.pagesize);
10:
11: });
12:
13: function FirstCall(pageindex, pagesize) {
14:
15: $.getJSON('services/MyHandler.ashx?p=' + pageindex + '&s=' + pagesize, function(messages) {
16: popMessage.totalmessage = messages.totalmessage;
17: $("#News-Pagination").pagination(popMessage.totalmessage, {
18: items_per_page: popMessage.pagesize,
19: callback: handlePaginationClick
20: });
21:
22: });
23: function GetNext(pageindex, pagesize) {
24: $('#MyContainer').fadeOut('medium');
25: $.getJSON('services/MyHandler.ashx?p=' + pageindex + '&s=' + pagesize, function(messages) {
26: //Set and Apply template
27: var template = $('#item_template').html();
28: $('#MyContainer').setTemplate(template);
29: $('#MyContainer').processTemplate(messages);
30: //set total
31: for (var a = 0; a < messages.messages.length; a++) {
32: document.getElementById(messages.messages
.rootmessageid).innerHTML = messages.message.message;
33: }
34: $('#MyContainer').hide().fadeIn('slow');
35: popMessage.totalmessage = messages.totalmessage;
36: });
37:
38: }
39: function handlePaginationClick(new_pageindex, pagination_container) {
40: GetNext(new_pageindex + 1, popMessage.pagesize);
41: return false;
42: }
43:
44:
45: }
Another Trick would Be, if you see on Line 27. We are Getting Template From a Script Type=text/html.
If you put script type=text/html ,this will hide any markup in the document without interfering with HTML validator.we can put inline our Template in the Same page with out any Error and it will not displayed on page.
So Put our template on page. Below is only Example
1: <script type="text/html" id="item_template">
2: <div>
3: <ul>
4: {#foreach $T.messages as record}
5: <li>
6: <div class="vcard">
7: <strong><a href="{$T.record.fullname}/{$T.record.shortname}" title="{$T.record.firstname} {$T.record.lastname}">
8: <span class="userImage">
9: <img class="photo" alt="alt tag here" src="services/imageHandler.ashx?image=images/upload/photos/c{$T.record.clientid}avbig.jpg&w=63&h=63&always=true&aspec=true&nopic=noavatarl&resizeby=w"
10: height="63" width="63"></span><span class="nickname">{$T.record.firstname} {$T.record.lastname}</span></a></strong> wrote:<br>
11:
12: <div id="{$T.record.rootmessageid}" class="hr3"></div>
13: </div>
14: </li>
15:
16: {#/for}
17: </ul>
18: </div>
19: </script>
On Your Handler Do A Paging On Your Store Proc,Receving P as page and S as size and Output The endresult with Json, I use Newtonsoft.Json.Linq.JObject for a long time.
1: var json = JObject.FromObject(new
2: {
3: messages = (from c in result
4: select
5: new
6: {
7: fullname = c.fullname,
8: firstname = c.firstname,
9: lastname = c.lastname,
10: clientid = c.clientid,
11: shortname = c.shortname,
12: message = c.message,
13: messagetypeid = c.messagetypeid,
14: rootmessageid = c.rootmessageid,
15: sum = c.sum
16: }),
17: totalmessage = howmanyitems
18: });
19: context.Response.Write(json.ToString());
20: context.Response.End();
That’s it . See you again Folks