1

大丈夫。だから私はユーザーのリストを保持するテーブルを持っています。

<table id="UserTableContainer">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
</table>

ページを読み込むときに、JSONメソッドを呼び出して、サーバーからユーザーのリストを取得します。

$(function () {
    $.getJSON(
        '/Account/UserList',
        null,
        function (data) {
            $.each(data, function (i, item) {
                PrintUsers(item);
            });
        });
});

私のPrintUsers-methodは、jQueryテンプレートを使用して、テーブル内の各行にユーザーを追加します。

function PrintUsers(item) {
$.template('userList', '<tr>\
 <td>${Firstname}</td>\
 <td>${Lastname}</td>\
 </tr>');

$.tmpl('userList', item).appendTo("#UserTableContainer");

サーバー側では、APIからリストを取得します。

public JsonResult UserList()
{
    try
    {
        List<User> users;         

        users = LoadUser(new UserFilter());
        }
        return Json(users, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(JsonRequestBehavior.DenyGet);
    }
}

リストを取得するために使用しているAPIには、ページングの機能がすでに組み込まれています。intstartIndexとintpageSizeをUserFilter（）オブジェクトに渡すオーバーロードオプションがあります。

テーブルにページング機能を追加するには、jQueryとajaxの呼び出しに何を追加する必要がありますか？私はどこから始めるべきか迷っています。

4

1 に答える 1

0

ページが最初に生成されたときにページ数がわかっていると仮定すると、次のようなページングリストのリストブロックを作成できます-

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ...
</ul>

次に、jQueryを次のように変更できます-

function getPage(startPage, selectedPageSize) {
    $.getJSON(
        '/Account/UserList?startPage=' + startPage + '?pageSize=' + selectedPageSize,
        null,
        function (data) {
            $.each(data, function (i, item) {
                PrintUsers(item);
            });
        }
    );
}

var pageSize = 10;
$(document).ready(function() {
    getPage(0, pageSize);
});

$(function(){
    $('li').click(function() {
        var page = $(this).text();
        getPage(page, pageSize);
    });
});
于 2012-09-13T10:52:21.793 に答える