Pure Handwriting Paging control Css+js+sql

Although the DataPager with the ListView can achieve pagination display, but sometimes because of the development environment and other problems can not be used DataPager control, it is necessary to manually write a paging control, of course, the most important is the universality.

First, take a look at the display of my paging control:

Simple description: red background for the current page, the white red Word is to select a new page, a total of 1236 pages, the default starting from the 1th page, the page length contains "..." A total of 11, there are full display, unilateral ellipsis and the two sides omit three modes.

After you have carefully read the results and understand the corresponding changes in the paging, we will start making this page:)

First step) Get the data result set, organize the paging SQL

First of all, you'll definitely get a dynamic result set by a SQL statement or a stored procedure, and here's an example of an SQL statement:

Select * from Table order by A1,A2

Important You must index the field used in its order by, or it will significantly affect the performance of its SQL statements

Then, we use the row_number () over the highest paging efficiency to Write this page of paged SQL

Select *  from (    Selectover (order by  a1,a2) rowno      from Table  where between @rowno1 and @rowno2   

Second step) design the style of the pagination control

Let's first use HTML+CSS to make a page with a simulation effect:

<CenterID= "Pager">    <aclass= "Pagerbtn">Previous page</a>    <aclass= "Pagercurrent">1</a>    <aclass= "Pagerbtnnum">2</a>    <aclass= "Pagerbtnnum">3</a>    <spanclass= "Pagernone">......</span>    <aclass= "Pagerbtn">Next page</a></Center>

CSS style as follows, you can adjust the period size or color according to your needs:

/*page Out*/#pager{Font:13px tahoma,simsun,arial;Color:#666}#pager a{text-decoration:None;}#pager A, #pager span{margin:0px 5px;}#pager. Pagerbtn,.pagerbtnnum{Border:#ccc 1px solid;background:#fff;padding:1px 5px;cursor:Pointer}#pager. Pagerbtn:hover{Color:#FD6D01}#pager. Pagerbtnnum:hover{Color:#FD6D01;Border-color:#FD6D01;}#pager. Pagerbtnclick{Border:#FD6D01 1px solid;background:#fff;padding:1px 5px;Color:#FD6D01;}#pager. Pagercurrent{Border:#FD6D01 1px solid;padding:1px 5px;Color:#FD6D01;background:#FFEDE1;Font-weight:Bold;}#pager. Pagernone{font-family:Song Body;}

After the above two steps to test to see, after adjusting their favorite style, we have to put a literal control on the page, and then splicing the above HTML code in the background

Step three) organize the required methods and JS

Before you do, clean up the three scenarios that are required to display the paging:

1) show ...

Private string Pagernone () {    return"<span class= ' pagernone ' >......</span>" ;}

2) display a single page number (parameter is page i)

Private string Pagerchild (int  i) {    return"<a class= ' pagerbtnnum ' onclick=\" Urlparamchange (' P ','") \" >"</a> " ;}

3) show loop number of loops (the parameter is the current page index, start page str, ending page end), and if not the current page, the clickable page number is displayed. When clicked, the page number is placed in the URL's parameters, and the current page is refreshed to display the new paging data.

Private stringPagerchilds (intIndexintStrintend) {StringBuilder SB=NewStringBuilder ();  for(inti = str; I <= end; i++)    {        if(i = =index) sb. Append ("<a class= ' pagercurrent ' >"+ i +"</a>"); Elsesb. Append ("<a class= ' pagerbtnnum ' onclick=\ "this.classname= ' Pagerbtnclick '; Urlparamchange (' P ',"+ i +") \ ">"+ i +"</a>"); }    returnsb. ToString ();}

Add the following JS code to the page:

//Replace URL parameter valuefunctionUrlparamchange (par,par_value) {varURL =window.location.href; varPartxt = par + ' = ' +Par_value; varRe = eval ('/(' + par+ ' =) ([^&]*)/gi ');//' /\\ ' +par+ ' =[^&]*/ '        if(Url.match (RE))//with ParametersURL =Url.replace (re,partxt); Else//parameters not includedurl = url+ ' & ' +Partxt;  This. location =URL;}

Fourth step) Background splicing pagination HTML and displayed in the foreground

Next is the most important part of the paging logic, first look at what you need to set the values:

intPageSize =Ten;//number of rows per pageintRowbeg =1;//default start line numberintRowend = pageSize;//default end line numberstringUrl_p = request.querystring["P"];//Page Numberif(Url_p! =NULL) {Rowbeg= (Convert.ToInt32 (url_p)-1) * PageSize +1; Rowend= Convert.ToInt32 (url_p) *pageSize;}

Put SQL into the DataTable type of DT:

intRowCount = dt. Rows.Count;//number of data rowsif(dt! =NULL&& RowCount >0){     intPageCount = Convert.ToInt32 (math.ceiling (RowCount *1.0/pageSize));//Total Pages      intPagemaxshow = One;//maximum number of pages, minimum 7 pages, odd best      if(PageCount >1)     {         intPageIndex = (Url_p = =NULL?1: Convert.ToInt32 (url_p)); StringBuilder Sbpager=NewStringBuilder (); Sbpager.append ("<center id= ' pager ' >"); //Show All           if(PageCount <=pagemaxshow) sbpager.append (Pagerchilds (PageIndex,1, pagemaxshow)); //Omit right           Else if(PageIndex <= Pagemaxshow-3) {sbpager.append (Pagerchilds (PageIndex,1, Pagemaxshow-2));               Sbpager.append (Pagernone ());         Sbpager.append (Pagerchild (PageCount)); }         //Omit left           Else if(PageIndex > Pagecount-pagemaxshow +3) {sbpager.append (Pagerchild (1));                Sbpager.append (Pagernone ()); Sbpager.append (Pagerchilds (PageIndex, PageCount-Pagemaxshow +3, PageCount)); }         //Omit both sides           Else{sbpager.append (Pagerchild (1));                Sbpager.append (Pagernone ()); Sbpager.append (Pagerchilds (PageIndex, PageIndex-(Pagemaxshow-4) /2, PageIndex + (Pagemaxshow-4) /2));                Sbpager.append (Pagernone ());          Sbpager.append (Pagerchild (PageCount)); } sbpager.append ("</center>");  This. Lpager.text =sbpager.tostring ();}

The above code simply says, pagination shows a total of four kinds of situations:

1) when total pages <= max pages: Show all page numbers

2) When the current page <= maximum number of pages-3: Display the page with ellipses on the right (-3 is because the right side has the last page, ellipsis, the left page of the ellipsis)

3) When current page > total pages-max pages + 3: Displays the number of ellipses on the left (+3 is because there is the first page on the left, the ellipsis, the number on the right of the ellipsis)

4) Other cases, the page with ellipses on both sides is displayed

Congratulations, now you're done!

Pure Handwriting Paging control Css+js+sql