Maison interface Web js tutoriel jQuery getJSON()+.ashx 实现分页(改进版)_jquery

jQuery getJSON()+.ashx 实现分页(改进版)_jquery

May 16, 2016 pm 05:38 PM
分页

参考了:http://www.jb51.net/article/35110.htm
改进的地方:
1、ashx返回json数据,减少传输数据量,html页面样式控制也比较灵活;
2、改写html页的jQuery代码;
3、把3个ashx文件简化为1个。
一、创建表的测试数据

复制代码 代码如下:

create table test(id int identity,title varchar(36))
declare @index int;
set @index = 1;
while(@index begin
insert test(title) values (newid())
set @index = @index + 1
end

二、.html页
复制代码 代码如下:



















三、.ashx页
复制代码 代码如下:

public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
StringBuilder tb = new StringBuilder();
DataBase db = new DataBase();
int pageSize = 10;
int pageIndex = 0;
string type = context.Request.Params["type"];
switch (type)
{
case "first":
DataTable dt1 = db.GetDataSet("select top 10 * from test", null).Tables[0];
tb.Append(Common.DataTableToJSON(dt1, true)); //DataTable转为JSON
break;
case "next":
pageIndex = Convert.ToInt32(context.Request.Params["index"]);
DataTable dt2 = db.GetDataSet("select top " + pageSize.ToString() + " * from test where id> (select max(id) from (select top " + (pageSize * pageIndex).ToString() + " id from test) t)", null).Tables[0];
tb.Append(Common.DataTableToJSON(dt2, true));
break;
case "pre":
pageIndex = Convert.ToInt32(context.Request.Params["index"]);
DataTable dt3 = db.GetDataSet("select top " + pageSize.ToString() + " * from test where id> (select max(id) from (select top " + (pageSize * pageIndex).ToString() + " id from test) t)", null).Tables[0];
tb.Append(JSONHelper.DataTableToJSON(dt));
break;
}
context.Response.Write(tb.ToString());
}
public bool IsReusable
{
get
{
return false;
}
}
}

四、效果
jQuery getJSON()+.ashx 实现分页(改进版)_jquery 
--------------------------------------------------------------------------------------------------------------------
备注 (2010-7-10):
用sql2005 row_number()分页方法,.ashx页面代码可简化为
复制代码 代码如下:

public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
DataBase db = new DataBase();
int pageSize = 10;
int pageIndex = 0;
int.TryParse(context.Request.Params["index"], out pageIndex);
string type = context.Request.Params["type"];
string sql = string.Format("select * from ( select row_number() over (order by id) as rowNum,* from test) as t "
+ " where rowNum>{0} and rowNumDataTable dt = db.GetDataSet(sql, null).Tables[0];
context.Response.Write(JSONHelper.DataTableToJSON(dt));
}
public bool IsReusable
{
get
{
return false;
}
}
}

备注
其中JSONHelper.DataTableToJSON(dt)方法为DataTable解析成JSON,见另一篇文章JSONHelper帮助类
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment créer une pagination personnalisée dans CakePHP ? Comment créer une pagination personnalisée dans CakePHP ? Jun 04, 2023 am 08:32 AM

CakePHP est un framework PHP puissant qui fournit aux développeurs de nombreux outils et fonctionnalités utiles. L'un d'eux est la pagination, qui nous aide à diviser de grandes quantités de données en plusieurs pages, facilitant ainsi la navigation et la manipulation. Par défaut, CakePHP fournit des méthodes de pagination de base, mais vous devrez parfois créer des méthodes de pagination personnalisées. Cet article va vous montrer comment créer une pagination personnalisée dans CakePHP. Étape 1 : Créer une classe de pagination personnalisée Tout d'abord, nous devons créer une classe de pagination personnalisée. ce

Développement PHP : Comment implémenter les fonctions de tri et de pagination des données des tables Développement PHP : Comment implémenter les fonctions de tri et de pagination des données des tables Sep 20, 2023 am 11:28 AM

Développement PHP : comment implémenter des fonctions de tri et de pagination des données de table Dans le développement Web, le traitement de grandes quantités de données est une tâche courante. Pour les tableaux devant afficher une grande quantité de données, il est généralement nécessaire de mettre en œuvre des fonctions de tri et de pagination des données pour offrir une bonne expérience utilisateur et optimiser les performances du système. Cet article explique comment utiliser PHP pour implémenter les fonctions de tri et de pagination des données de table et donne des exemples de code spécifiques. La fonction de tri implémente la fonction de tri dans le tableau, permettant aux utilisateurs de trier par ordre croissant ou décroissant selon différents champs. Ce qui suit est un formulaire de mise en œuvre

Comment utiliser JavaScript pour implémenter la fonction de pagination de table ? Comment utiliser JavaScript pour implémenter la fonction de pagination de table ? Oct 20, 2023 pm 06:19 PM

Comment utiliser JavaScript pour implémenter la fonction de pagination de table ? Avec le développement d’Internet, de plus en plus de sites Web utilisent des tableaux pour afficher les données. Dans certains cas où la quantité de données est importante, les données doivent être affichées dans des pages pour améliorer l'expérience utilisateur. Cet article explique comment utiliser JavaScript pour implémenter la fonction de pagination de table et fournit des exemples de code spécifiques. 1. Structure HTML Tout d'abord, nous devons préparer une structure HTML pour héberger les tableaux et les boutons de pagination. Nous pouvons utiliser <tab

Utilisation de JavaScript pour implémenter l'affichage paginé des données du tableau Utilisation de JavaScript pour implémenter l'affichage paginé des données du tableau Jun 16, 2023 am 10:00 AM

À mesure que les données continuent de croître, l’affichage tabulaire devient plus difficile. La plupart du temps, la quantité de données dans un tableau est si importante que son chargement devient lent et les utilisateurs doivent constamment parcourir la page pour trouver les données souhaitées. Cet article explique comment utiliser JavaScript pour réaliser un affichage paginé des données de table, permettant ainsi aux utilisateurs de trouver plus facilement les données souhaitées. 1. Créez dynamiquement des tableaux Afin de rendre la fonction de pagination plus contrôlable, les tableaux doivent être créés dynamiquement. Dans la page HTML, ajoutez un élément de tableau similaire à celui ci-dessous.

Explication détaillée du principe du plug-in de pagination MyBatis Explication détaillée du principe du plug-in de pagination MyBatis Feb 22, 2024 pm 03:42 PM

MyBatis est un excellent framework de couche de persistance. Il prend en charge les opérations de base de données basées sur XML et les annotations. Il est simple et facile à utiliser. Il fournit également un mécanisme de plug-in riche. Parmi eux, le plug-in de pagination est l'un des plug-ins les plus fréquemment utilisés. Cet article approfondira les principes du plug-in de pagination MyBatis et l'illustrera avec des exemples de code spécifiques. 1. Principe du plug-in de pagination MyBatis lui-même ne fournit pas de fonction de pagination native, mais vous pouvez utiliser des plug-ins pour implémenter des requêtes de pagination. Le principe du plug-in de pagination est principalement d'intercepter MyBatis

Pratique des composants Vue : développement de composants de pagination Pratique des composants Vue : développement de composants de pagination Nov 24, 2023 am 08:56 AM

Pratique des composants Vue : Introduction au développement de composants de pagination Dans les applications Web, la fonction de pagination est un composant essentiel. Un bon composant de pagination doit être simple et clair dans sa présentation, riche en fonctions et facile à intégrer et à utiliser. Dans cet article, nous présenterons comment utiliser le framework Vue.js pour développer un composant de pagination hautement personnalisable. Nous expliquerons en détail comment développer à l'aide des composants Vue à travers des exemples de code. Pile technologique Vue.js2.xJavaScript (ES6) Environnement de développement HTML5 et CSS3

Comment implémenter la fonction de pagination dans le développement de la technologie Vue Comment implémenter la fonction de pagination dans le développement de la technologie Vue Oct 09, 2023 am 09:06 AM

Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Dans le développement de la technologie Vue, la mise en œuvre de la fonction de pagination est une exigence courante. Cet article expliquera comment utiliser Vue pour implémenter la fonction de pagination et fournira des exemples de code spécifiques. Avant de commencer, nous devons préparer quelques connaissances de base. Tout d’abord, nous devons comprendre les concepts de base et la syntaxe de Vue. Deuxièmement, nous devons savoir comment utiliser les composants Vue pour construire notre application. Avant de commencer, nous devons installer un plug-in de pagination dans le projet Vue,

Tutoriel d'introduction au développement VUE3 : utiliser des composants pour implémenter la pagination Tutoriel d'introduction au développement VUE3 : utiliser des composants pour implémenter la pagination Jun 16, 2023 am 08:48 AM

Tutoriel d'introduction au développement VUE3 : L'utilisation de composants pour implémenter la pagination est une exigence courante, car dans le développement réel, nous devons souvent diviser une grande quantité de données en plusieurs pages à afficher aux utilisateurs. Dans le développement VUE3, la fonction de pagination peut être implémentée à l'aide de composants. Cet article explique comment utiliser des composants pour implémenter une fonction de pagination simple. 1. Créer un composant Tout d'abord, nous devons créer un composant de pagination, utiliser la commande "vuecreate" pour créer un projet VUE et créer Pagin dans le répertoire src/components.

See all articles