Question

我想知道最简单的方法是什么。这是我的场景：我有一个显示用户审核历史记录的应用程序。目前，这被设置为仅返回100条记录，并且仅显示其中的20条记录。有没有一种简单的方法来使用js来实现显示所有100个条目的分页，然后当单击“下一页”按钮时它将获取接下来的100个条目？这是代码的样子：

在UserHelper中我有：

public AuditInfo GetAuditInfo(SearchInfo searchInfo)
    {
        AuditInfo auditInfo = new AuditInfo();
        if (searchInfo != null)
        {
            List<AuditRecord> auditRecords =
                UserManager.GetAuditRecords(record => record.Username == searchInfo.UserName,
                                                records => records.OrderByDescending(record => record.Date), 0, 100);
            auditInfo.AuditRecords = auditRecords;
        }
        return auditInfo;
    }

在控制器中我有：

public ActionResult AuditHistory(String username)
    {
        SearchInfo searchInfo = new SearchInfo { UserName = username };

        AuditInfo auditInfo = _userHelper.GetAuditInfo(searchInfo);
        Response.CacheControl = "no-cache";
        Response.AddHeader("Pragma", "no-cache");
        Response.Expires = -1;

        return PartialView(auditInfo);
    }

视图模型只返回一个List AuditRecords，并在视图中迭代它们，并为数据表添加一些javascript：

<script type="text/javascript">
$(document).ready(function () {

    $('#tbl_std_documents').dataTable({
        "bFilter": false,
        "bPaginate": false,
        "bSort": false,
        "bInfo": false
    });

    $("a.comment").fancybox({
        'type': 'inline',
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'hideOnContentClick': true,
        'speedIn': 600,
        'speedOut': 200,
        'overlayShow': false
    });

});
</script>

启用bPaginate和bFilter可以让我一次翻阅100条返回的记录10，并允许根据搜索框进行过滤。我想要的是能够一次查看100个条目，并具有从数据库中获取下一个条目的功能。谢谢你的帮助！

Answer 1

您可以使用AJAX调用从数据库中获取其他记录并将其作为JSON对象返回。

这是JSON方法的一个示例：

[HttpPost]
public ActionResult GetRows(int page, int rowsPerPage) 
{
    var data = //grab data from database
    return Json(data);
}

这是javascript调用：

$.ajax({
    url: '@Url.Action("GetRows")',
    type: 'POST',
    data: { 'page': 2, 'rowsPerPage': 100  },
    success: SuccessHandler,
    error: OnFailHandler
});

function SuccessHandler(data) 
{     
    //data has the same properties like the object you returned in JSON method on server
    //you probably want to update your datatable here with new data
}

希望它有所帮助。祝你好运！

Answer 2

您可以使用MVCPager进行此操作。 http://mvcpager.codeplex.com/

这样做的好处是它使用了PagedList类型。看看它，它会给你你需要的东西。

使用JavaScript进行MVC 4分页

2 个答案: