I'm trying to find a html (or maybe flash) table template with rich ui features. I googled it, but couldn't find something that has a rich ui, also looked through jQuery, still no luck. Before going any deeper search, I believe someone may have suggestions for me.
If you're looking for tables with lots of features you might want to take a look at ExtJS Grids (You have to click on Grids section to take a look at the demos).
jQuery has the TableSorter plugin but that is a simpler option.
Related
I'm trying to move the dropdown that DataTables uses to determine how many rows to display. One way I thought of was to use jQuery's prependTo()/appendTo() functions, but it feels a bit too hack-y. I tried searching through the DataTables API to see if there was some native way of doing it, but I couldn't find anything. I was wondering if there was a better way to do this.
This is basically what I'm trying to do: http://jsfiddle.net/jbZG7/
$("#tableID").dataTable();
$("#tableID_length").prependTo("#new-div-id");
Thanks!
I created a custom dataTables widget which combined jQuery UI Dialog with DataTables. I too needed to move dataTable controls to custom locations, which could not be accomplished with sDOM very much in the same way you need to.
When looking for a solutions I was concerned about .appendTo/.prependTo being too hacky, but as it turns out .appendTo/.prependTo are the best solutions I have found.
$('tableID').dataTable({
fnInitComplete : function( oSettings, json ){
$("#tableID_length").detach().prependTo("#new-div-id");
}
});
Updated jsFiddle
fnInitComplete
Open the dataTables.js file. Look inside and see if you can find anything related to paging. I did a CTRL+F and typed pagination. You want to look for information on where the pager is drawn.
Also...using firebug to set breakpoints in the dataTables.js file might be a big help too.
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.
I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.
I want to implement with jQuery a tabbed interface for my website (like the firefox ones). They should also be able to be moved like the ones FireFox has.
If anyone knows of an already written library, please give me a link.
If you're already using jQuery, the jQuery UI Tabs has a sortable option for this.
Checkout the other demos for all the widgets there as well...in most cases it's not worth it to include the jQuery UI library for any 1 widget or effect...but if you can make use of a few of them, it's a nice library to work with. Of course there are alternatives out there, just throwing this as the simple/configurable option.
As a side note, it is jQuery UI....style it like you want.
ExtJS is more suitable for such interfaces. In the process of trying it out you will find many more amazing possibilities that it opens up. Also, it is very well written and a pleasure to work with.
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">