exemples de didacticiels de pagination jquery easyui

Dans le développement Web, nous rencontrons souvent le besoin de pagination. Si nous nous appuyons sur du code écrit à la main, il peut y avoir beaucoup de code et le style n'aura pas l'air bien. Voici une introduction à jquery easyui pagination. function, ce qui est très pratique et simple

Ensuite, après avoir inclus les fichiers nécessaires selon le "document d'utilisation du framework jquery EasyUI", insérez simplement le code suivant dans $(function(){ }); :

 $('#pp').pagination(options);

Ce qui suit Présentation de l'utilisation spécifique de la pagination, regardez d'abord les attributs :

Nom de l'attribut type description valeur par défaut

nombre total Définir le nombre total d'enregistrements lorsque la pagination est établie 1

numéro pageSize par numéro affiché sur une page 10

pageNumber Numéro Lorsque la pagination est établie, le nombre de pages affichées 1

tableau pageList Les utilisateurs peuvent modifier la taille de chaque page,

définition de l'attribut pageList Combien de tailles peuvent être modifiées [10,20,30,50]

loading Boolean définit si le chargement des données est faux

<🎜. >le tableau de boutons définit des boutons personnalisés, chaque bouton contient deux attributs :

iconCls : classe CSS pour afficher

image d'arrière-plan

handler : fonction de gestionnaire lorsqu'un bouton est cliqué nul

showPageList Définition booléenne indiquant s'il faut afficher la liste des pages true

showRefresh Définition booléenne s'il faut afficher le bouton d'actualisation true

beforePageText étiquette de chaîne affichée avant le

groupe de zones de saisiePage

caractère afterPageText L'étiquette de la chaîne {pages}

displayMsg affichée après le composant de zone de saisie affiche les informations d'une page.

Affichage de {de} à {à} de {total} éléments Événement Nom de l'événement Description du paramètre onSelectPage pageNumber, pageSize Déclenchée lorsque l'utilisateur sélectionne une nouvelle page,

Fonction de rappel contient deux paramètres : pageNumber : le nombre de pages de la nouvelle page pageSize : la taille de la nouvelle page onBeforeRefresh pageNumber, pageSize se déclenche avant que le bouton d'actualisation ne soit cliqué, si false est renvoyé, l'opération de rafraîchissement est annulée onRefresh pageNumber, pageSize se déclenche après l'actualisation onChangePageSize pageSize déclenche le démonstration lorsque la taille de la page est modifiée

1. Extraction et affichage des données.

DataGrid obtient des données via l'attribut url. Par exemple : url:'ListInfo.action', de cette façon, les données sont obtenues en appelant la méthode dans Action. Ce qui est renvoyé est une chaîne JSON. Notez que les chaînes JSON doivent être assemblées selon le format de données défini par DataGrid. Pour ce format de données, vous pouvez vous référer à la pièce jointe de mon article précédent. Il convient particulièrement de souligner que la valeur du champ total dans la chaîne JSON correspond au nombre d'éléments de données utilisés pour la pagination des données.

2. Pagination des données.

La pagination des données est divisée en pagination au premier plan et en pagination au premier plan, DataGrid a été encapsulé. DataGrid définit deux paramètres : rows (le nombre d'éléments par page) et page (le numéro de page actuel). Ces deux paramètres correspondent respectivement aux attributs pageSize et pageNumber. L'utilisateur peut le définir dans les attributs pageSize et pageNumber, ou ne pas le définir, la valeur par défaut est donc utilisée. Il nous suffit de définir deux variables dans Action, les lignes int privées ; la page int privée, puis d'obtenir les valeurs requises via des instructions SQL ; L'instruction SQL de pagination (Oracle) est la suivante :

De cette manière, le nombre de données extraites est attribué au champ total, assemblé et renvoyé dans une chaîne JSON, et la pagination peut être réalisée. Bien sûr,

pagination:true, est certainement obligatoire.

3. Opérations sur les données.

Les opérations sur les données peuvent être grossièrement divisées en : afficher, supprimer. Pour la visualisation, nous pouvons y parvenir via les événements onClickRow ou onDblClickRow. Par exemple :

$(function(){

$('#test').datagrid({

title:'数据列表',

width:900,

height:500,

.......(省略的属性)

onDblClickRow: function() {

var selected = $('#test').datagrid('getSelected');

if (selected){

window.open("DataView.action?Id="+selected.ID);

}}

Double-cliquez pour afficher.

Concernant la suppression, vous pouvez cliquer sur le bouton Supprimer et appeler la méthode de suppression. Le bouton de suppression peut être attribué au champ OPERATION lors de l'assemblage de la chaîne JSON En définissant {field:'OPERATION', title: 'Operation', width: 120}, le bouton de suppression peut être affiché sur la page. La mise en œuvre de la suppression est la suivante :

function DelAff(){

$.messager.confirm('确认','是否真的删除?',function(r){ 

if (r){ 

var selected = $('#test').datagrid('getSelected');

if (selected){

var index = $('#test').datagrid('getRowIndex', selected);

$('#test').datagrid('deleteRow', index);

DeleteSubmit(selected);

}

}

});

}

function DeleteSubmit(selected)

{

var url="DataDelete.action?Id="+selected.ID;

$.post(

url     

);

}

De cette manière, la suppression de page et la suppression de base de données sont réalisées.

4. Problèmes à résoudre

Si les données renvoyées sont vides, il y aura un bug dans la page sous

Navigateur IE. Ma solution consiste à définir chaque champ sur "", afin qu'une ligne de données de contenu vide apparaisse sur la page. Si vous avez rencontré ce problème et l'avez résolu, donnez-moi quelques conseils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!