Flexigrid

Read 16 September 2012 Sunday about our cookies - see details

Your experience on this site will be improved by allowing cookies.

Allow cookies NEWS FEEDS

All the latest news & tips from Kent House

main website
NEWS AND VIEWS

blog home

blog archives
EMAIL MARKETING EVENT MANAGEMENT NHS AND HEALTH

Search the blog...
SOCIAL MARKETING

GO

SEARCH ENGINE OPTIMISATIONBrowse > Home / News and views / Flexigrid Tutorial

ENEWS & UPDATES

Flexigrid Tutorial
20 July 2009 by Andrew Irvine Filed under News and views Here at Kent House we are always looking at new ways to improve the user experience of our sites. I have recently been creating an application for a client and found an excellent jQuery-based component which will give your site the look and feel of amore traditional application if you are having to navigate between large sets of database records. This is the Flexigrid written by Paulo P. Marinas. There isn’t a lot of documentation around for this jQuery plugin so I decided to create this tutorial which might be of benefit to someone.

Sign up to receive breaking news as well as receive other site updates! Email address...
GO

FEATUREDVIDEO

As you can see the component is very intuitive and includes features to: Search for records matching your supplied criteria (by first clicking the search icon). Sort in either ascending or descending order by a selected column. Hide and show columns to make optimum use of available space. Navigate between pages using the navigation icons or jump straight to a particular page.
HOW TO USETECHNOLOGY NEWS FROM THE BBC

Blackmail fraudsters target webcam daters Google faces German mobile ban Students spend summer on new tech Death slur Facebook man guilty Twitter surrenders Occupy tweets
POPULAR TAGS accessibility awards brand brief CMS colour content

Adding the Flexigrid to your webpage couldn’t be easier. Just download the code from www.flexigrid.info and copy the required filesinto your site’s directories. You must also have a version of jQuery running on your site for this to work which can be found at jquery.com. You will find a flexigrid.js file in the downloaded archive. Include this file in the head section of your site as you would normally do along with the provided CSS file (you will need to copy across the entire contents of the ‘css’ directory including theimages). After creating a table element on your page with an id of ‘flex1′ for this example you can then create and include a javascript file consisting of the following code. The Flexigrid will then be created on page load. $(function() { $("#flex1").flexigrid( { url: 'staff.php', dataType: 'json', colModel : [ {display: 'ID', name : 'id', width : 40, sortable : true, align: 'left'}, {display:'First Name', name : 'first_name', width : 150, sortable : true, align:

management creative Data Disposal Data Protection
Data Protection Act Data Security Delegate Lists delegate registration Design design process Email

marketing Encryption event management event management booking event management tips EventManager events font Google AdWords
icon jargon buster Kent House logo online eventssystem payper-click advertising PR Search Engine

internet marketing

Optimisation SEO Social marketing

Social Networking social responsibility support for
charity Taschen Top Tips twitter typeface Usability

converted by Web2PDFConvert.com

'left'}, {display: 'Surname', name : 'surname', width : 150, sortable : true, align: 'left'}, {display: 'Position', name : 'email', width : 250,sortable : true, align: 'left'} ], buttons : [ {name: 'Edit', bclass: 'edit', onpress : doCommand}, {name: 'Delete', bclass: 'delete', onpress : doCommand}, {separator: true} ], searchitems : [ {display: 'First Name', name : 'first_name'}, {display: 'Surname', name : 'surname', isdefault: true}, {display: 'Position', name : 'position'} ], sortname: "id", sortorder: "asc", usepager: true, title:...