MVC 中的 Ajax 分页

Question

我正在尝试使用 MVC 中的 ajax 在我的表格下方实现分页。我正在使用 json 从控制器中检索数据，我也不想使用数据表。我看过很多文章，但发现在 ajax 中没有任何用处。需要帮助，请帮助。这是我检索表数据的方法：... ..................................................... ...

控制器

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




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

                return new 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>


    }

Answer 1

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

(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 表示索引值。因此，每次单击数据表下方的链接时，其 Id 都会指示索引值，并且 RecordsPerPage 会从 Dropdown 获取并发送对 Getdata() 函数的调用。

希望对你有帮助..