I'm looking for a plug-in to present a table of data in a HTML page. Data is coming from Ajax as XML or JSON. Requirements are fairly standard:
Plug is supported, with a live community
Table binds to data, or a mechanism to fill table with data.
Columns are sortable with the standard UI
Support for filters
Support for search (assisted search)
Preferably, table looks good by default without any change. Able to customize
every aspect of the table
Support interaction. e.g. Mouse Hover or Click
Customizable.
Paging
Scroll bars
Overall I think these are very basic requirements. This question also fold another question: how do you choose a plug-in? Looking at the jQuery plugin page, shows there are 19 pages of plugins, with names such as "Yet another table plug-in".
I don't a "Yet Another ...". I'm looking for the canonical plug-in. The one that "everyone is using", which has live community, people to consult with, reasonable documentation (mainly examples), and bug fixes.
Googl'ing for 'jquery table plug-in' yields 70,000 articles, but I cannot identify any plug-in has multiple references.
Please also advise about a general strategy how do you pick a plug-in. Which web site to you go? Which blogs do you follow? etc. Down the road I'll have to choose a charting plugin (although there, there seems to be two main plug-ins that stands up: Flot and jQuery Google chart).
I don't believe that there is an ultimate strategy to find exactly the plugin you need.
At least not without trying different options. Usually i limit the selection by what a see and read about a plugin (looking at exactly the things you mention: is there a good documentation? are there demos? is it still supported?), but in the end there's no way around trying out.
That said there are two plugins i used, which both do a very decent job, though i never used them for processing json-responses, only for making existing tables more dynamic and user-friendly. But both should do what you want.
http://www.datatables.net/usage/server-side
http://tablesorter.com/docs/example-ajax.html
Lately i prefer datatables as i find the plugin easier to configure and better looking by default. (And as i use jquery-ui already i really appreciate the support for themeroller).
But i guess in the end the choice is pretty subjective.
I would recommend you jqGrid. It meets all of your requirements.
Related
I'm looking for an auto suggest plugin that'll allow me to programmatically update the suggested results. I found a plugin which is almost perfect in terms of functionality.. http://code.drewwilson.com/entry/autosuggest-jquery-plugin it does everything else I need it to (multiple queries, comma separation, etc.)
however, I can't seem to keep updating the list of suggested result as it doesn't appear to have that functionality. Does anyone know of a plugin similar to the one above which supports the additional functionality I require?
Does anyone know of a good TreeView for the web that is nice looking, efficient, and uses web standards? We use jQuery so it would be nice if it did too, but that isn't a requirment.
I see no problems with this one
http://jquery.bassistance.de/treeview/demo/
Have you checked out DynaTree? It is based on jQuery, allows lazy loading of subtree data, AJAX/JSON data binding, drag & drop, selectable items (checkboxes) etc.
Here is the link:
http://code.google.com/p/dynatree/
Another one which looks quite good is jsTree. It is also higly configurable and allows AJAX callbacks with data binding, checkboxes to select items etc.
You can find it here:
http://www.jstree.com/
Both are free to use.
How can I make a table sortable using javascript without loading data via AJAX? More specifically, I'm looking for a solution that gives me the following:
Works on a plain old HTML table
Makes columns sortable using a natural comparison
Is agnostic of server-side technology (should be portable regardless of whether the tables are being rendered by JSP, PHP, etc)
Implemented preferably as an extension to JQuery, which I'm already using in the specific project I'd like to immediately apply this to. I'm open to suggestions involving another javascript framework such as YUI, but it will need to play nice with JQuery.
What I'm not looking for:
A solution which requires me to populate the data via an AJAX call. I'd like to apply this in a project that has a number of plain old HTML tables for things like search results that I'd like to quickly make sortable without rewriting any server-side code.
Paging.
Filtering.
The ability to specify arbitrary comparison logic.
I'm purposefully omitting our technology stack for the specific project I'm working on for now, but will include it if people feel that it is absolutely necessary. Again, I'm most interested in solutions that don't involve anything on the server. There are a ton of projects written in all sorts of languages that could use a little love in this area.
Regarding the issue of similar, existing questions on Stack Overflow
I've done some poking around, and the closest question I can find to mine is this one. My requirements are a little different, however, and so I decided to ask a new question.
The jquery plugin tablesorter works very nicely.
Tablesorter is a jQuery plugin which works similar to sortable.js, turning a normal HTML table into a sortable one.
Updated link (note this is not https://github.com/SortableJS/Sortable):
Try sortable.
Along with OrbMan's answer, you can look at wikibits.js, which is MediaWiki's version of the sorting code. It doesn't require any AJAX or special glue code, just a simple class (sortable) to designate sortable tables.
The code is freely licensed, and used in production all over the Wikimedia sites.
EDIT: MediaWiki switched to a version of Tablesorter starting in 86088 (April 2011).
I really like tristen's tablesort. It is dependency free, lightweight and doesn't require a lot of styling / doesn't mess with your own styling!
Download the sorttable.js
Include the sorttable.js, by putting a link to it in the HEAD of your page, like so:
<script src="sorttable.js"></script>
Mark your table as a sortable one by giving it a class of sortable:
<table class="sortable">
I'd like to know what can be done in a browser UI (using a browser+CSS+javascript, not using Flash or Silverlight). For example, I think it's possible to:
Drag and drop
Arrange list items horizontally, and make them behave like menu items
Make things on page visible or invisible, depending on where the mouse is hovering
I admit this is a broad question, but that's what I'm looking for: an overview of available UI techniques (preferably with, also, at least a little clue or hyperlink as to how to implement each one).
Do you know of such a list or dictionary?
I'm especially interested in any techniques for interaction and user input (i.e. not simply page layout and navigation where the end-user is only consuming information).
Edit: people answered that I should look to see what functionality is implemented in various 'JavaScript UI toolkits'. FWIW, the following are my brief review/summary after looking at some of the suggestions.
http://demos.mootools.net/ -- implements a small (not wide) variety of UI features
http://ajaxian.com/by/topic/ui -- not an organized or coherent reference, more like a blog that reviews various things.
http://jqueryui.com/demos/ -- concise, organized introduction to a dozen interactions and/or widgets
http://plugins.jquery.com/ -- a library of a couple of thousand 'plug-ins' in 20 categories ... vaster and not so immediately understandable nor so consistently documented as the jqueryui demos
http://www.dojotoolkit.org/ -- takes a bit of navigating ... the easiest introduction to all functionality might be http://dojocampus.org/explorer/
http://script.aculo.us/ -- not very big
http://extjs.com/ -- quite a variety of powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
http://mochikit.com/ -- this is another small library
http://developer.yahoo.com/yui/ -- includes about 20 widget classes, thorough documentation (each class description includes a link to demos), and special mention for having "Layout Manager" and "CSS Reset".
http://www.midorijs.com/ -- quite small and simple, no demos
To summarize, I think the best answers (i.e. the easiest-to-browse collections of the most functionality) are:
http://extjs.com/deploy/dev/examples/samples.html
http://dojocampus.org/explorer/
http://developer.yahoo.com/yui/examples/
A very great many things can be done in JS.
Try any of these javascript libraries:
http://www.dojotoolkit.org/
http://mootools.net/
http://jquery.com/
http://script.aculo.us/
http://extjs.com/
http://mochikit.com/
http://developer.yahoo.com/yui/
http://www.midorijs.com/
If you accept the HTML Canvas as valid HTML (Microsoft doesn't), you can do even more (requires Canvas support in your browser):
https://developer.mozilla.org/en/Canvas_tutorial
http://www.blobsallad.se/
http://www.benjoffe.com/code/demos/canvascape/ - 3rd person shooter
look at the documentation for things like mootools and jquery UI, there are plenty of examples of the crazy stuff that you can do in there.
Also check out ajaxians UI section
check out jquery UI http://jqueryui.com/ as well as plugins http://plugins.jquery.com/
this is just a simple example what you can achieve via Java Script
I think you could in principle do almost anything you can think of that involves the page changing how it looks in response to user action. I mean, js can do amazing visual effects, including pretty complex animation and vectors, and retrieve data from anywhere that allows it to using ajax, so put that way you can display anything you want how you want.
The question is how much resources these take client side. While pretty much anything is possible, not everything will necessarily be practical, and I doubt there's any reliable way to decide which things will be too resource-heavy to realistically implement on the client side.
Check out JQuery and JQueryUI
I was wondering if anyone happens to know of a jQuery (or pure javascript) mind map. I found this one a few times, but it uses MooTools, unfortunately.
I decided to port the one you found into a jQuery plugin, which can be found LINK REMOVED - SEE EDIT. It was written up in about 2 hours last night, so is probably riddled with bugs. If you find any bugs, feel free to email me at the email listed in my StackOverflow profile.
Edit: I've contacted the author of the original Mindmap, and my jQuery conversion has become the core of development. You can get it, as well as speed improvements and new functionality here, on the Github page.
I think you should try http://thejit.org/
I use it all the time and is perfect for my needs.
There's also arbor.js, much newer then the ones cited in other answers. It implements the force directed algorithm for layout, similar to js-mindmap that you cited, but with better performance since it uses webworkers. The actual rendering is left for you, so you can use jquery or whatever you prefer.
Also, if you decide to write your own implementation, a good visualization library is d3.js.
I wrote this one for a project, it's an enhanced jQuery plugin version of other js node maps I found online suitable for dynamic contents (i.e. also supports dynamic adding/removal of nodes, selection marks, customizable callbacks and styles).
Notice: IE wasn't in the compatibility targets since it's also officially being dropped