Jquery MVC中的Ajax分页

我正在尝试在MVC中使用ajax在我的表下实现分页。我正在使用json从controller检索数据，我也不想使用datatables。我看过很多文章，但没有发现有用的内容，因为我是ajax新手。需要帮助plz。以下是我检索表数据的方法：

控制器

public ActionResult Index()
            {
                return View();
            }




         public JsonResult Getdata()
            {
                List<tbl_Student> Studentlist = db.tbl_Student.ToList();

                return new JsonResult { Data = Studentlist, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }

public ActionResult Index（）
{
返回视图（）；
}
公共JsonResult Getdata（）
{
List Studentlist=db.tbl_Student.ToList（）；
返回新的JsonResult{Data=Studentlist，JsonRequestBehavior=JsonRequestBehavior.AllowGet}；
}

剃刀视图

@model IEnumerable<SchoolManagment.Models.tbl_Student>

    @{
        ViewBag.TitleHead = "STUDENTS LIST";
        ViewBag.TitleSmall = "LIST OF ALL CLASSES STUDENTS";
        Layout = "~/Views/Shared/_SchoolLayout.cshtml";
    }

<div class="panel border-primary no-border border-3-top" data-panel-control>
    <div class="panel-heading">
        <div class="panel-title">
            <h5>STUDENTS <small>with Descriptions</small></h5>
        </div>
    </div>
    <div id="targerdiv" class="panel-body">

    </div>
</div>



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

            loaddata();

        });

        function loaddata() {
            $('#targerdiv').html('Loading Data');

            $.ajax({
                url: '/Students/Getdata',
                type: 'GET',
                datatype: 'json',
                success: function (d) {
                    if (d.length > 0) {
                        var $data = $('<table class="table table-striped table-bordered"></table>');
                        var header = "<thead><tr><th class='col-md-1 text-center'>#</th><th class='col-md-1 text-center'>Roll No.</th><th class='col-md-2 text-center'>NAME</th><th class='col-md-3 text-center'>ACTIONS</th></tr></thead>";
                        $data.append(header);

                        var index = 0;

                        $.each(d, function (i, row) {
                            var $tbody = $('<tbody />');
                            var $row = $('<tr />');
                            $row.append($('<td class="text-center" />').html(index + i));
                            $row.append($('<td class="text-center" />').html(row.Roll_No));
                            $row.append($('<td />').html(row.Name));
                            $row.append($('<td class="text-center" />').html("<a href='/Department/Edit/" + row.ID + "' type='button' class='btn btn-success btn-xs btn-labeled'>EDIT<span class='btn-label btn-label-right'><i class='fa fa-edit'></i></span></a> <a href='/Department/Edit/" + row.ID + "' type='button' class='btn btn-success btn-xs btn-labeled'>DETAILS<span class='btn-label btn-label-right'><i class='fa fa-list'></i></span></a> <a href='/Pro/Save/" + row.ID + "' type='button' class='btn btn-danger btn-xs btn-labeled'>DELETE<span class='btn-label btn-label-right'><i class='fa fa-times'></i></span></a> "));
                            $tbody.append($row);
                            $data.append($tbody);

                        });

                        $('#targerdiv').html($data);
                    }

                    else {
                        var $noData = $('<div />').html('No Data Found');
                        $('#targerdiv').html($noData);
                    }

                },

                error: function () {
                    alert('Error Please Try Again');
                }
            });
        }



    </script>


    }

@model IEnumerable
@{
ViewBag.TitleHead=“学生列表”；
ViewBag.TitleSmall=“所有班级学生列表”；
Layout=“~/Views/Shared/_SchoolLayout.cshtml”；
}
有描述的学生
@节脚本{
$（文档）.ready（函数（）{
loaddata（）；
});
函数loaddata（）{
$（'#targetdiv'）.html（'加载数据'）；
$.ajax({
url:“/Students/Getdata”，
键入：“GET”，
数据类型：“json”，
成功：功能（d）{
如果（d.长度>0）{
变量$data=$（''）；
var header=“#卷号NAMEACTIONS”；
$data.append（表头）；
var指数=0；
$。每个（d，功能（i，行）{
变量$tbody=$（''）；
变量$row=$（''）；
$row.append（$（''）.html（index+i））；
$row.append（$（''）.html（row.Roll_No））；
$row.append（$（''）.html（row.Name））；
$row.append（$（“”）.html（“”）；
$tbody.append（$row）；
$data.append（$tbody）；
});
$（'#targetdiv'）.html（$data）；
}
否则{
var$noData=$（''）.html（'未找到数据'）；
$（'#targetdiv'）.html（$noData）；
}
},
错误：函数（）{
警报（“错误，请重试”）；
}
});
}
}

由于您没有提供任何分页代码，我无法从头生成所有代码，但我可以为您提供一个伪代码，您可以从中了解如何实现服务器端分页

（1） 函数的Getdata（）应该接受两个参数，如Getdata（int-RecordsPerPage，int-Index）

（2） 根据这些参数，您必须从数据库中查询特定数据，如如果index=3和RecordsPerPage=10，则必须从20-30查询数据

SELECT col1, col2, ...
FROM ...
WHERE ... 
ORDER BY -- this is a MUST there must be ORDER BY statement
-- the paging comes here
OFFSET     (index-1)*RecordsPerPage ROWS       -- skip 20 rows
FETCH NEXT RecordsPerPage ROWS ONLY; -- take 10 rows

（3） 服务器端应该有一个函数，它返回记录的总数，比如GetTotalNumberofRecords（）

（4） 客户端应该有下拉列表，它接受用户输入的每页记录值

现在

（5） 当您第一次发送对Getdata（）的调用时，您需要发送Index=0和RecordsPerPage=10，例如（由用户在下拉列表中设置）

（6） 您还需要发送对GetTotalNumberofRecords（）的调用，然后需要将该值除以RecordsPerPage值（由用户在下拉列表中设置）

（7） 假设GetTotalNumberofRecords（）返回100，用户设置的RecordsPerPage为10，然后除以100/10=10，您需要在表下创建10个链接，并使用这些链接附加一个onclick事件处理程序，链接id指示索引值。因此，每次单击datatable下面的链接时，其Id指示索引值，RecordsPerPage从下拉列表中获取，并发送对Getdata（）函数的调用

---

希望能有帮助

您没有进行任何分页-您的方法将返回所有记录。你还没有解释问题是什么或者你遇到了什么错误。实际上我不知道如何开始..我只是展示了如何检索我的数据…你明白了吗？不，我见过这种方法。这不是应用ajax。我不想在从一个页面移动到另一个页面时发回我的页面。