Question

我需要使用像twbsPagination或jqPagination这样的jquery插件实现客户端分页。但它无法正常工作并向我显示整个列表，如何显示正确的行数，谢谢你的帮助。

型号：

public class Restaurant
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string City { get; set; }
        public string Country { get; set; }
    }

行动：

public ActionResult ClientSidePaging(string name = null)
        {
            var model = CreateModel(name);
            return View(model);
        }

查看：

@foreach (var item in Model)
{
    <div id="page-content">
        <h4>@item.Name</h4>
        <div>
            @item.City, @item.Country
        </div>
        <hr/>
    </div>
}
    <div id="pagination-demo" class="pagination-sm"></div>

@section scripts {
    <script type="text/javascript">

        $(document).ready(function () {

            $('#pagination-demo').twbsPagination({
                totalPages: 101,
                visiblePages: 10,
                onPageClick: function(event, page) {
                    $('#page-content').text('Page ' + page);
                }
            });

        });
    </script>
}

Answer 1

似乎你试图在页面加载时使用分页显示表数据。我已经完成了它而不使用jquery插件。只需给你的表类=＆＃34;分页＆＃34;并在您的视图中添加以下代码。

＆＃13;

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
  $('table.paginated').each(function () {
                            var currentPage = 0;
                            var numPerPage = 10;
                            $('.pager').empty();
                            var $table = $(this);
                            $table.bind('repaginate', function () {
                                $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
                            });
                            $table.trigger('repaginate');
                            var numRows = $table.find('tbody tr').length;
                            var numPages = Math.ceil(numRows / numPerPage);
                            var $pager = $('<div class="pager"></div>');
                            for (var page = 0; page < numPages; page++) {
                                $('<span class="page-number"></span>').text(page + 1).bind('click', {
                                    newPage: page
                                }, function (event) {
                                    currentPage = event.data['newPage'];
                                    $table.trigger('repaginate');
                                    $(this).addClass('active').siblings().removeClass('active');
                                }).appendTo($pager).addClass('clickable');
                            }
                            $pager.insertAfter($table).find('span.page-number:first').addClass('active');
                        });
  });
</script>

＆＃13;

<style>
 div.pager {
    text-align: center;
    margin: 1em 0;
}

div.pager span {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    background: #000;
    color: #fff;
    margin-right: 0.5em;
}

div.pager span.active {
    background: #c00;
}

</style>

＆＃13;

如何在asp.net mvc中使用jqPagination或twbs-pagination实现客户端分页

1 个答案: