suchen

Heim >Web-Frontend >js-Tutorial >Effizienter Paging-Implementierungscode basierend auf Jquery+Ajax+Json

Effizienter Paging-Implementierungscode basierend auf Jquery+Ajax+Json

高洛峰
高洛峰Original
2017-01-12 10:09:15904Durchsuche

Text
Zuerst erstellen wir einen allgemeinen Handler, um den Inhalt der Datenbank zu lesen und den Rückgabewert zu erhalten.
Erstellen Sie eine Datei, GetData.ashx.
Ich verwende hier eine gespeicherte Prozedur Die gespeicherte Prozedur wird unten eingefügt. Sie können die Daten entsprechend Ihren Anforderungen selbst lesen: 

<%@ 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"; 
//判断当前索引存不存在，如果不存在则获取记录的总数。 
if (string.IsNullOrEmpty(pageIndex)) 
{ 
//获取查询记录总数的sql语句 
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(); 
} 
//当根据索引获取数据 
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 = "*";//获取所有的字段 
parms[1].Value = pageIndex;//当前页面索引 
parms[2].Value = 10;//页面大小 
parms[3].Value = 0;//升序排列 
parms[4].Value = "";//条件语句 
parms[5].Value = "ID";//排序字段 
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格式 
} 
} 
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; } 
}
Anzeige Datenseite ---- Asynchrone Anforderung zum Abrufen von Daten, erstellt basierend auf jquery

Page Show.htm 

<body> 
<div > 
<table id="content">/*显示数据内容*/ 
</table> 
<div id="pager" class="yahoo2"></div>/*显示分页条*/ 
</div> 
</body>
js-Code 

$(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++) { 
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 
//创建分页 
//将总记录数结果 得到 总页码数 
var pageS = total 
if (pageS % 10 == 0) pageS = pageS / 10; 
else pageS = parseInt(total / 10) + 1; 
var $pager = $("#pager"); 
//清楚分页div中的内容 
$("#pager span").remove(); 
$("#pager a").remove(); 
//添加第一页 
if (intPageIndex == 1) 
$pager.append("<span class=&#39;disabled&#39;>第一页</span>"); 
else { 
var first = $("<a href=&#39;javascript:void(0)&#39; first=&#39;" + 1 + "&#39;>第一页</a>").click(function () { 
PageClick($(this).attr(&#39;first&#39;), total, spanInterval); 
return false; 
}); 
$pager.append(first); 
} 
//添加上一页 
if (intPageIndex == 1) 
$pager.append("<span class=&#39;disabled&#39;>上一页</span>"); 
else { 
var pre = $("<a href=&#39;javascript:void(0)&#39; pre=&#39;" + (intPageIndex - 1) + "&#39;>上一页</a>").click(function () { 
PageClick($(this).attr(&#39;pre&#39;), total, spanInterval); 
return false; 
}); 
$pager.append(pre); 
} 
//设置分页的格式 这里可以根据需求完成自己想要的结果 
var interval = parseInt(spanInterval); //设置间隔 
var start = Math.max(1, intPageIndex - interval); //设置起始页 
var end = Math.min(intPageIndex + interval, pageS)//设置末页 
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); 
} 
//生成页码 
for (var j = start; j < end + 1; j++) { 
if (j == intPageIndex) { 
var spanSelectd = $("<span class=&#39;current&#39;>" + j + "</span>"); 
$pager.append(spanSelectd); 
} //if 
else { 
var a = $("<a href=&#39;javascript:void(0)&#39;>" + j + "</a>").click(function () { 
PageClick($(this).text(), total, spanInterval); 
return false; 
}); 
$pager.append(a); 
} //else 
} //for 
//上一页 
if (intPageIndex == total) { 
$pager.append("<span class=&#39;disabled&#39;>下一页</span>"); 
} 
else { 
var next = $("<a href=&#39;javascript:void(0)&#39; next=&#39;" + (intPageIndex + 1) + "&#39;>下一页</a>").click(function () { 
PageClick($(this).attr("next"), total, spanInterval); 
return false; 
}); 
$pager.append(next); 
} 
//最后一页 
if (intPageIndex == pageS) { 
$pager.append("<span class=&#39;disabled&#39;>最后一页</span>"); 
} 
else { 
var last = $("<a href=&#39;javascript:void(0)&#39; last=&#39;" + pageS + "&#39;>最后一页</a>").click(function () { 
PageClick($(this).attr("last"), total, spanInterval); 
return false; 
}); 
$pager.append(last); 
} 
} //sucess 
}); //ajax 
}; //function 
}); //ready
Paging-Stil----If Sie sind interessiert, ich habe hier mehr als 20 Sätze von Paging-Stilen 

<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 

CREATE PROCEDURE [dbo].[PAGINATION] 
@FEILDS VARCHAR(1000),--要显示的字段 
@PAGE_INDEX INT,--当前页码 
@PAGE_SIZE INT,--页面大小 
@ORDERTYPE BIT,--当为0时 则为 desc 当为1 时 asc 
@ANDWHERE VARCHAR(1000)=&#39;&#39;,--where语句 不用加where 
@ORDERFEILD VARCHAR(100) --排序的字段 
as 
DECLARE @EXECSQL VARCHAR(2000) 
DECLARE @ORDERSTR VARCHAR(100) 
DECLARE @ORDERBY VARCHAR(100) 
BEGIN 
set NOCOUNT on 
IF @ORDERTYPE = 1 
BEGIN 
SET @ORDERSTR = &#39; > ( SELECT MAX([&#39;+@ORDERFEILD+&#39;])&#39; 
SET @ORDERBY = &#39;ORDER BY &#39;+@ORDERFEILD+&#39; ASC&#39; 
END 
ELSE 
BEGIN 
SET @ORDERSTR = &#39; < ( SELECT MIN([&#39;+@ORDERFEILD+&#39;])&#39; 
SET @ORDERBY = &#39;ORDER BY &#39;+@ORDERFEILD+&#39; DESC&#39; 
END 
IF @PAGE_INDEX = 1 --当页码是第一页时直接运行，提高速度 
BEGIN 
IF @ANDWHERE=&#39;&#39; 
SET @EXECSQL = &#39;SELECT TOP &#39;+STR(@PAGE_SIZE)+&#39; &#39;+@FEILDS+&#39; FROM [books] &#39;+@ORDERBY 
ELSE 
SET @EXECSQL = &#39;SELECT TOP &#39;+STR(@PAGE_SIZE)+&#39; &#39;+@FEILDS+&#39; FROM [books] WHERE &#39;+@ANDWHERE+&#39; &#39;+ @ORDERBY 
END 
ELSE 
BEGIN 
IF @ANDWHERE=&#39;&#39; 
BEGIN --以子查询结果当做新表时 要给表名别名才能用 
SET @EXECSQL = &#39;SELECT TOP&#39;+STR(@PAGE_SIZE)+&#39; &#39;+@FEILDS+&#39; FROM [books] WHERE &#39;+@ORDERFEILD+ 
@ORDERSTR+&#39; FROM (SELECT TOP &#39;+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+&#39; &#39;+@ORDERFEILD+ 
&#39; FROM [books] &#39;+@ORDERBY+&#39;) AS TEMP) &#39;+ @ORDERBY 
END 
ELSE 
BEGIN 
SET @EXECSQL = &#39;SELECT TOP&#39;+STR(@PAGE_SIZE)+&#39; &#39;+@FEILDS+&#39; FROM [books] WHERE &#39;+@ORDERFEILD+ 
@ORDERSTR+&#39; FROM (SELECT TOP &#39;+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+&#39; &#39;+@ORDERFEILD+ 
&#39; FROM [books] WHERE &#39;+@ANDWHERE+&#39; &#39;+@ORDERBY+&#39;) AS TEMP) AND &#39;+@ANDWHERE+&#39; &#39;+ @ORDERBY 
END 
END 
EXEC (@EXECSQL)--这里要加括号 
END
PageClick(1, total, 3); , der erste Parameter ist die aktuelle Seitennummer, der erste Aufruf ist die erste Seite, dies ist nicht erforderlich. Tube, total: stellt die Gesamtzahl der Datensätze dar, und der dritte Parameter stellt dar: die Anzahl der Seiten zwischen dem aktuellen Index und dem nächsten eins

Weitere verwandte Artikel zum effizienten Paging-Implementierungscode basierend auf Jquery + Ajax + Json finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode für den domänenübergreifenden Aufruf von jquery, ajax, jsonpNächster Artikel：Beispielcode für den domänenübergreifenden Aufruf von jquery, ajax, jsonp

In Verbindung stehende Artikel

Mehr sehen