jQuery_jquery에서 ajax 페이지 매김을 사용하여 코드 구현

기능 소개: 주요 기능은 데이터를 페이지에 표시하는 것입니다. 각 페이지에 표시되는 페이지 번호는 구성 파일에서 구성할 수 있으며 다음은 간단한 쿼리입니다. 제안을 환영합니다. 질문이 있으면 정정해 주세요. 이 렌더링을 보세요. 새로 고쳐지지 않았습니다! !

구체적인 구현은 소스 코드를 참조하세요.

1. aspx 페이지

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

div>
번호:value=" Query" />

< ;tr>

;th>
웰보어 저장 상수 C

장착 압력
🎜>
경계 거리

압력 계수

에너지 저장 비율

	형성 투과성 K	피부 계수 S 막힘 비율	감지 반경

총데이터[] 페이지/총[0 label>]페이지

홈페이지 이전 페이지 a마지막 페이지

JS의 구체적인 구현


코드 복사


코드는 다음과 같습니다.

var pageIndex = 1; //페이지 인덱스
var where = " where 1=1";
$(function() {
BindData();
// GetTotalCount (); //총 레코드 수
//GetPageCount(); //바인딩된 총 페이지 수
//첫 번째 페이지 버튼 클릭 이벤트
$("#first").click(function ( ) {
pageIndex = 1;
$("#lblCurent").text(1);
BindData()
})
//이전 페이지 버튼 클릭 이벤트
$("#previous").click(function() {
if (pageIndex != 1) {
pageIndex--;
$("#lblCurent").text(pageIndex) ;
}
BindData();
});
//다음 페이지 버튼 클릭 이벤트
$("#next").click(function() {
var pageCount =parseInt ($("#lblPageCount").text());
if (pageIndex != pageCount) {
pageIndex ;
$("#lblCurent").text(pageIndex);
BindData();
});
//마지막 페이지 버튼 클릭 이벤트
$("#last").click(function() {
var pageCount = parseInt($( "#lblPageCount").text());
pageCount;
BindData()
})
//Query
$("#btnSearch" ).click( function() {
where = " where 1=1";
var csbh = $("#txtCSBH").val()
if (csbh != null && csbh ! = NaN)
pageIndex = 1;
여기서 = " 및 csbh는 '%" csbh "%'"와 같습니다.
BindData()
})
//AJAX 메소드는 데이터를 얻어 페이지에 표시합니다
function BindData() {
$.ajax({
type: "get", //get 메소드를 사용하여 배경에 액세스합니다
dataType: "json", //json 형식으로 데이터 반환
url: "../AjaxService/JgcsService.ashx", //접근할 백엔드 주소
data: { "pageIndex": pageIndex, " where ": where }, //전송할 데이터
ajaxStart: function() { $("#load").show(); },
complete: function() { $("#load" ) .hide(); }, //AJAX 요청이 완료되면 로딩 프롬프트를 숨깁니다
success: function(msg) {//msg는 반환된 데이터입니다. 여기서 데이터 바인딩을 수행하세요
var data = msg. table;
if (data.length != 0) {
var t = document.getElementById("tb_body") //데이터를 표시하는 테이블 가져오기
while (t.rows.length != 0 ) {
t.removeChild(t.rows[0]); //데이터를 읽을 때 테이블에 이미 행이 있는 경우.
}
}
$.each(data, function(i, item) {
$("#jgcsTable").append(" " 항목 항상 삭제 .CSBH " " 항목.K " " 항목.C
" " /td> " item.DSB " " item.TCBJ
" " item.LHDCYL " " item.BJJL "" " item.YLXS
" " item.FCTH " "
""id='btnInsert ' style="max-width:90%" /> ");
})
},
오류: function() {
var t = document.getElementById("tb_body"); //데이터를 표시할 테이블 가져오기
while (t.rows.length != 0) {
t.removeChild(t.rows[0 ]); //데이터를 읽을 때 테이블에 이미 행이 있는 경우. 항상 삭제
}
alert("데이터 로드 실패");
} //로드 실패, 오류 처리 요청
//ajaxStop:$("#load").hide()
});
GetPageCount();
bindPager();
}
// 바닥글 속성 설정
functionbinPager()/ 배포 제어 정보 채우기
var pageCount =parseInt($("#lblPageCount").text()); //총 페이지 수
if (pageCount == 0) {
document.getElementById(" lblCurent").innerHTML = "0";
}
else {
if (pageIndex > pageCount) {
$("#lblCurent").text(1);
}
else {
$("#lblCurent").text(pageIndex); //현재 페이지
}
}
document.getElementById("first").disabled = (pageIndex = = 1 || $("#lblCurent").text() == "0") ? true : false
document.getElementById("previous").disabled = (pageIndex document.getElementById("next").disabled = (pageIndex >= pageCount) ? true : false; .getElementById("last").disabled = (pageIndex == pageCount || $("#lblCurent").text() == "0") ? true : false
//AJAX 메서드 총 페이지 수를 가져옵니다.
function GetPageCount() {
var pageCount
$.ajax({
type: "get",
dataType: "text",
url : " ../AjaxService/JgcsService.ashx",
data: { "wherePageCount": where }, //"wherePageCount" 여기서 개인적으로 이 방법을 사용하지 않는 것이 좋습니다.
async: false,
success : function( msg) {
document.getElementById("lblPageCount").innerHTML = msg;
}
})
}
//총 레코드 수를 가져오는 AJAX 메소드
function GetTotalCount() {
var pageCount;
$.ajax({
type: "get",
dataType: "text",
url: "../AjaxService /JgcsService.ashx",
데이터: { "whereCount": where },
async: false,
success: function(msg) {
document.getElementById("lblToatl").innerHTML = msg;
}
});

3. 일반 핸들러 ashx의 코드

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

공용 클래스 JgcsService : IHttpHandler
{
readonly int pageSize = 15;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text / plain";
//브라우저 캐시를 허용하지 않음
context.Response.Buffer = true;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
context. Response.AddHeader("pragma", "no-cache");
context.Response.AddHeader("cache-control", "")
context.Response.CacheControl = "no-cache"; 🎜> 문자열 결과 = "";
//총 레코드 수
if (!string.IsNullOrEmpty(context.Request["whereCount"]))
{
string where = context.Request .Params ["whereCount"].ToString();
result = Jgcs.GetToatlNum(where).ToString();
}
//총 페이지 수
if (!string.IsNullOrEmpty (context.Request["wherePageCount"]))
{
string where = context.Request.Params["wherePageCount"].ToString()
int count = Jgcs.GetToatlNum(where); 🎜>string pageCount = Math.Ceiling((double)count / (double)pageSize).ToString();
result = pageCount;
}
//페이징 데이터
if (!string. IsNullOrEmpty(context .Request.Params["pageIndex"])
&& !string.IsNullOrEmpty(context.Request.Params["where"]))
{
string where = context.Request.Params[ "where" ].ToString();
int pageIndex = Convert.ToInt32(context.Request.Params["pageIndex"])
result = GetJsonString(where, pageIndex)
context.Response .Write(result);
///

/// json 문자열 반환
///

/// < ;param name ="where">쿼리 조건
/// 페이지 인덱스/// json string
보호된 문자열 GetJsonString(string where, int pageIndex)
{
DataTable dt = Jgcs.GetInfo("csbh", where, pageIndex, pageSize)
return JsonHelper.DataTable2Json(dt , "테이블");
}
공용 bool IsReusable
{
get
{
return false
}
}


4. 페이징 쿼리 방법을 읽거나 남겨둘 수 있습니다. 프로세스를 시작하려면 간단한 예를 들어 설명하겠습니다. 신청할 때 이렇게 작성하지 마세요. 참고용으로만 올려주세요
페이징 방법

코드 복사


코드는 다음과 같습니다

///

/// 페이징 쿼리 방법///

/// 정렬 필드> ; /// 쿼리 조건

/// 현재 페이지 / 페이지 크기

///
public static DataTable GetInfo(string orderFile, string where, int pageNumber, int pageSize)
{
DBHelper db = new DBHelper();
string str = @"with TestInfo as
(
row_number() over(order by {0} desc) as rowNumber ,*
에서( YW_JGCS에서 CSBH,K,C,S,DSB,TCBJ,LHDCYL,BJJL,BJLX,YLXS,FCTH,KHM1,KHM2,QKCS 선택) 임시 {1}
)
선택 * TestInfo에서
여기서 rowNumber는 (({2}-1)*{3} 1)과 {2}*{3}" 사이에 있습니다.
string strSql = string.Format(str, orderFile, where, pageNumber , pageSize);
try
{
db.DBOpen();
return db.DbDataSet(strSql);
}
catch(예외 예시)
{
throw ex;
}
마지막으로
{
db.DBClose()
}
}
///

결과 매개변수 개수
///

///
/// ;
public static int GetToatlNum(string where)
{
DBHelper db = new DBHelper()
string strSql = string.Format(@"select count(*) from (CSBH,K 선택) ,C,S,DSB, TCBJ,LHDCYL,BJJL,BJLX,YLXS,FCTH,KHM1,KHM2,QKCS from YW_JGCS) temp {0}", where);
시도
{
db.DBOpen ();
return (int)db.ExecuteScalar(strSql);
}
catch (Exception ex)
{
throw ex; {
db.DBClose ();
}
}


자, 코드는 이게 다입니다