dirPagination.js how to handle pagination at server side.

Question

User-1609546788 posted

Hi

I am using dirPagination.js which is doing the pagination at client side very well in angularjs +Bootstrap +MVC5.

how to handle pagination at server side angularjs +Bootstrap +MVC5. angularUtils.directives.dirPagination

For Example: Currently all records coming at a time from Database . we want 100 records in one page .and on click of 2nd Page (101 to 200 ) records has to come from database.

<script src="https://rawgit.com/michaelbromley/angularUtils-pagination/master/dirPagination.js"></script>

Answer 1

User475983607 posted

andry18, this is code that you need to design and write.  Your client side code must tell the server what records to return and the server code uses the input from the client to return the records.  

The dirPagination support documentation indicates the library can handle async data.  Start by reading the documentation as it appears rather extensive.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#working-with-asynchronous-data

Answer 2

User839733648 posted

Hi andry18,

According to your description, I suggest that you could handle and return json data in the controller and use Ajax to get the data.

controller is like:

        public ActionResult GetDataList( int PageNo, int PageSize)
        {
            Repository obj = new Repository();//The database class
            IEnumerable<TestData> TestData = null;
            TestData = obj.GetTestData(PageNo, PageSize);
            return Json(TestData, JsonRequestBehavior.AllowGet);
        }

how to get the data.

var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
app.controller('listData', function ($http) {
    var vm = this;
    vm.listdata = [];
    vm.pageno = 1; 
    vm.total_count = 0;
    vm.itemsPerPage = 100; //set 100 initially
    vm.display = false;
    vm.getData = function (pageno) {
        $http.get("/Home/GetDataList/" , { params: { PageNo: pageno, PageSize: vm.itemsPerPage } }).then( function (response) {
            vm.listdata = response.data;
            vm.total_count = response.data[0].TotalRecords;
            vm.display = true;
        });
    };
    vm.getData(vm.pageno);
});

You could refer to this article to handle pagination at server side step by step:

http://www.asparticles.com/Articles/105/angularjs-server-side-pagination-in-asp-net-mvc

Best Regards,

Jenifer