我需要在页面中使用分页,这样每页只显示10个项目

时间:2017-10-17 09:23:16

标签: javascript c#

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

<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个数据。

1 个答案:

答案 0 :(得分: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
}