jQuery_jquery で ajax ページネーションを使用したコードを実装する-jsチュートリアル-php.cn

jQuery_jquery で ajax ページネーションを使用したコードを実装する

WBOY

リリース： 2016-05-16 18:02:03

オリジナル

1525 人が閲覧しました

機能紹介: 主な機能は、データをページに表示することです。各ページに表示するページ番号を設定ファイルで設定できます。ここでは、単純なクエリを作成できます。ご提案を歓迎します。ご質問がございましたら、修正してください。このレンダリングを見てください。更新されていません。！

特定の実装についてはソースコードを参照してください:

1. aspx ページ

コードをコピーしますコードは次のとおりです。 %@ ページ言語="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="MeasurementWellCurve.UI.AjaxPage" %>

ajax ページネーション

番号:value="クエリ" />gt;

; th>

表皮係数 S

比率

🎜>

;tbody id="tb_body">

圧力係数エネルギー貯蔵率

合計データ[] ページ/合計[0]ページ

ホームページ前のページ
次のページ最後のページ

2. JS の具体的な実装

コードをコピー

コードは次のとおりです:

var pageIndex = 1; // ページインデックス
var where = " where 1=1";
$(function() {
BindData();
// GetTotalCount (); //レコードの総数
//GetPageCount(); //バインドされたページの総数
//最初のページボタンのクリックイベント
$("#first").click(function ( ) {
pageIndex = 1;
$("#lblCurrent").text(1);
BindData();
}); >$("#previous").click(function() {
if (pageIndex != 1) {
pageIndex--;
$("#lblCurrent").text(pageIndex) ;
}
BindData();
});
//次のページボタンクリックイベント
$("#next").click(function() {
var pageCount = parseInt ($("#lblPageCount").text());
if (pageIndex != pageCount) {
$("#lblCurent").text(pageIndex);
BindData();
});
//最後のページボタンのクリックイベント
$("#last").click(function() {
var pageCount = parseInt( "#lblPageCount").text());
pageIndex = pageCount;
//Query
$("#btnSearch" ); function() {
where = " where 1=1";
var csbh = $("#txtCSBH").val();
if (csbh != null && csbh ! = NaN) {
pageIndex = 1;
where = " および csbh like '%" 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("" item .CSBH "" item.K " " item.C
" " /td> " item.DSB " gt;" item.TCBJ
"" item.LHDCYL " < td>" item.BJJL "gt;" item.YLXS
" " item.FCTH " gt;"
" 詳細を表示

"id='btnInsert ' style='border-width:0px;' />");
})
},
error: function() {
var t = document.getElementById("tb_body"); //データを表示するテーブルを取得します
while (t.rows.length != 0) {
t.removeChild(t.rows[0 ]); //データを読み取るときにテーブルにすでに行がある場合。常に削除します
}
alert("データのロードに失敗しました");
} //ロードに失敗しました。エラー処理を要求します
//ajaxStop:$("#load").hide()
});
GetTotalCount();
bindPager();
// フッター属性の設定
function {
/ /配信制御情報を記入
var pageCount = parseInt($("#lblPageCount").text()); //総ページ数
if (pageCount == 0) {
document.getElementById(" lblCurent").innerHTML = "0";
}
else {
if (pageIndex > pageCount) {
$("#lblCurent").text(1);
}
else {
$("#lblCurrent").text(pageIndex); //現在のページ
}
}
document.getElementById("first").disabled = (pageIndex = = 1 || $("#lblCurrent").text() == "0") ? true : false;
document.getElementById("previous").disabled = (pageIndex document.getElementById("next").disabled = (pageIndex >= pageCount) true : false; .getElementById("last").disabled = (pageIndex == pageCount || $("#lblCurrent").text() == "0") ? true : false;総ページ数を取得します
function GetPageCount() {
var pageCount({
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",
data: { "whereCount": where },
async: false,
success: function(msg) {
document.getElementById("lblToatl").innerHTML =メッセージ;
}
});

3. 一般ハンドラー ashx のコード

コードをコピーしますコードは次のとおりです。 >

public class 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"; 🎜> string result = ""; 
//レコードの総数
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< /returns>
protected string GetJsonString(string where, int pageIndex) 
{ 
DataTable dt = Jgcs.GetInfo("csbh", where, pageIndex, pageSize) 
return JsonHelper.DataTable2Json(dt) , "テーブル"); 
} 
public 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 
( 
select row_number() over(order by {0} desc) as rowNumber 、* from 
( YW_JGCS から CSBH、K、C、S、DSB、TCBJ、LHDCYL、BJJL、BJLX、YLXS、FCTH、KHM1、KHM2、QKCS を選択) temp {1} 
) 
select * from TestInfo 
where rowNumber between (({2}-1)*{3} 1) and {2}*{3}"; 
string strSql = string.Format(str, orderFile, where, pageNumber , pageSize); 
 try 
{ 
db.DBOpen(); 
return db.DbDataSet(strSql); 
catch (例外 ex) >throw ex; 
 } 
最後に 
{ 
db.DBClose(); 
} 
} 
/// 
/// 合計結果パラメータの数
 ///  
///  
/// public static int GetToatlNum(string where) 
{ 
DBHelper db = new DBHelper(); 
string strSql = string.Format(@"select count(*) from (select CSBH,K) ,C,S,DSB, TCBJ,LHDCYL,BJJL,BJLX,YLXS,FCTH,KHM1,KHM2,QKCS from YW_JGCS) temp {0}", where); 
try 
{ 
db.DBOpen (); 
return (int)db.ExecuteScalar(strSql); 
catch (例外 ex) 
{ 
throw ex; 
最後に 
 { 
db.DBClose (); 
} 
} 

 
これでコードはすべてです