This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Sortable table

  • Creator
    Topic
  • #2335
    Lars
    Participant

    Hi,

    Need to make a sortable table. Has Bootstrap this feature anymore?

    I read about how one could achieve it, but this really is too difficult for me. Can I paste these codes in some file on my Child theme to get a new “sorting class” for my tables?

    See the sorting section: http://www.datatables.net/blog/Twitter_Bootstrap_2

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • #2337
    Lars
    Participant

    It seems this was a feature in the TBv1 that was removed. It can be reinstalled by downloading tablesorter:
    https://github.com/Mottie/tablesorter

    And re-add the css:
    https://github.com/twitter/bootstrap/blob/e877d125d7a2c673fec4e63600c2d8544c3128f6/bootstrap.css#L1059

    Can someone explain for an idiot how this is done?

    #2365
    Jason Bobich
    Keymaster

    You’d put the files in your Child theme and then you’re need to enqueue the javascript files and the CSS files:

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    http://codex.wordpress.org/Function_Reference/wp_enqueue_style

    And any custom javascript you need to write to activate everything, you can put in the /assets/js/custom.js file that is enqueued for you by default in all of the sample Child themes.

    #2374
    karlo
    Participant

    If you are an idiot there is a plugin for this http://tablepress.org/ I have used it 🙂

    The new version of WP-Table Reloaded http://wordpress.org/extend/plugins/wp-table-reloaded/

    Only loads JS when used and is easy to style. Each table can get own CSS class so you can add CSS code to site via own CSS file. But plugin also have CSS injection option, can be turned on/off. Can sort, filter and lots more.

    If you only need 1 or few tables and can fire things up manually do that but plugin and dev. is very good. Pretty much only Firebug or similar work to do.

    Plugin is free but highly donation worthy.

    • This reply was modified 7 years, 10 months ago by karlo.
    #2377
    Jason Bobich
    Keymaster

    Very cool! If you’re okay with straying from Bootstrap, that’s another option. — http://wordpress.org/extend/plugins/wp-table-reloaded/

    #2411
    Lars
    Participant

    Thanks guys.
    I guess Im to much of an idiot to understand the descriptions. I have used WP-Table Reloaded before and its good, but then the users cant edit a table within the WP editor. That plug is by the way outdated and replaced by TablePress: http://wordpress.org/extend/plugins/tablepress/

    I can only hope Jason will have the old Twitter BS class in within the next release ;- )

    #2414
    karlo
    Participant

    Yeah it is TablePress for now though WP-Table Reloaded still gets update. Tons of users.

    I dont quite understand the rush as TablePress can import from Reloaded and is still in beta stage. But he know better. They look similar but under the hood there are big changes. I think dev hate the old and love the new so are specific in pimping TablePress. Crazy plugin http://tablepress.org/info/#features Does add an “Edit” button on each table on front-end which link you directly to its own editor, but I doubt there are options in WPs own.

    I actually use it to avoid editing tables in editor! so I dont know who is the idiot. Anything but text and images I prefer to handle else where but I can see it must feel wrong to install plugin just for 1 table but since it load in a clever way and has sorting build in it is not really that much overkill.

    Just note you linked to 2 different table plugins, both support Bootstrap.

    http://www.datatables.net/blog/Twitter_Bootstrap_2 is what TablePress use, at the bottom he link to pre-made JS and CSS file but some steps to make. The other one is http://mottie.github.com/tablesorter/docs/example-widget-bootstrap-theme.html First one look easier. If you mix them up TablePress will definitely be easier 🙂

    • This reply was modified 7 years, 10 months ago by karlo.
    #2583
    iphoenix
    Participant

    There are these two as well:

    http://wordpress.org/extend/plugins/sorttable-post/

    http://wordpress.org/extend/plugins/easy-table/

    but its just adding a lot of redundant coding if you don’t build it in to your child theme. Add sorttable post to your child theme:

    1. Copy css into child theme’s css, change the colors to your theme:
    /* SORTABLE TABLES */

    table.sortable {
    border-collapse: collapse;
    clear: both;
    width: 100%;
    }

    table.sortable thead tr {
    background-color: #56411d;
    color: #ffff09;
    cursor: pointer;
    font-weight: bold;
    }

    table.sortable tr:nth-child(even) { background: #fcf7e8; }

    table.sortable th,
    table.sortable td {
    border: 1px solid #56411d;
    padding: 4px;
    vertical-align: top;
    word-wrap: break-word;
    }

    table.sortable th:hover:not(.sorttable_nosort) {
    background: #fa6900;
    }

    .sorttable_nosort {
    cursor: default;
    }
    2. Add JS to child theme’s Assets folder
    3. Enqueue JS:
    function java_scripts() {
    wp_register_script( 'themeblvd_theme-js', get_stylesheet_directory_uri() . '/assets/sorttable.js' );
    wp_enqueue_script('themeblvd_theme-js');
    }
    add_action( 'wp_enqueue_scripts', 'java_scripts' );

    4. Add sorttablepost.php to assets folder and add get templatepart to your functions:
    get_template_part( 'assets/sorttablepost');
    5. install theme and use shortcode if you want or use style=”sorttable” within your >table< tag

    • This reply was modified 7 years, 10 months ago by iphoenix.
    • This reply was modified 7 years, 10 months ago by iphoenix. Reason: mispell
    #11643
    iphoenix
    Participant

    Started using FooTable (http://themergency.com/footable/), seems to work really well. Even a wp plugin – http://wordpress.org/plugins/footable/

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.