Question

我在mvc3.net中创建运行时表。从控制器我得到json集合，并在视图中根据json集合

创建运行时表

首先我只是初始化表

<div id="DisplayBookChapterList" class="fLeft per30 mr15">        
    <table class="contentTable" id="tblDisplayChapterList" >            
         </table>

在运行时，我通过下面的代码

填充表格行

$.getJSON("@Url.Action("GetBookChapterList", "CourseManagement")" + '/' + bookname,  function (data) {
$.each(data, function (key, val) {
                BookChapterlist += '<tr><td style="display:none" id=ChapterListBookID value=' + val.BookID + '>' + val.BookID + '</td><td>' + val.ChapterNo + ' </td><td>' + val.Title + '</td><td><input type=checkbox id="' + val.ChapterID + '"></td></tr>';

}
});               
$('#DisplayBookChapterList table').append(BookChapterlist);

我想对这个动态创建的表进行分页。

Answer 1

向GetBookChapterList操作方法添加可选的“Page”参数，并使GetBookChapterList返回该页面的数据。如果使用实体框架，请使用IQueryable上的Skip和Take方法来实现分页。

在浏览器中，渲染表格底部的下一页/上一页链接，获取并重新呈现下一页/上一页的数据。

Answer 2

您需要创建分页链接以选择特定页面，下一个，上一个，第一个，最后一个或任何您需要的页面。 E.g。

<ul>        
    @foreach (var page in Enumerable.Range(1, numPages)) {
        <li>@Html.ActionLink(page.ToString(), "GetBookChapterList", "CourseManagement", new {page}, new {@class = "page-link"})</li>
    }        
</ul>

请注意，所有链接都有css类“page-link”。

在服务器端，为您的操作添加“page”参数，以便您知道要在控制器中提取哪个页面。

现在，回到HTML代码：每个链接的href是从中获取数据的地址，我们可以在我们的JavaScript代码中使用它：

<script>
    $(function() {
        $(".page-link").on('click', function(e) {
            e.preventDefault();
            $.getJSON($(this).attr('href'), function(data) {
                console.log(data);
            });
        });
    });
</script>

这种方法的优点在于，对于禁用了JavaScript的客户端，您可以轻松退回：在“GetBookChapterList”操作中，检查请求是否是ajax请求（Request.IsAjaxRequest（））。如果是这样，请返回所需的JSON数据。如果没有，请呈现一个正常的完整页面，显示表格的选定页面。

这通常是一种很好的方法：如果可能，请确保网站无需JavaScript，然后添加JavaScript以改进它。

如何在mvc3.net中为表提供运行时分页

2 个答案: