Question

我使用下面的代码在我的视图中渲染分页。它工作正常。但我找不到任何文档将此分页与相应的表关联起来。现在我表中的所有行都在加载。我很确定在某个地方我需要指定表来关联分页。任何想法？

var options = {
        currentPage: 1,
        totalPages: 1000,
        bootstrapMajorVersion: 3,

    }

    $('#myPager').bootstrapPaginator(options);

视图

<ul class="pagination" id="myPager">
</ul>

Answer 1

bootstrap分页组件没有开箱即用的客户端分页逻辑，你必须自己编写。

如果您使用 bootstrap-paginator.js ，您应该像这样执行ajax请求：

var options = {
        currentPage: 3,
        totalPages: 10,
        onPageClicked: function(e,originalEvent,type,page){
            $('#table').html(htmlData);

            $.ajax({
                method: "POST",
                url: "GetTableDataUrl",
                data: { page: page }
            })
            .done(function( htmlData ) {
                $('#table').html(htmlData);
            });
        }
    }

$('#example').bootstrapPaginator(options);

您的MVC操作应如下所示：

    [HttpPost]
    public ActionResult GetTableDataUrl(int page)
    {
        // retrieve data for the wanted page
        return PartialView("");
    }

我建议您使用此Nuget包： PagedList.Mvc 它包含一组Html助手，允许执行分页，将所需的页码作为参数传递给action，并相应地呈现bootstrap组件。

请查看ASP.NET

上的官方教程

将Boostrap分页与表联系起来

1 个答案: