Question

我想要一个完整的例子来说明如何使用完整的分页显示数据。我可以显示数据，但我不能把pagination.can任何人有例子或任何提示？

此致

这是我的代码：

  $.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

Answer 1

如果您要手动执行此操作，则需要执行以下操作：

   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对象。

或者使用DataTables插件，它是开源的，易于使用

http://datatables.net/

在Jquery Ajax中需要完整的分页

1 个答案: