Pagination has been used frequently in recent development processes, and today I'm trying to squeeze in some time to poke out my experience.

In web development, we usually use paging control to display data when displaying data list pages. Pagination is usually based on two different requirements. One is that the amount of data is not very large, but the page display is too long and looks uncomfortable. One is that the amount of data is too large to be read out in the database at one time, so paging is used to display the data.

The former is the so-called front-end paging, while the latter is the service-side paging.

The difference between the two is that front-end paging is to take out all the data, in order to facilitate users to view and display the data reasonably. Paging data on the front-end js. The server-side paging is based on the content of the current page to display, through the front-end parameters, get the corresponding page data for display. In short, front-end paging is paging data at the front-end, and service-side paging is paging data at the back-end.

Here's how to use layPage paging control and layPage paging control
Assume that the data objects returned in the background are as follows:

public class people{
    public string name{get;set;}=string.Empty;
    public int age{get;set;}=0;
}
//The data obtained is
List<people> plist;
//JsonConvert.SerializeObject() is a serialized object
return Json(JsonConvert.SerializeObject(plist));

1. Front-end paging

//Reference Paging Control
<link rel="stylesheet" type="text/css" href="/content/H-UI.Admin/lib/laypage/1.2/skin/laypage.css" />
<script type="text/javascript" src="~/content/H-UI.Admin/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
$(function(){
//get data
    $.post("/liveajax/getData",function(data){
       var loaddata=jQuery.parseJSON(data);//Converting background-acquired json objects to arrays
       loadData(loaddata);           
    })
})
function loadData(data){
    var nums = 10; //Number of occurrences per page

    //Simulated Rendering
    var render = function(data, curr){
    var arr = [],thisData = data.concat().splice(curr*nums-nums, nums);
    for(var i = 0; i < thisData.length; i++){
        var str ='<tr><td>thisData[i].name</td><td>thisData[i].age</td></tr>';//Assemble a row of data
      arr.push(str);
    }
    return arr.join('');
  };
  laypage({
    cont: 'page'//Location of Paging Display
    ,pages: Math.ceil(data.length/nums) //Get the total number of pages
    ,jump: function(obj){

      document.getElementById('pageBody').innerHTML = render(data, obj.curr);//pageBody: Location of paging content
    }
  });
}
</script>

2. Paging on the server side: the front-end passes in the current page number, display number and other request data, and the back-end database obtains the corresponding data according to the paging data. That is, database paging query

//Reference Paging Control
<link rel="stylesheet" type="text/css" href="/content/H-UI.Admin/lib/laypage/1.2/skin/laypage.css" />
<script type="text/javascript" src="~/content/H-UI.Admin/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
//@ ViewBag.TotalCount is the total number of data that is retrieved at initialization time
    $(function () {
        resetPage(@ViewBag.TotalCount, 1);
    });

    //Agreements: queryPara (parameter), pageQuery (query method), resetPage (reset paging)

    //Query parameters
    var queryPara = {
        page:1,//Page number
        psize:10,//Row number
    };
    //Paging query
    function pageQuery() {
        var queryUrl = '/liveajax/getData2';
        $.post(queryUrl, queryPara, function (data) {
            $("table.dataTable tbody").html(data);//Objects can be assembled directly here, or data can be passed into a piecewise graph as a model parameter using a piecewise view.
            resetPage(@ViewBag.TotalCount, queryPara.page);
        });
    }
    //Reset Paging (Jump Paging)
    function resetPage(recordCount, pageIndex) {
        var pages = recordCount % queryPara.psize == 0 ? recordCount / queryPara.psize : recordCount / queryPara.psize + 1;
        laypage({
            cont: "page", //Containers. Values support ID names, native dom objects, and jquery objects. [If the container is]: <div id= "page1"> </div>
            pages: pages, //The total number of pages obtained through the background
            curr: pageIndex, //Current page
            jump: function (obj, first) { //Callback after triggering paging
                if (!first) { //Click on the jump trigger function itself and pass the current page: obj.curr
                    queryPara.page = obj.curr;
                    pageQuery();
                }
            }
        });
    }
  </script>