Geek Answers Handbook

How to use javascript and PHP to import Fuel UX datagrid data

UX fuel here: http://exacttarget.github.com/fuelux/

In particular, I am trying to use Datagrid.

Here is an example: http://code.exacttarget.com/code-examples/datagrid.html

I tried to recreate this: https://raw.github.com/ExactTarget/fuelux/master/sample/data.js

And just output it via a PHP file. I was able to get PHP to correctly output the correct data and simply dump it into the main file, so the data.js file is now output in the main PHP / HTML file with all my information in the header using these tags:

<script></script>

And used a sample markup from the GitHub site.

I can't get it to work correctly, is there any other way to import data from PHP into a datagrid? Should some code for data.js have to be changed since it is now output to the main php / html file?

It basically tries to extract data from MySQL using PHP, and then upload it to the data grid. I can't find much documentation and I think my real question is the best way to import data from my php application into Fuel UX Datagrid?

+4
source share
1 answer

Using php / mysql write in data.js, use the /data.js example as an example. (or rename your .php to data.js and parse as php ( Parse js / css as a PHP file using htaccess )).

installing a datagrid data source from the fuel system from the core network gives the right direction.

Suppose you get a database table with fields: id, title and city, and you want to show this in a datagrid.

Create a php file that returns the json format from your mysql (example):

data.php:

 <? error_reporting(E_ALL); ini_set('report_errors','on'); $mysqli = new mysqli('localhost', 'root', '*******', 'cities'); if ($mysqli->connect_error) { die('Connect Error (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error); } $data = array(); if ($result = $mysqli->query('SELECT `id`,`title`,`city` FROM `poi`')) { //$data['testdata'] = mysqli_fetch_all($result,MYSQLI_ASSOC); while(($row=$result->fetch_assoc())){$data[]=$row;} $result->close(); } header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Content-type: application/json'); echo json_encode($data); exit;

create a static data source testdatasource.js :

 /* * Fuel UX Data components - static data source * https://github.com/ExactTarget/fuelux-data * * Copyright (c) 2012 ExactTarget * Licensed under the MIT license. */ (function (root, factory) { if (typeof define === 'function' && define.amd) { define(['underscore'], factory); } else { root.TestDataSource = factory(); } }(this, function () { var TestDataSource = function (options) { this._formatter = options.formatter; this._columns = options.columns; this._delay = options.delay || 0; }; TestDataSource.prototype = { columns: function () { return this._columns; }, data: function (options, callback) { var self = this; setTimeout(function () { var data; $.ajax({ url: '/data.php', dataType: 'json', async: false, success: function(result) { data = result; } }); // SEARCHING if (options.search) { data = _.filter(data, function (item) { var match = false; _.each(item, function (prop) { if (_.isString(prop) || _.isFinite(prop)) { if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true; } }); return match; }); } var count = data.length; // SORTING if (options.sortProperty) { data = _.sortBy(data, options.sortProperty); if (options.sortDirection === 'desc') data.reverse(); } // PAGING var startIndex = options.pageIndex * options.pageSize; var endIndex = startIndex + options.pageSize; var end = (endIndex > count) ? count : endIndex; var pages = Math.ceil(count / options.pageSize); var page = options.pageIndex + 1; var start = startIndex + 1; data = data.slice(startIndex, endIndex); if (self._formatter) self._formatter(data); callback({ data: data, start: start, end: end, count: count, pages: pages, page: page }); }, this._delay) } }; return TestDataSource; }));

This creates a data set from data.php $.ajax({ url: '/data.php', dataType: 'json', async: false, success: function(result) { data = result; } });

In html, call your dataset and create the columns:

 var dataSource = new TestDataSource({ columns: [ { property: 'id', label: 'ID', sortable: true }, { property: 'title', label: 'Title', sortable: true }, { property: 'city', label: 'City', sortable: true } ], delay: 250 });

Initialize the grid using this data source:

 $('#MyGrid').datagrid({ dataSource: dataSource });

Get the working data file:

  • download source (zip) from and extract to / fuelux -master /
  • create / index.html

index.html

 <!DOCTYPE html> <html lang="en" class="fuelux"> <head> <meta charset="utf-8"> <title>Fuel UX 2</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./fuelux-master/dist/css/fuelux.css" rel="stylesheet"> <script src="./fuelux-master/lib/require.js"></script> <style type="text/css"> body { padding-bottom: 200px; } </style> <script> requirejs.config({ paths: { 'jquery': './fuelux-master/lib/jquery', 'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min', 'bootstrap': './fuelux-master/lib/bootstrap/js', 'fuelux': './fuelux-master/src', 'sample': './fuelux-master/sample' } }); require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource,datasourceTree) { // DATAGRID var dataSource = new StaticDataSource({ columns: [ { property: 'toponymName', label: 'Name', sortable: true }, { property: 'countrycode', label: 'Country', sortable: true }, { property: 'population', label: 'Population', sortable: true }, { property: 'fcodeName', label: 'Type', sortable: true } ], data: sampleData.geonames, delay: 250 }); $('#MyGrid').datagrid({ dataSource: dataSource }); }); </script> </head> <body> <div class="container"> <!-- DATAGRID --> <table id="MyGrid" class="table table-bordered datagrid"> <thead> <tr> <th> <span class="datagrid-header-title">Geographic Data Sample</span> <div class="datagrid-header-left"> <div class="input-append search datagrid-search"> <input type="text" class="input-medium" placeholder="Search"> <button class="btn"><i class="icon-search"></i></button> </div> </div> <div class="datagrid-header-right"> <div class="select filter" data-resize="auto"> <button data-toggle="dropdown" class="btn dropdown-toggle"> <span class="dropdown-label"></span> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li data-value="all" data-selected="true"><a href="#">All</a></li> <li data-value="lt5m"><a href="#">Population &lt; 5M</a></li> <li data-value="gte5m"><a href="#">Population &gt;= 5M</a></li> </ul> </div> </div> </th> </tr> </thead> <tfoot> <tr> <th> <div class="datagrid-footer-left" style="display:none;"> <div class="grid-controls"> <span> <span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span> </span> <div class="select grid-pagesize" data-resize="auto"> <button data-toggle="dropdown" class="btn dropdown-toggle"> <span class="dropdown-label"></span> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li data-value="5" data-selected="true"><a href="#">5</a></li> <li data-value="10"><a href="#">10</a></li> <li data-value="20"><a href="#">20</a></li> <li data-value="50"><a href="#">50</a></li> <li data-value="100"><a href="#">100</a></li> </ul> </div> <span>Per Page</span> </div> </div> <div class="datagrid-footer-right" style="display:none;"> <div class="grid-pager"> <button type="button" class="btn grid-prevpage"><i class="icon-chevron-left"></i></button> <span>Page</span> <div class="input-append dropdown combobox"> <input class="span1" type="text"> <button class="btn" data-toggle="dropdown"><i class="caret"></i></button> <ul class="dropdown-menu"></ul> </div> <span>of <span class="grid-pages"></span></span> <button type="button" class="btn grid-nextpage"><i class="icon-chevron-right"></i></button> </div> </div> </th> </tr> </tfoot> </table> </div> </body> </html>

see ./fuelux-master/ in requirejs configuration paths. Also see initializing var dataSource to determine your columns. At least you need to write a full html table with id = "MyGrid".

Some refactoring and use of CDN examples: http://plnkr.co/hZRjry5vG8ZcOG4VbjNq

  • use bootstrap and jQuery via CDN with requirejs, see Download Bootstrap from CDN with Require.js
  • replace include.js with datagrid.js ( note , datagrid will not work without select.js and util.js is required for select.js)
  • remove sample / datasourceTree because we don't need it
+4
source

More articles:


All Articles