jQuery를 사용한 표 html 페이지 매김; each()가 작동하지 않습니까?

페이지 매김을하고 싶습니다. 이 코드와 데이터를로드jQuery를 사용한 표 html 페이지 매김; each()가 작동하지 않습니까?

//load data in table 
$.ajax({ 
    type: "POST", 
    url: "../master.asmx/selectmaster", 
    contentType: "application/json; charset=utf-8", 
    data: "{}", 
    dataType: "json", 
    success: function showgrid(msg) { 
     var j = jQuery.parseJSON(msg.d); 
     var newcontent = ''; 
     var newcontent = "<table class=\"paginated-table\"><thead><tr><th class=\"header\">نام</th><th class=\"header\">نام خانوادگی</th></tr></thead><tbody>"; 
     for (var i = 0; i < j.length; i++) { 
      newcontent += "<tr><td>" + j[i].name + "</td><td>" + j[i].family + "</td><tr>"; 
     } 

     newcontent += "</tbody></table><br /><span class=\"prev\">PREV</span><div id=\"index\"><span>1</span></div><span class=\"next\">NEXT</span>"; 
     $("#grid").append(newcontent); 
    }, 
    error: faild 
}); 
//error message 
function faild(msg) { 
    alert("Error!"); 
}

내 아약스 함수는 JS 파일에 내 페이징 코드는 또 다른 JS 파일에 있습니다.

var maxRows = 3; 
$('.paginated-table').each(function (i) { 
    var cTable = $(this); 
    var cRows = cTable.find('tr:gt(0)'); 
    var cRowCount = cRows.size(); 
    if (cRowCount < maxRows) { 
     return; 
    } 
    /* add numbers to the rows for visuals on the demo */ 
    cRows.each(function (i) { 
     $(this).find('td:first').text(function (j, val) { 
      return (i + 1) + " - " + val; 
     }); 
    }); 

    /* hide all rows above the max initially */ 
    cRows.filter(':gt(' + (maxRows - 1) + ')').hide(); 

    var cPrev = cTable.siblings('.prev'); 
    var cNext = cTable.siblings('.next'); 

    /* start with previous disabled */ 
    cPrev.addClass('disabled'); 
    alert("OK"); 
    cPrev.click(function() { 
     var cFirstVisible = cRows.index(cRows.filter(':visible')); 

     if (cPrev.hasClass('disabled')) { 
      return false; 
     } 

     cRows.hide(); 
     if (cFirstVisible - maxRows - 1 > 0) { 
      cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show(); 
     } else { 
      cRows.filter(':lt(' + cFirstVisible + ')').show(); 
     } 

     if (cFirstVisible - maxRows <= 0) { 
      cPrev.addClass('disabled'); 
     } 

     cNext.removeClass('disabled'); 

     return false; 
    }); 

    cNext.click(function() { 
     var cFirstVisible = cRows.index(cRows.filter(':visible')); 

     if (cNext.hasClass('disabled')) { 
      return false; 
     } 

     cRows.hide(); 
     cRows.filter(':lt(' + (cFirstVisible + 2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show(); 

     if (cFirstVisible + 2 * maxRows >= cRows.size()) { 
      cNext.addClass('disabled'); 
     } 

     cPrev.removeClass('disabled'); 

     return false; 
    }); 
});

나는이 샘플 테이블이 코드를 시도 : - http://jsfiddle.net/29W9Q/ -

<table class="paginated-table"> 
      <th>Heading1</th> 
      <th>Heading2</th> 
      <tbody> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 
<tr><td>This is td</td><td>This is td</td></tr> 

<tr><td>This is td</td><td>This is td</td></tr> 

      </tbody> 
     </table> 
     <span class="prev">Previous</span><span class="next">Next</span>

그것은이 jsFiddle에서 작동을하지만 난 내 페이지에서 동작하지 않습니다. 대신 $('.paginated-table').each(function() {

시도의

출처

2011-12-01 8611670474

그것은 크롬에서 작동, 당신은 어떤 브라우저를 사용하고 사용 하는가? – Stefan

실제로 작동하지 않는 것은 무엇입니까? 페이지 매김 코드가 괜찮은 것 같습니다. 성공 콜백 후 페이지 매김을 다시 초기화합니까? –

내 브라우저는 fire fox입니다. – 8611670474

는 $.each($('.paginated-table'),function(){

출처

2013-10-17 05:32:25

jQuery를 사용한 표 html 페이지 매김; each()가 작동하지 않습니까?

답변

관련 문제