javascript - 我需要在我的页面中使用分页，以便每页仅显示 10 个项目

Question

我编写了以下代码来检索所有数据并将其显示为一个

<div class="explore-content-sec">
            <div class="container">
                <div class="row">
                <div class="loading-div"></div>
                <div id="results">
                </div>
                </div>
            </div>
        </div>

而 javscript 就像

 $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "Destinations.aspx/GetAllData",
            data: '',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            cache: false,
            success: function (response) {
                if (response != null && response.d != null) {

                    var data = response.d;

                    //  data = $.parseJSON(data);
                    document.getElementById("results").innerHTML = response.d;

                }
            },
            failure: function (response) {
                alert(response.d);

            }
        });
        return false;


    });

后面的代码是

   [System.Web.Services.WebMethod]
    public static string GetAllData()
    {
        DestinationDetailsBL bl = new DestinationDetailsBL();
        DataTable dt = bl.ViewAllDestination();
        string image = "";
        string name;
        string attractions;
        string j = "";
        int i = 1;
        string H="";
        string id = "";


        foreach (DataRow r in dt.Rows)
        {
            image = "images/" + r["strImage"].ToString() + "  ";
            name = r["strName"].ToString() + "  ";
            id = r["intId"].ToString() + "  ";
            attractions = r["strAttractions"].ToString() + "  ";
            H = H + @" <div class='cycling-box clearfix'> <ul>";
            H = H + @" <div class='cycling-box-image pull-left'>

                                                             <a href='Images/" + image;
            H = H + @"'><img src='";
            H = H + image + @"' alt=''></a> </div>";

                H = H + @"<div class='cycling-box-content pull-right'>
                    <h1><a href='" ;
                H = H + @"'>" + name;
                H = H + @"</a></h1>
                    <p><strong>" + attractions;
                H = H + @"
            </strong></p>

                    <a href='DestinationDetails.aspx?id="+id;
            H=H+@"' class='read-more'>Read More</a>
                </div>";
                H = H + " </ul> </div>";

        }


        return H;
    }

所以我从上面的代码中获取了数据库中的所有数据，所有这些数据都显示在包含近 40 条数据的页面中。我想使用分页技术这样每页只显示 10 个数据。

Answer 1

首先，虽然没有错，但我不认为像你这样返回 HTML 是好的。您应该返回结构化数据(XML、JSON 甚至纯文本)并通过 Javascript 重建 DOM。

对于您的问题，我建议使用 LINQ，在 Web 请求中采用 page 参数:

const int ItemsPerPage = 10
foreach (DataRow r in dt.Rows.Skip(page * ItemsPerPage).Take(ItemsPerPage))
{
    // Your code
}