Flexigrid dynamisch raster met JQuery en PHP

Flexigrid met pHp- en MySQL-query's

Flexigrid is een gratis en open JQuery-bibliotheek, waarmee het resultaat van een gegevensquery in een raster kan worden weergegeven, in een tabel kan worden weergegeven, kan worden gepagineerd, gesorteerd en interactie met de gegevens mogelijk is. Flexigrid kan verschillende gegevensbronnen gebruiken, zoals XML, query's uitvoeren op de database met behulp van PHP en de gegevens retourneren in JSON-indeling om door Flexgrid te worden weergegeven.

We kunnen Flexigrid downloaden van de officiële website.

Flexigrid gebruiken met pHp- en MySQL-query's

Na het downloaden van Flexigrid, unzippen we het zip-bestand en vervolgens op een lokale of externe server zoals we zagen in de tutorial om Xampp te installeren om van uw computer een webserver te maken, we zullen een map maken om het voorbeeld te bevatten, we hebben de CSS en JS-mappen die de Flexigrid-boekwinkels zijn.

Je moet ook een jQuery-versie hebben, we kunnen een online versie gebruiken zoals:

We kunnen de versie ook downloaden van de officiële website jQuery.com. jQuery is een bibliotheek met JavaScript-functies.

Vervolgens gaan we een database maken van phpmyadmin om in het voorbeeld te gebruiken

Database: `FlexEmpresa`

 MAAK DATABASE ALS NIET BESTAAT `FlexEmpresa` STANDAARD KARAKTERSET latin1 SAMENVOEGEN latin1_swedish_ci; Tabelstructuur voor tabel `klanten` MAAK TABEL ALS NIET BESTAAT` klanten` (`id` int (11) NOT NULL,` name` varchar (100) DEFAULT NULL, `adres` varchar (255) NOT NULL,` city `varchar (255) NOT NULL,` provincie` varchar (150) STANDAARD NULL) MOTOR = MyISAM AUTO_INCREMENT = 7 STANDAARD CHARSET = utf8;

Data dump voor tabel `klanten`

 INVOEREN IN `klanten` (` id`, `naam`,` adres`, `stad`,` provincie`) WAARDEN (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 ','Sevilla','Sevilla'); Indices van de tabel `klanten` ALTER TABLE` klanten` ADD PRIMARY KEY (`id`); WIJZIG TABEL `klanten` MODIFY` id` int (11) NIET NULL AUTO_INCREMENT, AUTO_INCREMENT = 7; 

Vervolgens moeten we een index.php-bestand maken waar we de code met de headers zullen toevoegen

 Klanten 

 

Vervolgens moeten we het bestand query.php maken om de SQL-query uit te voeren wanneer deze door de bibliotheek wordt aangeroepen.

Het resultaat van weergave in de browser zou het volgende moeten zijn:

Vorigpagina 1 van 2VolgendeVond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven