jsRender和分頁

我想獲得jsRender和分頁工作，但我對jsRender和jquery有點新東西。我試圖修改this而不是jsRender，但我只有有限的成功。jsRender和分頁

我收到一個異常，當我點擊「下一頁」鏈接（請參閱代碼）。例外是「JsRender錯誤：未知模板：」#items「 - 我認爲這是因爲代碼在後續數據獲取時被覆蓋，但我不知道如何解決它 - 任何幫助表示讚賞。
任何人都可以建議一些提示也可以創建一個數字分頁機制，例如「< < 1 2 3 4 5 6 7 8 9 10 ... >> - 單擊」...「將重置數字爲」< < 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"}]}

來源

2012-10-11 Sha

這是你的例子：

$(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/

你需要檢查：數據和選擇在你的代碼，也請注意，你會從#list在你的榜樣刪除模板，html()。

來源

2012-10-11 15:12:33 webdeveloper

嗨 - 我不知道我理解你的答案。我可以獲取數據並在最初的請求中顯示正常。當我嘗試通過點擊「下一頁」來加載新數據時，就會出現問題。 – Sha

@Perelli將模板移到' – webdeveloper

之外，或多或少地工作（錯誤消失），但是當點擊下一個或上一個按鈕時會發生一些有趣的事情。它會重新載入數據，並顯示新的結果，但它可以開始循環播放每次點擊的數據。也許這是一些異步的東西，導致它重新加載多次。不知道如何發佈這是jsfiddle。 – Sha

回答

相關問題