jsRender 및 페이징

jsRender 및 페이징이 작동하도록 노력하고 있습니다. 그러나 jsRender와 jquery를 처음 접하는 것이 좋습니다. 대신 this을 jsRender와 함께 사용하도록 수정하려고 시도했지만 제한적인 성공만을 거두고 있습니다.jsRender 및 페이징

"다음 페이지"링크를 클릭하면 예외가 발생합니다 (코드 참조). 예외는 "JsRender 오류 : 알 수없는 템플릿 :"#items "입니다. 코드가 후속 데이터 가져 오기에서 덮어 쓰기 때문에 발생한다고 생각하지만 문제를 해결하는 방법을 잘 모르겠습니다. 아무런 도움이 필요하지 않습니다.

누구든지 제안 할 수 있습니다. 예를 들어 숫자 페이징 메커니즘을 만드는 방법에 대한 힌트를 얻으시겠습니까? 예 : "< < 1 2 3 4 5 6 7 8 9 10 ..."- "..."을 클릭하면 숫자가 "< < 11 12 13으로 재설정됩니다. .." 등등.

<%@ 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은 다음과 같습니다 : 여기

는 paging.aspx 내 코드입니다

내가 돌아올 JSON 데이터는 원시에서 다음과 같습니다

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

요청 :

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

jsRender 및 페이징

답변

관련 문제