MooDataTable - A Data Table Class for MooTools 1.2

Well, here’s the first version of my MooDataTable class… basically it’s a paginated, column-sorting data table that works with a JSON dataset. So far it features:

  •  Smart Pagination
  • Column Sorting
  • Request data via Ajax, one page at a time
  • Works with any Server Side scripting language, as long as it returns JSON data
  • Easy to style and customize

An example of it in action can be seen here: http://www.silverscripting.com/moodatatable/test.html
The full documentation can be found here: http://silverscripting.wikidot.com/moodatatable
The script can be downloaded here: http://www.silverscripting.com/moodatatable/MooDataTable.0.1.js

Since I’m fixing small bugs and stuff, it’s better to just grab it at git hub:
http://github.com/SilverTab/moodatatable/
Basically just go there and click on “Download”… you will get a zip file containing everything you need to get started…

11 Comments

  1. Posted October 20, 2008 at 3:50 pm | Permalink

    Hey, thanks for your help and adding the sortable option. This is by far the best “moo-table” around. :)

  2. Posted January 31, 2009 at 4:15 am | Permalink

    Hi.
    This seems to be a really good script.
    I’m already thinking of a few projects were I could test it. :D

    Tight now, my main question would be:
    Is it possible to display images on one of the columns?
    The name and path of each picture would come from the same fields of the database being displayed.
    Something like this:

    On the database we would have a record like this:
    [id_field] = 123
    [dir_path] = path_to_image

    The table would show:

    Thank you!

  3. Posted January 31, 2009 at 4:16 am | Permalink

    ops, my img example was interpreted as a real image.

    I was trying to show something like

    Thanks again!

  4. Posted January 31, 2009 at 4:17 am | Permalink

    And off it went again.
    Let me se if this time I can meke it show:

    path_to_image / 123. p n g

  5. Wahl
    Posted March 1, 2009 at 12:59 pm | Permalink

    Hey,

    Good work.
    Somebody tried to add a filter search ?

    Thanks.

  6. Daniel Engel
    Posted March 23, 2009 at 10:46 am | Permalink

    Also need a filter search here. Or at least a means for the JSON request to allow further selection data (ie. the query’s WHERE clause).

    Other than that… super nice!

    d.

  7. axel mendoza pupo
    Posted April 10, 2009 at 9:17 am | Permalink

    nice grid, but I also found a bug when there is only one page in the json response, the pagination tfoot span is not generated and the place appear blank breaking the grid style

  8. Posted July 13, 2009 at 9:11 am | Permalink

    Hi
    Lovin this mootable it’s the best.
    tweaked the code a bit so that the footer width is dynamic

    line 23
    createElements: function() {
    // build the table structure…
    colspan = this.options.headers.length;
    // added the line above based on the pasted in headers
    var structureHtml = “”;

  9. Posted July 13, 2009 at 9:13 am | Permalink

    sorry last line got cut:
    var structureHtml = ;

  10. Posted July 13, 2009 at 9:15 am | Permalink

    ah well you can figure out the rest ;-)

  11. eric
    Posted November 6, 2009 at 1:29 pm | Permalink

    does any one get this error in IE?

    in moodatable.js
    Line: 48
    Error: ‘id’ is null or not an object

    Works fine in FF.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*