需要一個完整的分頁jQuery的Ajax

我想要一個完整的例子，如何顯示完整的分頁數據。我可以顯示數據，但我不能把分頁。任何人都有例子或任何提示？需要一個完整的分頁jQuery的Ajax

問候

這裏這是我的代碼：

$.ajax({ 
     url: '@Url.Action("GetSearchRides", "Home")', 
     contentType: "application/json;", 
     dataType: "json", 
     type: "GET", 
     //data: { StartingPoint: st, EndPoint: ep, date: dt }, 
     data: { latStart: $('#LatStartingRoot1').val(), latEnd: $('#LatEndPoint').val(), lngstart: $('#LogStartingRoot').val(), lngend: $('#LogEndPoint').val(), date: dt }, 
     success: function (data) { 
      $("#yourtableid").remove(); 
      var user = ' <table id ="yourtableid" width="100%">'; 
      if (data != "") { 
       $.each(data, function (key, val) { 
        user += ' <tr style="margin: 1px 0px 0px 0px; border: 5px solid #0094ff; border-radius:25px;"><td><table><tr><td><img src="@Url.Content("~/UserImages/")' + val.Useretail[0].ProfilePic + '" height="100px" width="100px" style ="border:2px solid white; border-radius:10px;"/>' 
           + ' </td><td>&nbsp;</td><td valign="top"><table width="100px" style=" margin:10px 1px 1px 2px;"><tr><td><b>' + val.Useretail[0].GivenName + '</b></td></tr>' 
           + '<tr><td><b>' + val.Useretail[0].DateOfBirth + '</b></td></tr><tr><td>.</b></td></tr><tr><td>' 

           + '<ul class="rating" style="width: 160px;">' 
           + '<li><a title="3/5" href="javascript:void(0);" class="full">1</a></li>' 
           + '<li><a title="3/5" href="javascript:void(0);" class="full">2</a></li>' 
           + '<li><a title="3/5" href="javascript:void(0);" class="full">3</a></li>' 
           + '<li><a title="3/5" href="javascript:void(0);">4</a></li>' 
           + '<li><a title="3/5" href="javascript:void(0);">5</a></li>' 
           + '</ul>' 

           + '</td></tr></table></td></tr></table></td><td><b><a href="/MobileBareng/Home/SelectedRides?TripID=' + val.RidesID + '">' + val.DepartureDate + '</a></b><table width="100%"><tr>' 
           + '<td>.</td><td>.</td></tr><tr><td><img src="@Url.Content("~/Images/MobileBarengImg/MapLocatier1.png")" /></td><td>' 
           + ' <b> ' + val.StartingRoot + '</b></td></tr><tr><td>.</td><td>.</td></tr>' 
           + ' <tr><td><img src="@Url.Content("~/Images/MobileBarengImg/MapLocater2.png")" /></td><td> <b>' + val.EndPoint + '</b></td></tr></table></td>' 
           + ' <td valign="top"> <table width="100%"><tr><td><img src="@Url.Content("~/Images/MobileBarengImg/Price-tag-icon.png")" /></td><td><b>' + val.PricePerPassenger + '</b></td>' 
           + '</tr><tr><td>&nbsp;.</td><td>&nbsp;</td></tr>' 
           + '<tr><td>&nbsp;.</td><td>&nbsp;.</td></tr><tr>' 
           + '<td><img src="@Url.Content("~/Images/MobileBarengImg/racing_seat_55418.jpg")" /></td><td><b> ' + val.NumberOfSeatsOffered + '</b></td></tr></table></td></tr><tr><td>.</td>' 
           + ' <td>.</td><td></td></tr>' 

         }); 

         $('#users').append('</table>' + user); 
         $('#error').html(''); 
         } 
         else { 
          $('#error').html('Sorry! We have no rides available from matching your search criteria for now. '); 
         } 
       }, 
     error: function() { 
      alert("Error!"); 
     }, 
    });

，我想喜歡把分頁此代碼： http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

來源

2014-03-13 Nayeem Mansoori

如果你要手動做到這一點，你需要做這樣的事情：

success: function(response){ 
     var html = '<table><tbody>'; 
     response.data.forEach(function(row){ 
     html += '<tr><td>' + row.id + '</td><td>' + row.firstName + ...; 
     }); 
     html += '</tbody></table>'; 
     //Set some elements innerHTML to html, or create the table some other way 
    }

如果服務器正確提供JSON，jQuery將自動將其解析爲可以以上述方式訪問的JavaScript對象。

或者使用數據表插件，它是開源的，易於使用

http://datatables.net/

來源

2014-03-13 07:00:05

需要一個完整的分頁jQuery的Ajax

回答

相關問題