title: jsRender and paging
body: <p>I am trying to get <strong><a href="https://github.com/BorisMoore/jsrender/blob/master/jsrender.js" rel="nofollow">jsRender</a></strong> and paging to work, but I am somewhat new to jsRender and jquery for that matter.
  I have tried to modify <strong><a href="http://encosia.com/easily-build-powerful-client-side-ajax-paging-using-jquery/" rel="nofollow">this</a></strong> to work with jsRender instead, but I am having only limited success.</p>
  
  <ol>
  <li>I am getting an exception when I click the "next page" link (see the code). The exception is "JsRender Error: Unknown template: "#items" - I think it happens because the code is overwritten on subsequent data fetch, but I am not sure how to fix it - any help is appreciated.</li>
  <li>Can anybody suggest some hints to create a numeric paging mechanism as well? E.g. "&lt;&lt; 1 2 3 4 5 6 7 8 9 10 ... >> - clicking on the "..." will reset the numerics to "&lt;&lt; 11 12 13 .." and so on.</li>
  </ol>
  
  <p>Here is my code for paging.aspx:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="paging.aspx.cs" Inherits="paging" EnableViewState="true" %&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      body,table {font-family: Verdana; font-size:12px;}
      th,td {text-align:left;}
      div.paging a {padding:0 3 0 3;}
  &lt;/style&gt;
  
  &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;  
  &lt;script src="/js/jsrender.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
      $(document).ready(function () {
          loadData(1);
          loadCount();
      });
  
      function loadData(page) {
          $.ajax({
              type: "POST",
              url: "paging.aspx/getData",
              data: "{'Page':'" + page + "'}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (msg) {
                  updatedata(msg);
                  UpdatePaging();
              }
          });
      }
  
      function loadCount() {
          $.ajax({
              type: "POST",
              url: "paging.aspx/ItemCount",
              data: "{}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (msg) {
                  lastPage = Math.ceil(msg.d / 10);
                  UpdatePaging();
              }
          });
      }
  
      var currentPage = 1;
      var lastPage = 3;
  
      function UpdatePaging() {
          if (currentPage != 1) {
              $('#PrevPage').attr('href', '#');
              $('#PrevPage').click(PrevPage);
          }
          if (currentPage != lastPage) {
              $('#NextPage').attr('href', '#');
              $('#NextPage').click(NextPage);
          }
      }
  
      function NextPage(evt) {
          evt.preventDefault();
          DisplayProgressIndication();
          loadData(++currentPage);
      }
  
      function PrevPage(evt) {
         evt.preventDefault();
         DisplayProgressIndication();
         loadData(--currentPage);
      }
  
      function DisplayProgressIndication() {
          // Hide both of the paging controls,
          //  to avoid click-happy users.
          $('.paging').hide();
          // Clean up our event handlers, to avoid memory leaks.
          $('.paging').unbind();
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;&lt;th&gt;Title&lt;/th&gt;&lt;th&gt;Date&lt;/th&gt;&lt;th&gt;ID&lt;/th&gt;&lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody id="list"&gt;
      &lt;script id="items" type="text/x-jsrender"&gt;        
      &lt;tr&gt;     
      &lt;td&gt;{{&gt;Title}}&lt;/td&gt;
      &lt;td&gt;{{&gt;Date}}&lt;/td&gt;
      &lt;td&gt;{{&gt;ID}}&lt;/td&gt;
       &lt;/tr&gt;
      &lt;/script&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
      &lt;script type="text/javascript"&gt;
          function updatedata(msg) {
              $("#list").html($("#items").render(msg.d));
          }
       &lt;/script&gt;
  
  &lt;br /&gt;
  
  &lt;a id="PrevPage" class="paging"&gt;&amp;laquo; Previous Page&lt;/a&gt;
  &lt;a id="NextPage" class="paging"&gt;Next Page &amp;raquo;&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The paging.aspx.cs looks like this:</p>
  
  <pre><code>using System;
  using System.Data;
  using System.Configuration;
  using System.Collections;
  using System.Web;
  using System.Web.Security;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Web.UI.WebControls.WebParts;
  using System.Web.UI.HtmlControls;
  using System.Text;
  using Microsoft.Practices.EnterpriseLibrary.Data;
  using System.Data.Common;
  using System.Web.Services;
  
  
  public partial class paging : System.Web.UI.Page
  {
      static int pageSize = 10;
      static int totalRows = 0;
  
      protected void Page_Load(object sender, EventArgs e)
      {
      }
  
      [WebMethod]
      public static IEnumerable getData(int Page)
      {
          DataTable dt = DataAccess.returnList(Page, pageSize);
          var data = from d in dt.AsEnumerable()
                     select new
                     {
                         Title = d.Field&lt;string&gt;("Title"),
                         ID = d.Field&lt;int&gt;("ID"),
                         Date = d.Field&lt;DateTime&gt;("Date").ToString()
                     };
          totalRows = int.Parse(dt.Rows[0]["TotalRows"].ToString());
          return data;
      }
  
      [WebMethod]
      public static int ItemCount()
      {
          return totalRows;
      }
  }
  </code></pre>
  
  <p>The json data I get back looks like this in raw request:</p>
  
  <pre><code>{"d":[{"Title":"Bla bla","ID":123,"Date":"04-07-2012 10:05:00"},
      {"Title":"Bla bla","ID":124,"Date":"26-06-2012 12:50:00"}]}
  </code></pre>