Grille dynamique Flexigrid avec JQuery et PHP

Flexigrid avec requêtes pHp et MySQL

Flexigrid est une bibliothèque JQuery gratuite et ouverte, qui permet d'afficher le résultat d'une requête de données dans une grille, de les lister dans un tableau, de les paginer, de les trier et d'interagir avec les données. Flexigrid peut utiliser différentes sources de données telles que XML, interroger la base de données à l'aide de PHP et renvoyer les données au format JSON à afficher par Flexgrid.

Nous pouvons télécharger Flexigrid depuis son site officiel.

Comment utiliser Flexigrid avec les requêtes pHp et MySQL

Après avoir téléchargé Flexigrid, nous décompressons le fichier zip, puis sur un serveur local ou distant comme nous l'avons vu dans le tutoriel pour installer Xampp pour transformer votre ordinateur en serveur web, nous allons créer un dossier pour contenir l'exemple, nous avons besoin du CSS et Les dossiers JS qui sont les librairies Flexigrid.

Vous devez également avoir une version jQuery nous pouvons utiliser une version en ligne comme :

Nous pouvons également télécharger la version sur le site officiel jQuery.com. jQuery est une bibliothèque de fonctions JavaScript.

Ensuite, nous allons créer une base de données à partir de phpmyadmin à utiliser dans l'exemple

Base de données : « FlexEmpresa »

 CRÉER LA BASE DE DONNÉES S'IL N'EXISTE PAS `FlexEmpresa` JEU DE CARACTÈRES PAR DÉFAUT latin1 COLLATE latin1_swedish_ci; Structure de la table pour la table `customers` CREATE TABLE IF NOT EXISTS` customers` (`id` int (11) NOT NULL,` name` varchar (100) DEFAULT NULL, `address` varchar (255) NOT NULL,` city `varchar (255) NOT NULL,` province` varchar (150) DEFAULT NULL) ENGINE = MyISAM AUTO_INCREMENT = 7 DEFAULT CHARSET = utf8;

Dump de données pour la table 'clients'

 INSÉRER DANS `clients` (` id`, `nom`,` adresse`, `ville`,` province`) VALEURS (1, 'Adela Resjez', 'Lore de Balca 435', 'Madrid', 'Madrid') , (2, 'Gretel Martinez', 'Juan XXIII 1232', 'Barcelona', 'Barcelona'), (3, 'Olivia Asri', 'Marina Sur 123', 'Aranjuez', 'Madrid'), (4, 'Ledi Widaya', 'Calle 1 Norte 456', 'Sabadell', 'Barcelona'), (5, 'Alfonso Praudi', 'Salerno 48 Piso 1', 'Valencia', 'Valencia'), (6, 'Jose Albertez ', ' Calle 13 586 ', ' Séville ', ' Séville '); Indices de la table `clients` ALTER TABLE` clients` ADD PRIMARY KEY (`id`); ALTER TABLE `customers` MODIFY` id` int (11) NON NULL AUTO_INCREMENT, AUTO_INCREMENT = 7; 

Ensuite, nous devons créer un fichier index.php où nous ajouterons le code avec les en-têtes

 Les clients 

 

Ensuite, nous devons créer le fichier query.php pour effectuer la requête SQL lorsqu'il est invoqué par la bibliothèque.

Le résultat de l'affichage dans le navigateur doit être le suivant :

Précédentpage 1 sur 2ProchainAvez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif