jsRender and paging

Question

jsRender and paging

2.5k views Asked by Sha At 11 October 2012 at 14:35

I am trying to get jsRender and paging to work, but I am somewhat new to jsRender and jquery for that matter. I have tried to modify this to work with jsRender instead, but I am having only limited success.

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.
Can anybody suggest some hints to create a numeric paging mechanism as well? E.g. "<< 1 2 3 4 5 6 7 8 9 10 ... >> - clicking on the "..." will reset the numerics to "<< 11 12 13 .." and so on.

Here is my code for paging.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="paging.aspx.cs" Inherits="paging" EnableViewState="true" %>
<html>
<head>
<style type="text/css">
    body,table {font-family: Verdana; font-size:12px;}
    th,td {text-align:left;}
    div.paging a {padding:0 3 0 3;}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
<script src="/js/jsrender.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    $(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();
    }

</script>
</head>
<body>

<table>
<thead>
    <tr><th>Title</th><th>Date</th><th>ID</th></tr>
</thead>
<tbody id="list">
    <script id="items" type="text/x-jsrender">        
    <tr>     
    <td>{{>Title}}</td>
    <td>{{>Date}}</td>
    <td>{{>ID}}</td>
     </tr>
    </script>
</tbody>
</table>

    <script type="text/javascript">
        function updatedata(msg) {
            $("#list").html($("#items").render(msg.d));
        }
     </script>

<br />

<a id="PrevPage" class="paging">&laquo; Previous Page</a>
<a id="NextPage" class="paging">Next Page &raquo;</a>

</body>
</html>

The paging.aspx.cs looks like this:

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<string>("Title"),
                       ID = d.Field<int>("ID"),
                       Date = d.Field<DateTime>("Date").ToString()
                   };
        totalRows = int.Parse(dt.Rows[0]["TotalRows"].ToString());
        return data;
    }

    [WebMethod]
    public static int ItemCount()
    {
        return totalRows;
    }
}

The json data I get back looks like this in raw request:

{"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"}]}

Original Q&A

There are 1 answers

**webdeveloper** · Accepted Answer · 2012-10-11 15:12:33

Here is your example:

$(function(){
    var data = [{Title:'title 1', Date: 'date 1', Id: 1},
                {Title:'title 2', Date: 'date 2', Id: 2},
                {Title:'title 3', Date: 'date 3', Id: 3}];

    $("#list").html($("#items").render(data));
});

Demo: http://jsfiddle.net/9mBhd/

You need to check: data and selectors in your code, also note that you will remove template with html() from #list in your example.

TechQA.

jsRender and paging

There are 1 answers

Related Questions in JQUERY

Related Questions in PAGING

Related Questions in JSRENDER

Related Questions in CUSTOMPAGING

Popular Questions

Popular Tags

Trending Questions