MVC custom Pagination (schedule jump page loading tips)

Before I published an MVC non-refresh page of the article, which is used in the Mvcpager control, but that the control is limited, the value can only be used pagedlist, all aspects are limited, freedom is not high enough, now or do MVC no refresh paging, But want to directly use IQueryable or IEnumerable value, and the interface is concise, customizable also high.

Since still use IQueryable value, then controller will have nothing to say, that is, when paging back to a partialview just. The key now is web page design and scripting. First of all, I want to achieve the effect of it:

I want to achieve the result is the search criteria and the title of a row, where the title left, search conditions on the right, add goods and pagination information for another row, where the Add commodity button left, paging information on the right, the code is as follows:

Where style row is the bootstrap style, Left_head and Right_head are the two I used to let them float around in the left and right:

But this is only the style problem, is not the focus, focus on the partial page _pageinfo:

<DivID= "PageInfo">    <Div><inputID= "Btnprevpage"class= "Btn Btn-default"type= "button"value= "Previous page" /></Div>    <Div><inputID= "Btnnextpage"class= "Btn Btn-default"type= "button"value= "Next Page" /></Div>    <Div><inputID= "Txtpageindex"name= "PageIndex"type= "text"class= "Form-control" /></Div>    <Div><inputID= "Btnjump"class= "Btn Btn-default"type= "button"value= "Jump" /></Div>    <DivID= "Pagenum"><spanID= "Spanpageindex"></span><span>/</span><spanID= "Spantotalpage"></span></Div></Div>

You can see that there is a certain amount of spacing between the nodes of the paging control, and the pagination numbers are lower, and the styles are as follows:

{    width: 43px;     Display: initial}  {    float: left;     Margin-right: 2px;}  {    margin-top: 15px;}

Look has been done, the lack of key script now, click the page jump can have jump page ah, bind the event:

Click the previous page next page do not jump to the page, call the jumping function can be:

As for the Showwarn warning box, please refer to my other article, jquery pop-up tips for a concise version.

What I need to explain is that my partial refresh paging is written like this:

The table's local page indexpartial after the call script to refresh the page:

You can see that the PageContent page class is used, and this class is described in my other article, General EF Framework, which is not described here. The key is to invoke the Refresh page method:

functionrefreshpage (PageIndex, totalpage) {if(Totalpage < 2) {        $(' #pageInfo '). Hide (); } Else {        if(PageIndex = = 1) {            $("#btnPrevPage"). Hide (); $("#btnNextPage"). Show (); } Else {            $("#btnPrevPage"). Show (); if(PageIndex = =totalpage) {                $("#btnNextPage"). Hide (); } Else {                $("#btnNextPage"). Show (); }        }        $("#spanPageIndex"). Text (PageIndex); $("#spanTotalPage"). Text (totalpage); $(' #txtPageIndex '). Val (PageIndex); $(' #pageInfo '). Show (); }}

Here I use when only one page to hide the paging control, if the current is the first page to hide the previous button, if the last page to hide the next page button, this is a person's preferences, you can change at will.

At this point the paging control is ready to be written. However, in the table page to jump when it is best to prompt is loading it, or may not know the page jump, or wait too long but do not know is still waiting. In this case, you need to put a mask layer first:

<id= "Loading">      <src= "/ Content/img/imgloading.gif "  alt=" Loading ... "/></Div  >

In the beginning, you want to hide the mask layer:

#loading{Background-color:#000;width:100%;Height:100%;Top:0;position:Absolute;Z-index:9999;Filter:Alpha (opacity=60);-moz-opacity:0.7;Opacity:0.7;Display:None;}#loading img{position:Absolute; Left:50%;Top:50%;margin:-50px; }

The #loading of a div is a mask layer, where the loading diagram is displayed in the center of the Mask layer:

Need to save the diagram directly above the graph bar, so that when the form is submitted to post the mask layer pulled out of the block, get the data and then pull him back to it:

function Loading () {    $ ("#loading"). FadeIn ();} function removeloading () {    $ ("#loading"). Hide ();} $ (' #formQuery '). On (' Submit ', Loading);

MVC custom Pagination (schedule jump page loading tips)