Question

我正在努力让 jsRender 和分页工作，但我对jsRender和jquery有点新鲜。我尝试修改 this 以改为使用jsRender，但我的成功有限。

当我点击“下一页”链接时，我收到异常（请参阅代码）。例外是“JsRender错误：未知模板：”#items“ - 我认为这是因为代码在后续数据获取时被覆盖，但我不确定如何修复它 - 任何帮助都表示赞赏。
有人可以建议一些提示来创建数字分页机制吗？例如。 “＆lt;＆lt;＆lt;＆lt; 1 2 3 4 5 6 7 8 9 10 ...＆gt;＆gt; - 点击”...“将数字重置为”＆lt;＆lt; 11 12 13 ..“等等。

这是我的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>

paging.aspx.cs看起来像这样：

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;
    }
}

我回来的json数据在原始请求中看起来像这样：

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

Answer 1

以下是您的示例：

$(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));
});

演示：http://jsfiddle.net/9mBhd/

您需要检查代码中的数据和选择器，同时请注意，您将从示例中的html()移除#list的模板。

jsRender和分页

1 个答案: