Ajax Pagination в MVC

Question

Я пытаюсь реализовать разбиение на страницы под моей таблицей, используя ajax в MVC.Я получаю данные из контроллера, используя json, и я также не хочу использовать datatables.Я видел много статей, но не нашел ничего полезного, поскольку я новичок в 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 };
            }

Razor View

@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 с этими ссылками, а идентификатор ссылки указывает значение индекса.Таким образом, каждый раз, когда щелкают ссылку под вашей таблицей данных, ее идентификатор указывает значение индекса, а RecordsPerPage берется из Dropdown и отправляет вызов функции Getdata ().

Надеюсь, это поможет ..