asp.net-mvc - asp .net中div中动态数据的分页

Question

如何使用 ajax 或 jquery 使用分页在 asp .net 中的 div 中动态显示数据？

Answer 1

老实说，这很难帮助你 - 你应该更具体，但也许你正在寻找这样的东西： jQuery pagination plugin and demo here

Answer 2

您还没有真正提出真正的问题，但也许这会有所帮助：https ://github.com/TroyGoode/PagedList

Answer 3

您可以使用 bootstrap 和 jquery 在您的 div 上创建分页。

控制器

 public ActionResult Index() 
        { 
            // Tab Data 
            ThumbnailViewModel model = new ThumbnailViewModel(); 
            model.ThumbnailModelList = new List<ThumbnailModel>(); 

            // Test Details Data  
            List<ThumbnailDetails> _detaisllist = new List<ThumbnailDetails>(); 
            int count = 10; 
            for (int i = 1; i <= count; i++) 
            { 
                ThumbnailDetails obj = new ThumbnailDetails(); 
                obj.Details1 = "Details- Main" + i; 
                obj.Details2 = "Details- Main-Sub" + i; 
                _detaisllist.Add(obj); 
            } 

            // batch your List data for tab view i want batch by 2 you can set your value 

            var listOfBatches = _detaisllist.Batch(2); 

            int tabNo = 1; 

            foreach (var batchItem in listOfBatches) 
            { 
                // Generating tab 
                ThumbnailModel obj = new ThumbnailModel(); 
                obj.ThumbnailLabel = "Lebel" + tabNo; 
                obj.ThumbnailTabId = "tab" + tabNo; 
                obj.ThumbnailTabNo = tabNo; 
                obj.Thumbnail_Aria_Controls = "tab" + tabNo; 
                obj.Thumbnail_Href = "#tab" + tabNo; 

                // batch details 

                obj.ThumbnailDetailsList = new List<ThumbnailDetails>(); 

                foreach (var item in batchItem) 
                { 
                    ThumbnailDetails detailsObj = new ThumbnailDetails(); 
                    detailsObj = item; 
                    obj.ThumbnailDetailsList.Add(detailsObj); 
                } 

                model.ThumbnailModelList.Add(obj); 

                tabNo++; 
            } 

            // Getting first tab data 
            var first = model.ThumbnailModelList.FirstOrDefault(); 

            // Getting first tab data 
            var last = model.ThumbnailModelList.LastOrDefault(); 

            foreach (var item in model.ThumbnailModelList) 
            { 
                if (item.ThumbnailTabNo == first.ThumbnailTabNo) 
                { 
                    item.Thumbnail_ItemPosition = "first"; 
                } 

                if (item.ThumbnailTabNo == last.ThumbnailTabNo) 
                { 
                    item.Thumbnail_ItemPosition = "last"; 
                } 

            } 

            return View(model); 
        } 

看法：

@model ThumbnailPagination.Models.ThumbnailViewModel 
@{ 
    ViewBag.Title = "Home Page"; 
} 




<div class="container"> 
    <div class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3"> 


        <div class="row"> 
            <nav aria-label="..."> 
                <ul class="pager" role="tablist"> 
                    <li class="previous" onclick="goTo(1);"><a href="#"><span aria-hidden="true">←&lt;/span> Previous</a></li> 
                    @{ 
                        foreach (var item in Model.ThumbnailModelList) 
                        { 
                            if (item.Thumbnail_ItemPosition == "first") 
                            { 
                                <li class="active" id="@item.Thumbnail_ItemPosition"> 
                                    <a aria-controls="@item.Thumbnail_Aria_Controls" data-toggle="tab" href="@item.Thumbnail_Href" role="tab">@item.ThumbnailTabNo</a> 
                                </li> 
                            } 


                            else if (item.Thumbnail_ItemPosition == "last") 
                            { 
                                <li id="@item.Thumbnail_ItemPosition"> 
                                    <a aria-controls="@item.Thumbnail_Aria_Controls" data-toggle="tab" href="@item.Thumbnail_Href" role="tab">@item.ThumbnailTabNo</a> 
                                </li> 
                            } 
                            else 
                            { 
                                <li> 
                                    <a aria-controls="@item.Thumbnail_Aria_Controls" data-toggle="tab" href="@item.Thumbnail_Href" role="tab">@item.ThumbnailTabNo</a> 
                                </li> 
                            } 

                        } 
                    } 
                    <li class="next" onclick="goTo(2);"><a href="#">Next <span aria-hidden="true">→&lt;/span></a></li> 
                </ul> 
            </nav> 
        </div> 

        <!-- Tab panes --> 
        <div class="tab-content"> 

            @{ 
                foreach (var item in Model.ThumbnailModelList) 
                { 
                    if (item.Thumbnail_ItemPosition == "first") 
                    { 

                        <div class="tab-pane active" id="@item.ThumbnailTabId" role="tabpanel"> 

                            @{ 

                                foreach (var detailsitem in item.ThumbnailDetailsList) 
                                { 
                                    <div class="col-sm-6"> 
                                        <div class="thumbnail"> 
                                            <img alt="..." src="http://placehold.it/240x150"> 
                                            <div class="caption"> 
                                                <h3>@detailsitem.Details1</h3> 
                                                <p> 
                                                    @detailsitem.Details2 
                                                </p> 
                                                <p> 
                                                    <a class="btn btn-primary" href="#" role="button"> 
                                                        Read more 
                                                        ... 
                                                    </a> 
                                                </p> 
                                            </div> 
                                        </div> 
                                    </div> 
                                } 
                            } 


                        </div> 
                                } 
                                else 
                                { 
                                    <div class="tab-pane" id="@item.ThumbnailTabId" role="tabpanel"> 

                                        @{ 

                                            foreach (var detailsitem in item.ThumbnailDetailsList) 
                                            { 
                                                <div class="col-sm-6"> 
                                                    <div class="thumbnail"> 
                                                        <img alt="..." src="http://placehold.it/240x150"> 
                                                        <div class="caption"> 
                                                            <h3>@detailsitem.Details1</h3> 
                                                            <p> 
                                                                @detailsitem.Details2 
                                                            </p> 
                                                            <p> 
                                                                <a class="btn btn-primary" href="#" role="button"> 
                                                                    Read more 
                                                                    ... 
                                                                </a> 
                                                            </p> 
                                                        </div> 
                                                    </div> 
                                                </div> 
                                            } 
                                        } 


                                    </div> 
                                                } 

                                            } 
            } 

        </div> 





    </div> 
</div> 

<style> 
    .pager .active a { 
        background-color: #337AB7; 
        color: #FFF; 
        border: 0px; 
    } 
</style> 

<script> 

    function goTo(number) { 
        $('ul.pager li:eq(' + number + ') a').tab('show'); 
        upgradePreNext(number); 
    } 
    function upgradePreNext(number) { 
        if (number > 1) { 
            $('ul.pager li:eq(0)').attr("onclick", "goTo(" + (number - 1) + ")"); 
            $('ul.pager li:eq(0)').attr("class", "previous"); 
        } else { 
            $('ul.pager li:eq(0)').attr("class", "disabled"); 
        } 
        if (number < 5) { 
            $('ul.pager li:eq(6)').attr("onclick", "goTo(" + (number + 1) + ")"); 
            $('ul.pager li:eq(6)').attr("class", "next"); 
        } else { 
            $('ul.pager li:eq(6)').attr("class", "disabled"); 
        } 
    } 
    $(document).ready(function () { 
        $('li a').on('click', function (e) { 
            goTo((e.target.innerHTML) - 0); 
        }); 
    }); 

</script> 

输出将是：

您也可以下载示例代码。