If you have not used these things, I believe that reading this blog will be helpful to you, if there are any questions do not understand or there is no problem with bugs, please feel free to contact me,
At the same time also welcome more experts to give some advice, I do not recommend the growth in the spray.
I qq:364175837
Objective
I believe many friends have used, jquery paging plug-ins, I used to jquery.paper this, if interested can leave QQ, I sent a simple example source to you.
The code was done in a hurry in the evening, so it was not optimized, but it was used as an example to combine a combination of these knowledge. Good nonsense not much to say, directly on the code.
Vs2010+sql2005express
Body
First we create a generic handler to read the contents of the database and get the return value.
Create a file, Getdata.ashx.
I'm using the stored procedures here, the stored procedures will be glued to the following, as the data is only an example, you can read the data according to the requirements
The code is as follows:
Copy Code code as follows:
<%@ WebHandler language= "C #" class= "GetData"%>
Using System;
Using System.Web;
Using System.Data.SqlClient;
Using System.Data;
Using System.Collections.Generic;
Using System.Web.Script.Serialization;
public class Getdata:ihttphandler {
public void ProcessRequest (HttpContext context) {
Context. Response.ContentType = "Text/plain";
var PageIndex = context. request["PageIndex"];
String connectionString = @ "Data source=kuse\sqlexpress;initial catalog=bookshop;integrated security=true";
Determines whether the current index exists, and if it does not exist, gets the total number of records.
if (string. IsNullOrEmpty (PageIndex))
{
Get the SQL statement for the total number of query records
String sql = "SELECT count ( -1) from books";
int count = 0;
Int. TryParse (Sqlhelper.executescalar (connectionString, System.Data.CommandType.Text, SQL, NULL). ToString (), out count);
Context. Response.Write (count);
Context. Response.End ();
}
When data is obtained from the index
Else
{
int currentpageindex = 1;
Int. TryParse (PageIndex, out CurrentPageIndex);
sqlparameter[] parms = new sqlparameter[] {
New SqlParameter ("@FEILDS", sqldbtype.nvarchar,1000),
New SqlParameter ("@PAGE_INDEX", sqldbtype.int,10),
New SqlParameter ("@PAGE_SIZE", sqldbtype.int,10),
New SqlParameter ("@ORDERTYPE", sqldbtype.int,2),
New SqlParameter ("@ANDWHERE", sqldbtype.varchar,1000),
New SqlParameter ("@ORDERFEILD", sqldbtype.varchar,100)
};
Parms[0]. Value = "*";//Get all fields
PARMS[1]. Value = pageindex;//Current page index
PARMS[2]. Value = 10;//Page size
PARMS[3]. Value = 0;//Ascending order
PARMS[4]. Value = "";//Condition statement
PARMS[5]. Value = "ID";//Sort field
list<book> list = new list<book> ();
using (SqlDataReader SDR = Sqlhelper.executereader (connectionString, CommandType.StoredProcedure, "pagination", parms ))
{
while (SDR. Read ())
{
List. ADD (new book {Title = sdr[2]. ToString (), Auhor = sdr[2]. ToString (), publishdate = Sdr[4]. ToString (), ISBN = Sdr[5]. ToString ()});
}
}
Context. Response.Write (New JavaScriptSerializer (). Serialize (list). ToString ());//JSON format
}
}
public bool IsReusable {
get {
return false;
}
}
}
public class Book
{
public string Title {get; set;}
public string Auhor {get; set;}
public string Publishdate {get; set;}
public string ISBN {get; set;}
}
Display Data page----asynchronous request fetch data, based on jquery
Create Page show.htm
Copy Code code as follows:
<body>
<div >
<table id= "Content" >/* Display data content * *
</table>
<div id= "Pager" class= "Yahoo2" ></div>/* display the paging bar * *
</div>
</body>
JS Code
Copy Code code as follows:
$ (function () {
$.post ("Getdata.ashx", NULL, function (data) {
var total = data;
Pageclick (1, Total, 3);
});
Pageclick = function (PageIndex, total, spaninterval) {
$.ajax ({
URL: "Getdata.ashx",
Data: {"PageIndex": PageIndex},
Type: "Post",
DataType: "JSON",
Success:function (data) {
Index starting from 1
Convert current page index to int type
var intpageindex = parseint (PageIndex);
Get a table showing data
var table = $ ("#content");
Clear the contents of the table
$ ("#content tr"). Remove ();
Add content to a table
for (var i = 0; i < data.length; i++) {
Table.append (
$ ("<tr><td>" +
Data[i]. Title
+ "</td><td>" +
Data[i]. Auhor
+ "</td><td>" +
Data[i]. Publishdate
+ "</td><td>" +
Data[i]. Isbn
+ "</td></tr>")
);
}//for
Create a paging
Total number of total records results
var PageS = Total
if (pages% = 0) pages = PAGES/10;
else PageS = parseint (TOTAL/10) + 1;
var $pager = $ ("#pager");
Clear the contents of the page div
$ ("#pager span"). Remove ();
$ ("#pager a"). Remove ();
Add first page
if (Intpageindex = 1)
$pager. Append ("<span class= ' disabled ' > first page </span>");
else {
var first = $ ("<a href= ' javascript:void (0) ' first= '" + 1 + "' > Page One </a>"). Click (function () {
Pageclick ($ (this). attr (' a '), total, spaninterval);
return false;
});
$pager. Append (a);
}
Add Previous Page
if (Intpageindex = 1)
$pager. Append ("<span class= ' disabled ' > Prev </span>");
else {
var pre = $ ("<a href= ' javascript:void (0) ' pre= '" + (intPageIndex-1) + "' > Prev </a>"). Click (function () {
Pageclick ($ (this). attr (the ' pre '), total, spaninterval);
return false;
});
$pager. Append (pre);
}
Format pagination Here's what you want to do with your needs.
var interval = parseint (spaninterval); Set interval
var start = Math.max (1, intpageindex-interval); Set Start Page
var end = Math.min (Intpageindex + interval, PageS)/set last page
if (Intpageindex < interval + 1) {
End = (2 * interval + 1) > PageS? PageS: (2 * interval + 1);
}
if ((Intpageindex + interval) > PageS) {
Start = (PageS-2 * interval) < 1? 1: (pageS-2 * interval);
}
Generate page numbers
for (var j = start, J < end + 1; j + +) {
if (j = = Intpageindex) {
var spanselectd = $ ("<span class= ' current ' >" + j + "</span>");
$pager. Append (SPANSELECTD);
}//if
else {
var a = $ ("<a href= ' javascript:void (0) ' >" + j + "</a>"). Click (function () {
Pageclick ($ (this). Text (), total, spaninterval);
return false;
});
$pager. Append (a);
}//else
}//for
Previous page
if (Intpageindex = total) {
$pager. Append ("<span class= ' disabled ' > next page </span>");
}
else {
var next = $ ("<a href= ' javascript:void (0) ' next= '" + (Intpageindex + 1) + "' > Next </a>"). Click (function () {
Pageclick ($ (this). attr ("Next"), Total, spaninterval);
return false;
});
$pager. Append (next);
}
Last page
if (Intpageindex = = PageS) {
$pager. Append ("<span class= ' disabled ' > last page </span>");
}
else {
var last = $ ("<a href= ' javascript:void (0) ' last= '" + pages + "' > Final page </a>"). Click (function () {
Pageclick ($ (this). attr (' last '), total, spaninterval);
return false;
});
$pager. append (last);
}
}//sucess
}); Ajax
}; function
}); Ready
Pagination style----If you are interested, I also have 20 sets of pagination style, you can leave the QQ
Copy Code code as follows:
<style type= "Text/css" >
Div.yahoo2 {
padding-right:3px; padding-left:3px; Font-size:0.85em; padding-bottom:3px; margin:3px; padding-top:3px; Font-family:tahoma,helvetica,sans-serif; Text-align:center
}
Div.yahoo2 A {
Border-right: #ccdbe4 1px solid; padding-right:8px; background-position:50% Bottom; Border-top: #ccdbe4 1px solid; padding-left:8px; padding-bottom:2px; Border-left: #ccdbe4 1px solid; COLOR: #0061de; margin-right:3px; padding-top:2px; Border-bottom: #ccdbe4 1px solid; Text-decoration:none
}
Div.yahoo2 A:hover {
Border-right: #2b55af 1px solid; Border-top: #2b55af 1px solid; Background-image:none; Border-left: #2b55af 1px solid; COLOR: #fff; Border-bottom: #2b55af 1px solid; Background-color: #3666d4
}
Div.yahoo2 a:active {
Border-right: #2b55af 1px solid; Border-top: #2b55af 1px solid; Background-image:none; Border-left: #2b55af 1px solid; COLOR: #fff; Border-bottom: #2b55af 1px solid; Background-color: #3666d4
}
Div.yahoo2 Span.current {
padding-right:6px; padding-left:6px; Font-weight:bold; padding-bottom:2px; COLOR: #000; margin-right:3px; padding-top:2px
}
Div.yahoo2 span.disabled {
Display:none
}
Div.yahoo2 A.next {
Border-right: #ccdbe4 2px solid; Border-top: #ccdbe4 2px solid; margin:0px 0px 0px 10px; Border-left: #ccdbe4 2px solid; Border-bottom: #ccdbe4 2px solid
}
Div.yahoo2 A.next:hover {
Border-right: #2b55af 2px solid; Border-top: #2b55af 2px solid; Border-left: #2b55af 2px solid; Border-bottom: #2b55af 2px solid
}
Div.yahoo2 A.prev {
Border-right: #ccdbe4 2px solid; Border-top: #ccdbe4 2px solid; margin:0px 10px 0px 0px; Border-left: #ccdbe4 2px solid; Border-bottom: #ccdbe4 2px solid
}
Div.yahoo2 A.prev:hover {
Border-right: #2b55af 2px solid; Border-top: #2b55af 2px solid; Border-left: #2b55af 2px solid; Border-bottom: #2b55af 2px solid
}
</style>
Paging Stored Procedure---pagination
Copy Code code as follows:
CREATE PROCEDURE [dbo]. [Pagination]
@FEILDS VARCHAR (1000),--the field to display
@PAGE_INDEX INT,--Current page number
@PAGE_SIZE INT,--Page size
@ORDERTYPE BIT,--when 0 is desc when 1 o'clock ASC
@ANDWHERE VARCHAR (1000) = ',--where statement without adding where
@ORDERFEILD VARCHAR (100)--sorted fields
As
DECLARE @EXECSQL VARCHAR (2000)
DECLARE @ORDERSTR VARCHAR (100)
DECLARE @ORDERBY VARCHAR (100)
BEGIN
Set NOCOUNT on
IF @ORDERTYPE = 1
BEGIN
SET @ORDERSTR = ' > (SELECT MAX ([' + @ORDERFEILD + ']) '
SET @ORDERBY = ' ORDER BY ' + @ORDERFEILD + ' ASC '
End
ELSE
BEGIN
SET @ORDERSTR = ' < (SELECT MIN ([' + @ORDERFEILD + ']) '
SET @ORDERBY = ' ORDER BY ' + @ORDERFEILD + ' DESC '
End
If @PAGE_INDEX = 1--Runs directly when the page number is the first page, increasing speed
BEGIN
IF @ANDWHERE = '
SET @EXECSQL = ' SELECT top ' +str (@PAGE_SIZE) + ' + @FEILDS + ' to [books] ' + @ORDERBY
ELSE
SET @EXECSQL = ' SELECT top ' +str (@PAGE_SIZE) + ' + @FEILDS + ' from [books] WHERE ' + @ANDWHERE + ' + @ORDERBY
End
ELSE
BEGIN
IF @ANDWHERE = '
BEGIN--alias to table name to be used when the subquery results as a new table
SET @EXECSQL = ' SELECT top ' +str (@PAGE_SIZE) + ' + @FEILDS + ' to [books] WHERE ' + @ORDERFEILD +
@ORDERSTR + ' from (SELECT top ' +str (@PAGE_SIZE * (@PAGE_INDEX-1)) + ' + @ORDERFEILD +
' From [books] ' + @ORDERBY + ') as TEMP ' + @ORDERBY
End
ELSE
BEGIN
SET @EXECSQL = ' SELECT top ' +str (@PAGE_SIZE) + ' + @FEILDS + ' to [books] WHERE ' + @ORDERFEILD +
@ORDERSTR + ' from (SELECT top ' + STR (@PAGE_SIZE * (@PAGE_INDEX-1)) + ' + @ORDERFEILD +
' From [books] WHERE ' + @ANDWHERE + ' + @ORDERBY + ') as TEMP) and ' + @ANDWHERE + ' + @ORDERBY
End
End
EXEC (@EXECSQL)--Here are parentheses
End
Run Effect chart
Add:
Finally, it's not easy! There are a few places where you forget to explain the notes and you may not understand them.
Pageclick (1, Total, 3); This function, the first argument is the current page number, the first call is the first page, this is not a pipe, total: The number of records , the third parameter represents: the current index and next to the interval several pages
OK, so far today, the first time to write Dongdong, write a bad, technical content is limited, forget to read this Bowen forgive.
