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

我需要使用jquery插件（如twbsPagination或jqPagination）实现客户端分页。但它不能正常工作，并显示了整个列表， 如何显示正确的行数，谢谢您的帮助

型号：

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>
}

行动：

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>
}

查看：

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>
}

@foreach（模型中的变量项）
{
@项目名称
@item.City，@item.Country

}
@节脚本{
$（文档）.ready（函数（）{
$（“#分页演示”）.twb分页({
总页数：101，
浏览网页：10，
onPageClick:功能（事件，页面）{
$（'页面内容'）.text（'页面'+页面）；
}
});
});
}

您似乎试图在页面加载时通过分页显示表数据。我没有使用jquery插件。只需给您的表class=“paginated”，并在视图中添加以下代码

$（文档）.ready（函数（）{
$（'table.paginated'）。每个（函数（）{
var-currentPage=0；
var numPerPage=10；
$（'.pager'）.empty（）；
var$表=$（此）；
$table.bind（'repaginate'，函数（）{
$table.find（'tbody tr'）.hide（）.slice（当前页面*numPerPage，（当前页面+1）*numPerPage.show（）；
});
$table.trigger（'repaginate'）；
var numRows=$table.find（'tbody tr'）.length；
var numPages=Math.ceil（numRows/numPerPage）；
变量$pager=$（''）；
对于（变量页面=0；页面

分区寻呼机{
文本对齐：居中；
利润率：1米0；
}
分区寻呼机跨度{
显示：内联块；
宽度：1.8em；
高度：1.8em；
线高：1.8；
文本对齐：居中；
光标：指针；
背景：#000；
颜色：#fff；
右边距：0.5em；
}
分区寻呼机span.active{
背景：#c00；
}

您似乎试图在页面加载时通过分页显示表数据。我没有使用jquery插件。只需给您的表class=“paginated”，并在视图中添加以下代码

$（文档）.ready（函数（）{
$（'table.paginated'）。每个（函数（）{
var-currentPage=0；
var numPerPage=10；
$（'.pager'）.empty（）；
var$表=$（此）；
$table.bind（'repaginate'，函数（）{
$table.find（'tbody tr'）.hide（）.slice（当前页面*numPerPage，（当前页面+1）*numPerPage.show（）；
});
$table.trigger（'repaginate'）；
var numRows=$table.find（'tbody tr'）.length；
var numPages=Math.ceil（numRows/numPerPage）；
变量$pager=$（''）；
对于（变量页面=0；页面

分区寻呼机{
文本对齐：居中；
利润率：1米0；
}
分区寻呼机跨度{
显示：内联块；
宽度：1.8em；
高度：1.8em；
线高：1.8；
文本对齐：居中；
光标：指针；
背景：#000；
颜色：#fff；
右边距：0.5em；
}
分区寻呼机span.active{
背景：#c00；
}

但分页中没有任何“上一页”和“下一页”指针。。。我该怎么做@但是分页中没有任何“Prev”和“Next”指针。。。我该怎么做@阿里