Table Orderer for Prototype

TableOrderer est un petit script basé sur prototype permettant de créer dynamiquement des tableaux HTML à partir d’un tableau d’objet javascript défini en variable ou bien récupéré via AJAX.

Une Démo est diponible en ligne.

Plusieurs améliorations sont prévues :

  • possibilité de sélectionner une ou plusieurs lignes et d’en récupérer les valeurs
  • Ajout et suppression de ligne

Si vous avez des idées d’amélioration n’hésitez pas à mettre un commentaire

Cet article a été publié le Mardi 28 août 2007 à 22:27 et est classé dans Prototype. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.

35 commentaires pour “Table Orderer for Prototype”

  1. Hoath dit :
    5 septembre 2007 à 20:16

    I was lucky enough to find your code so soon after it’s release.

    What’s been bugging me is the JSON format my data has to be presented as - I’ve converted my database but after displaying ‘Loading..’ the script fails to display anything. I’m assuming its the length of data being processed but I’m having no luck..

    Try for yourself: http://ochim.cn/a2/ajax/grid/

    Great simple script though - many thanks.

  2. admin dit :
    5 septembre 2007 à 22:46

    Your JSON seems to have several line breaks and it seems that prototype don’t understand it.

    Try to generate all object on one line

    I’ve tried on the 10 first object of your JSON and it seems to works

    Tell me if you still have problem

  3. luks dit :
    30 septembre 2007 à 23:47

    I have been testing , and it is beautiful! but i prefer the filter above. Idont know to do that. Anyway, i love your script. Thanks you.

  4. Billy Wallace dit :
    2 octobre 2007 à 0:00

    Very nice solution. I added all the JavaScript to an external file and invoked it with:
    Event.observe(window, ‘load’, initTableOrderer );

    Is there any disadvantage in making the behavior totally separated in this way or is there a better way, such as Event.onReady?

    It would be nice to add the ability to turn an HTML table, which resides in the HTML file, into a JSON string and replace the existing table with the sortable version.

  5. admin dit :
    2 octobre 2007 à 7:57

    luks > Please wait for the next release (in the comming weeks) you will have the option to put the filter on top

    Billy > I’m also working on an evolution that will turn an existing HTML table. stay tuned

  6. Roby dit :
    9 novembre 2007 à 21:31

    Hi,
    I have found your “table orderer” script and it is just what I was looking for but I need Help: I need to add ckeckboxes to multiple selection but I don’t know javascript. Please, can you suggest a solution?

    Best regards

  7. Darrell dit :
    30 novembre 2007 à 2:33

    Hi,

    Just wondering how i would put the filter on the top of the table?

    I have had a look at the code and it is too complex for me to understand :)

    Thanks,
    Darrell

  8. luks dit :
    1 décembre 2007 à 1:29

    Hey! thanks!. the filter above is very good! I’ll waiting for more of yours scripts!.

    thanks you very much!

  9. walou dit :
    15 janvier 2008 à 15:57

    Hi !

    a Nice Appli, thanks.

    is’t possibl to replace the data with an xml file ?

    Good day

  10. Sebastien Grosjean - ZenCocoon dit :
    30 janvier 2008 à 19:40

    Hi, Salut,

    Seems to be nice script, I just grab it and give it a try but get surprise that I can’t use it with an already existing table, would be great to have such support.

    I also have a minor comment on the filename TableOrderer, I would personally enjoy to have named only with non-capital letters, maybe like table_orderer.js ;-)

    Cheers for this good tool, keep on rocking ;-)
    Merci

  11. Doodee dit :
    4 février 2008 à 4:47

    Thanks for sharing

  12. student dit :
    1 mars 2008 à 20:25

    can create also table sort with pagination?

  13. Ashokaditya Mohanty dit :
    10 mars 2008 à 17:42

    Hi Greg,

    Thanks for an easy-to-use ajax table.

    I was wondering how do you remove an unsortable table column from the filter list?

    For example if I’ve two columns A and B and column A is unsortable.
    Then how do you remove the column A from the filter box?

    Thanks.

    Regards,
    Ashokaditya.

  14. Gazza dit :
    26 mars 2008 à 12:25

    Thanks, for a nice script.
    Just downloaded found
    on line 172 of TableOrderer.js (version 1.2) , you’ve left a debug line in : console.log(’test’); - stops filtering from working (just needs commenting out and it works fine)

    Cheers

  15. Jason dit :
    19 mai 2008 à 23:27

    Hi Greg,

    Great script. I am hoping you are still developing it. If so, here are a few suggestions that would be great additions.

    1. Support first array of just headers. Remaining arrays would just be row data. This could cut overhead of $key=$value for every data value. Could be implemented in other ways too.
    2. Support a progress bar for large tables which take a long time for the client script to compute. I’ve seen very large tables where the web browser says the script is still running and prompts the user if they would like to continue running the script.
    3. Support export of table to Excel.
    4. Support display of a table name in the row above the header row.
    5. Support spaces in the header values. I’m not very good with javascript but got this working a while back. I forget now what I modified but I can send it to you for diff if you want.

    Thanks,
    Jason

  16. Rishi dit :
    6 juin 2008 à 19:00

    Hi Greg,
    Cool application. I am new to prototype so your code helped me a lot to learn.

    Thanks,
    Rishi

  17. Gianluca dit :
    9 juillet 2008 à 16:20

    Hello Greg! Your code is excellent! Just a question! I’d like to improve the space beteween asc.gif and desc.gif from the text.. sometimes these two element overlap (as you can see in http://www.neilgaimania.it/example.png). I tried to modify the css but without luck. Can you help me?

    Thank you very much!
    Gianluca

  18. David dit :
    18 juillet 2008 à 15:29

    Le projet est mort ?

  19. Santhosh dit :
    1 août 2008 à 16:36

    Thanks a lot…. Can u tell m how to get the values of the Selected Rows that will be used in further processing.

  20. kecapius dit :
    12 août 2008 à 9:47

    hi greg
    it’s very nice apps

    but,
    i have a problem with your script
    how to change sum of column ?

    i have 4 column to be added
    but your script still show the 3 first column

    any idea how to change it ?

    sory for my bad english

  21. LeaderGL dit :
    17 août 2008 à 11:54

    Hi,
    there are any updates for this projects? I’m interested for multi-page support.

    Great works!

    Regads,
    LeaderGL

  22. Hi dit :
    21 août 2008 à 11:11

    it’s pretty cool with the design and easy to use. Beside that, i would like to give some comment to the table design.. would this be better if you provide an action listener to every line of the data.. for instance, a click on the row will link to another program (for instance, we can either link it to the mvc controller, page etc). And also, if you could provide a check box feature that can remove (either by one particular records, or by all records).. thanks and really enjoy with such a good design

  23. Hi dit :
    21 août 2008 à 12:06

    For example, this is how it does in yui..

  24. Hi dit :
    21 août 2008 à 12:07

    var=”JsonDataTable”
    divToUpdate=”activityList”
    jsonData=”data”
    rowsPerPage=”10″
    sort=”name”
    desc=”false”
    href=”${pageContext.request.contextPath}/web/process/view/”
    hrefParam=”id”
    hrefQuery=”false”
    hrefDialog=”true”
    hrefDialogWidth=”600px”
    hrefDialogHeight=”400px”
    hrefDialogTitle=”Process Dialog”
    fields=”‘id’, ‘name’, ’state’”
    column1=”{key: ‘id’, label: ‘Id’, sortable: true}”
    column2=”{key: ‘name’, label: ‘Name’, sortable: true}”
    column3=”{key: ’state’, label: ‘State’, sortable: false}”

  25. Kowser dit :
    6 octobre 2008 à 8:21

    Excellent

  26. Jason dit :
    15 octobre 2008 à 18:05

    Hi,
    Already I like the look of things and will be giving it a test run to see how it works out with some application im making.
    One modification I’d like to know if it supports is paging ‘coz a table object with some of the issues from above comments can be sorted through paging.
    You may not have the time to make this modification and if thats the case please advice on how to make it page.

    Kind regards
    Jason

  27. Charly dit :
    12 novembre 2008 à 7:52

    Salut,
    Je suis a la recherche depuis 4jours d’un script similaire au votre, il en existe beaucoup, j’utilise actuellement celui de “Stuart Langridge” dont la derniere version remonte à avril 2007.

    Meme si tout ces script permettent d’avoir une column “inclassable” les valeurs dans cette colonne varient en fonction du “sorting process”.

    Est il possible d’avoir une colonne invariable, comme par exemple lors d’un tableau de classement, nous ne voulons pas que le “1-2-3-4-5-6-7-8-…” soit changé.

    J’ai trouvé deux script dont celui ci: “http://4umi.com/web/javascript/tablescroll.php”
    mais je n’ai pas reussi a les faire fonctionner sur ma page.

    Avez vous une idée?

  28. JessicaDoula dit :
    11 mai 2009 à 3:19

    I like your post. Good stuff. Keep them coming :)…

  29. Paul Borrego dit :
    15 mai 2009 à 21:26

    Hey there I really like your code. I am currently trying to use it as part of a project for the company I work for but I needed pagination capabilities. I added in some quick and dirty pagination to your code. This is really more of an alpha version but thought I would share the code if you were interested in merging it into your code base. It still needs lots of testing and a more features put in.

    Here is the code (The pagination example is named dealership.html in the zip file):
    http://www.leadiv.com/projects/tableorder/tableorder.pagination.zip

  30. Jason dit :
    31 juillet 2009 à 10:20

    Thanks for your contributions to this script Paul. I’ve got the search and pagination working great in FF3, but they don’t work in IE8 unless compatibility mode is enabled. Same results on this site and CNN. I tried the latest RC of prototype as well (1.6.1RC3) but no dice. Any ideas? BTW, my IE8 version is 8.0.6001.18702.

  31. Paul Borrego dit :
    21 août 2009 à 16:06

    Jason thanks for bringing that to my attention. I just recently saw your comment and have come out with a patch to address it. You can download it directly here: http://leadiv.com/projects/tableorder/tableorderer.zip. I tested it in FF3, IE8 and IE8 compatibility mode. Hopefully IE doesn’t go and break any more things! Let me know if this works for you.

  32. Anze Skerlavaj dit :
    4 septembre 2009 à 9:46

    Hi Greg, Paul & Jason! :)

    I have added some functionality to the script and would like to share it:
    - “actioner” (chekboxes in the first column which allow one to select a row and to call a user defined function on them) - Paul, I guess this is the same as Multiselect?
    - added “clear search field” button
    - removed multiselect (not nearly done yet, just throws an error when you double click a cell)
    I also added some (incomplete) version history. Care to make it better? :)

    The actioner should work, the issues that are left are cosmetic:
    - actioner tool placement is not done yet - I must figure out how you wanted this to work (or rewrite it with float: left/right divs)
    - column hiding must be added (you must have an ID column that is unique for actioner to work, but it would be nice if we could hide it)
    - ‘X’, ‘O’ and similar should probably be replaced with some nice images in default config

    I would appreciate some feedback:
    http://www.admundus.com/tableorderer.1.3.20090904.RC1.zip

    I have only uploaded .js and example css & .html. This version was built from Paul’s (link in previous comment).

    By the way, nice code - took me only a day’s work to make these changes. Very self-explanatory.

  33. Anze Skerlavaj dit :
    4 septembre 2009 à 9:50

    One more thing: Greg, now you still have the chance to re-release the code under LGPL, if Paul agrees (needless to say, I agree :) ). It is only fair that those who make (valuable) changes to the code share it with the original authors (and others). Just my point of view.

    Enjoy!

  34. Anze Skerlavaj dit :
    5 septembre 2009 à 18:13

    Also… is anyone else having problems with JSON? Prototype returns success, but the table doesn’t display (I see ‘loading…’ message). It doesn’t happen every time, but it does in about 50% of cases. Any idea what is going on? Some race condition?

  35. Anze Skerlavaj dit :
    7 septembre 2009 à 9:27

    @Hoath, Greg: Solved the JSON problems.
    onLoading() should not be used - the behaviour is browser specific, so this is not recommended. The bug manifests itself in FF on data from localhost (fast connection). In about half the cases the script displays table _before_ replacing it with “Loading…”, which means that table is never shown.
    The code from onLoading() event handler should be moved before the transport call - then it works.

Laisser un commentaire