tabletabs plugin on jsFiddle

tabletabs plugin on jsFiddle

robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
edited October 2012 in General
I've been working on web apps for quite some time. Today I looked at jsFiddle for the first time. It's really cool. Have a look at this cool tabletabs plugin I put there. The tabletabs converts a single table element to jquery ui tabs based on the grouping text found in the table cell at the specified column index. The jsFiddle example also uses dataTables for that added kick.

jsFiddle: http://jsfiddle.net/atomofthought/Ms9ug/
Full page: http://jsfiddle.net/atomofthought/Ms9ug/embedded/result/

I hope someone finds this useful.

Robert

Replies

  • renzosilvrenzosilv Posts: 11Questions: 0Answers: 0
    edited October 2012
    That's really cool! Thanks for sharing it... I was thinking about building a page that could use something just like it.

    Funny, I guess I am meant to make it now. ha
  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin
    Very nice! Interesting approach to automatic categorisation :-). I've added a link to the DataTables news feed as I think this will prove interesting to quite a number of people.

    Regards,
    Allan
  • pranay9pranay9 Posts: 2Questions: 0Answers: 0
    edited October 2012
    That's really cool! Thanks for sharing it
  • mkoryakmkoryak Posts: 14Questions: 0Answers: 0
    have you considered filtering the original table instead of creating new tables for each tab?

    The benefit of that approach is that when rows are added to the original table they are automatically 'put' in the correct tab.
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    I am not sure what you mean. Can you please explain?
  • mkoryakmkoryak Posts: 14Questions: 0Answers: 0
    Ok, here is some psuedocode:

    $.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
    return isMatch(currentTabName, aData);
    });

    where isMatch looks at some column in the data and returns true if its the same as the tab name.

    now all you have to do is make sure to not show the 'tab name' column in the datatable, add some tabs that update the 'currentTabName' variable and filter the table when you click them
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    edited October 2012
    That is a really good idea.
  • kguskekguske Posts: 3Questions: 0Answers: 0
    Not sure if something changed, but this doesn't appear to work now on IE 9, Chrome 22, FF 16. Strange - I saw it last week and it was working (not to mention awesome!)
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    Yes. That is strange. Maybe a required file has changed.
This discussion has been closed.