0

我正在 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);

我想给这个动态创建的表分页。

4

2 回答 2

0

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

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

于 2013-02-14T09:45:20.737 回答
0

You'll want to create the paging links to select a specific page, next, previous, first, last or whatever you need. 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>

Note that all links have the css class "page-link".

On the server side, add a "page" parameter to your action so you know which page to fetch in the controller.

Now, back to the HTML code: the href of each link is the address where to fetch the data from and we can use this in our JavaScript code:

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

The nice thing about this approach is that you can make it easily fall back for clients that have JavaScript disabled: in the "GetBookChapterList" action, check if the request is an ajax request (Request.IsAjaxRequest()). If so, return the required JSON data. If not, render a normal, full page showing the selected page of the table.

This is generally a good approach: if possible, make sure the site works without JavaScript, then add JavaScript to improve it.

于 2013-02-14T09:54:45.090 回答