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

オプションの「Page」パラメーターをGetBookChapterListアクションメソッドに追加し、GetBookChapterListがそのページのデータを返すようにします。エンティティフレームワークを使用する場合は、IQueryableのSkipメソッドとTakeメソッドを使用してページングを実装します。

ブラウザで、テーブルの下部にある次/前のページのリンクをレンダリングして、次/前のページのデータを取得して再レンダリングします。

于 2013-02-14T09:45:20.737 に答える
0

ページングリンクを作成して、特定のページ、次、前、最初、最後、または必要なものを選択する必要があります。例えば

<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」があることに注意してください。

サーバー側で、アクションに「ページ」パラメーターを追加して、コントローラーでフェッチするページがわかるようにします。

ここで、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を追加して改善してください。

于 2013-02-14T09:54:45.090 に答える