2011-12-01 70 views
0

我有一張表,我想分頁。我加載數據,此代碼:用html表格html分頁;每個()不起作用?

//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!"); 
} 

我的Ajax功能在一個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; 
    }); 
}); 

我想這個代碼與此示例表:

<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 - http://jsfiddle.net/29W9Q/ - 但我不能讓它在我的網頁的工作。

+0

它可以在Chrome中,您使用的是什麼瀏覽器使用? – Stefan

+0

什麼實際上不起作用?您的分頁代碼似乎沒問題。成功回調後,您是否重新初始化您的分頁? –

+0

我的瀏覽器是fire fox。 – 8611670474

回答

0

代替 $('.paginated-table').each(function() {

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