Jquery Ajax Json_jquery를 기반으로 한 효율적인 페이징 구현 코드

혹시 이런 것들을 사용해보신 적이 없으시다면 이 블로그 포스팅을 읽어보시면 도움이 되리라 믿습니다. 질문이나 버그가 있으시면 언제든지 연락주세요.
전문가분들도 환영합니다. , 나는 트롤 사이에서 자라는 것을 권장하지 않습니다.
내 QQ: 364175837
머리말
예전에 jquery.paper를 사용했던 친구들이 많을 것 같아요. 관심이 있으시면 QQ에 남겨주시면 보내드리겠습니다. 당신을 위한 간단한 소스 코드입니다.
이 코드는 밤에 급하게 완성되었기 때문에 그다지 최적화되지는 않았지만 주로 이 지식을 종합적으로 적용하기 위한 예시로 사용되었습니다. 좋아요, 더 이상 고민하지 말고 바로 코드로 넘어가겠습니다.
vs2010 sql2005express
Text
먼저 데이터베이스의 내용을 읽고 반환 값을 가져오는 일반 핸들러를 만듭니다.
GetData.ashx라는 파일을 만듭니다.
저장된 파일을 사용하고 있습니다. 여기에 저장 프로시저가 붙여넣어집니다. 데이터는 단지 예시일 뿐이며 필요에 따라 데이터를 읽을 수 있습니다.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<%@ WebHandler Language="C#" Class="GetData" %>
System.Web 사용;
System.Data.SqlClient 사용;
System.Collections.Generic 사용; Script.Serialization;
public class GetData : IHttpHandler {
public void ProcessRequest(HttpContext 컨텍스트) {
context.Response.ContentType = "text/plain"
var pageIndex = context.Request[" PageIndex"];
string ConnectionString = @"Data Source=KUSESQLEXPRESS ;Initial Catalog=bookshop;Integrated Security=True";
//현재 인덱스가 있는지 확인하고 없으면 합계를 가져옵니다. 레코드 수.
if (string.IsNullOrEmpty(pageIndex))
{
//쿼리 레코드의 총 개수를 가져오는 SQL 문
string sql = "책에서 개수(-1) 선택"
int count = 0;
int.TryParse(SqlHelper.ExecuteScalar(connectionString, System.Data.CommandType.Text, sql, null).ToString(), out count)
context.Response.Write(count) );
context.Response.End();
}
//인덱스에 따라 데이터를 가져올 때
else
{
int
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 모든 필드
parms[1].Value = pageIndex;//현재 페이지 인덱스
parms[2].Value = 10;//페이지 크기
parms[3].Value = 0;//오름차순 order
parms[4].Value = "";//조건문
parms[5].Value = "ID";//정렬 필드
List list = new List ();
(SqlDataReader sdr = SqlHelper.ExecuteReader(connectionString, CommandType.StoredProcedure, "PAGINATION", parms))
{
while (sdr.Read())
{
list.Add( 새 책 { 제목 = sdr[2].ToString(), Auhor = sdr[2].ToString(), PublishDate = sdr[4].ToString(), ISBN = sdr[5].ToString() });
}
}
context.Response.Write(new JavaScriptSerializer().Serialize(list).ToString());//Json 형식으로 변환
}
}
public bool IsReusable {
get {
return false;
}
}
public class Book
{
public string Title { get; }
공개 문자열 Auhor { get; set; }
공개 문자열 ISBN { get; set;
데이터 표시 페이지----데이터를 얻기 위한 비동기 요청, jquery를 기반으로 Show.htm 페이지 생성





코드 복사

코드는 다음과 같습니다.

/*데이터 콘텐츠 표시

/*페이징 표시줄 표시*/

;/body>

js 코드




코드 복사


코드는 다음과 같습니다.

$(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) {
//인덱스는 1부터 시작합니다
//현재 페이지 인덱스 int 형식으로 변환
var intPageIndex =parseInt(pageIndex);
//데이터를 표시하는 테이블 가져오기
var table = $("#content")//테이블의 내용 지우기
$("#content tr").remove();
//테이블에 콘텐츠 추가
for (var i = 0; i < data.length; i ) {
테이블 .append (
$(""
data[i].Title
""
data[i].Auhor
""
데이터[i].PublishDate
""
데이터[i].ISBN
" < /td>")
);
} //
용//페이징 생성
//총 레코드 수에서 총 페이지 수 가져오기
var pageS = total
if (pageS % 10 == 0) pageS = pageS / 10;
else pageS =parseInt(total / 10)
var $pager = $("#pager" );
//페이징 div의 내용 지우기
$("#pagerspan").remove()
$("#pager a").remove(); /첫 번째 페이지 추가
if (intPageIndex == 1)
$pager.append("첫 번째 페이지")
else {
var first = $("첫 번째 페이지>").click(function () {
PageClick($ (this ).attr('first'), total,spanInterval);
return false
})
$pager.append(first)
}// 이전 페이지
if (intPageIndex == 1)
$pager.append("이전 페이지")
else {
var pre = $("이전 페이지").click(function () {
PageClick( $(this).attr('pre'), total,spanInterval);
return false
})
$pager.append(pre)
/ /Set 여기서는 필요에 따라 원하는 결과를 완성할 수 있습니다.
var Interval =parseInt(spanInterval); //간격 설정
var start = Math.max(1, intPageIndex - Interval); /시작 페이지 설정
var end = Math.min(intPageIndex 간격, pageS)//마지막 페이지 설정
if (intPageIndex < 간격 1) {
end = (2 * 간격 1) > pageS ? pageS : (2 * 간격 1);
if ((intPageIndex 간격) > pageS) {
start = (pageS - 2 * 간격) < 2 * 간격)
}
//페이지 번호 생성
for (var j = start; j < end 1; j ) {
if (j == intPageIndex) {
varspanSelectd = $("" j "")
$pager.append(spanSelectd)
} //if
else {
var a = $("" j "").click(function () {
PageClick($(this) .text( ), total,spanInterval);
return false
})
$pager.append(a)
} //for
//한 페이지
if (intPageIndex == total) {
$pager.append("다음 페이지")
}
else {
var next = $("다음 페이지").click(함수( ) {
PageClick($(this).attr("next"), total,spanInterval);
return false
}); }
//마지막 페이지
if (intPageIndex == pageS) {
$pager.append("마지막 페이지")
}
else {
var last = $("마지막 페이지" ).click(함수 ( ) {
PageClick($(this).attr("last"), total,spanInterval)
return false
}); }
} //성공
}); //ajax
}) //준비


페이지 매김 스타일---If 관심이 있으신가요? 여기에 20개 이상의 페이징 스타일 세트가 있습니다. QQ를 떠날 수 있습니다.




코드 복사


코드는 다음과 같습니다. :

　分页存储过程---페이지 매김

复代码 代码如下:

프로시저 생성 [dbo].[페이지 매김]
@FEILDS VARCHAR(1000),--要显示的字段
@PAGE_INDEX INT,--当前页码
@PAGE_SIZE INT,--页면 큼
@ORDERTYPE BIT,--当为0时 则为 desc 当为1 时 asc
@ANDWHERE VARCHAR(1000)='',--where语句 不用加where
@ORDERFEILD VARCHAR(100 ) --排序的字段
as
DECLARE @EXECSQL VARCHAR(2000)
DECLARE @ORDERSTR VARCHAR(100)
DECLARE @ORDERBY VARCHAR(100)
BEGIN
NOCOUNT 설정
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 --当页码是第一页时直接运行，提高速島
BEGIN
IF @ANDWHERE=''
SET @EXECSQL = 'SELECT TOP ' STR(@PAGE_SIZE) ' ' @FEILDS ' FROM [books] ' @ORDERBY
ELSE
SET @EXECSQL = 'SELECT TOP ' STR(@PAGE_SIZE) ' ' @FEILDS ' FROM [books] WHERE ' @ANDWHERE ' ' @ORDERBY
END
ELSE
BEGIN
IF @ANDWHERE =''
BEGIN --以子查询结果当做新表时 要给表name别name才能用
SET @EXECSQL = 'SELECT TOP' STR(@PAGE_SIZE) ' ' @FEILDS ' FROM [books] WHERE ' @ORDERFEILD
@ORDERSTR ' FROM (SELECT TOP ' STR(@PAGE_SIZE*(@PAGE_INDEX-1)) ' ' @ORDERFEILD
' FROM [도서] ' @ORDERBY ') AS TEMP) ' @ORDERBY
END
ELSE
BEGIN
SET @EXECSQL = 'SELECT TOP' STR(@PAGE_SIZE) ' ' @FEILDS ' FROM [도서] 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)--这里要加括号
END

运行效果图

补充：

终于,大功告成,不容易啊!

PageClick(1, 총, 3); 这个函数，第一个参数是当前页码，第一调用为第一页，这个不用管，total：表示

总记录数,第三个参数表示：当前索引와旁边个间隔几页

알겠습니다. 今天到此为止，第一次写东东，写的不好，技术含weight也有限，忘读此博文者见谅。