MVC中的Ajax分页

Question

I m trying to Implement Pagination below my table using ajax in MVC . I m retreiving data from controller using json and i also don't want to use datatables.I have seen many articles but found no useful as i m new in ajax.Need Help plz.Here is how i retrieve my table data:........................................................

CONTROLLER

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

As you have not provided any code for pagination , i can't produce all code from scratch but i can provide you a pseudocode, you can have an idea from it that how to implement server side pagination.

(1) your Getdata() function should accept two parameters like Getdata(int RecordsPerPage, int Index)

(2) Based on these parameters you have to query the specific data from you db, like if index=3 and RecordsPerPage=10 then you have to query the data from 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) There should be a function on your server side which returns the Total number of Records like GetTotalNumberofRecords()

(4) There should be Dropdown on client side which takes the user input for Records per page value.

Now ..

(5) when you send a call to Getdata() for first time you need to send Index=0 and RecordsPerPage=10 e.g(set by user in dropdown)

(6) you need to send a call to GetTotalNumberofRecords() as well , then you need to divide this value by RecordsPerPage value (set by user in dropdown)

(7) suppose GetTotalNumberofRecords() returns 100 and RecordsPerPage set by user is 10 then dividing 100/10=10 and you need to create 10 links below your table , and attach an onclick event handler with these links , and the link id indicates the index value. So every time a link below your datatable is clicked , its Id indicates the index value and RecordsPerPage is taken from Dropdown and send a call to Getdata() function.

Hope it helps ..