0

jsRenderとページングを機能させようとしていますが、その点についてはjsRenderとjqueryに少し慣れていません。代わりにjsRenderで動作するようにこれを変更しようとしましたが、成功は限られています。

  1. 「次のページ」リンクをクリックすると例外が発生します（コードを参照）。例外は「JsRenderエラー：不明なテンプレート：「＃items」-後続のデータフェッチでコードが上書きされるために発生すると思いますが、修正方法がわかりません-助けていただければ幸いです。
  2. 数値ページングメカニズムを作成するためのヒントを誰かが提案できますか？例： "<< 1 2 3 4 5 6 7 8 9 10 ... >>-"... "をクリックすると、数値が" << 11 1213.."にリセットされます。

これが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"}]}
4

1 に答える 1

0

これがあなたの例です：

$(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()コード内のデータとセレクターを確認する必要があります。また、例ではfromを使用してテンプレートを削除することに注意して#listください。

于 2012-10-11T15:12:33.210 に答える