Move Column Sorting to Header Row

  • Resolved DesignSmith

    (@designsmith)


    10 years, 6 months ago

    Thanks for your wonderful work on TablePress. I’m looking for a table solution for a site I’m working on.

    I’m trying to figure out a way to place column sorting in a second table head row, as mentioned in the DataTables documentation here. I’m not sure where you are defining the placement of DataTables columnFilter in your plugin, or if that’s even something I would edit via your plugin or the DataTables plugin.

    My test page is up here.

    Thanks for any insight you have to offer.

    https://www.ads-software.com/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The feature that you mention is an add-on for the DataTables JS library, and as such, it is also available as TablePress Extension, see https://tablepress.org/extensions/datatables-column-filter/
    I suggest to install that. You could then maybe edit the JS code of that Extension to apply those settings from the page that you have found.

    The easier way might be to use a different Extension, see https://tablepress.org/extensions/datatables-columnfilterwidgets/ , which adds dropdowns for filter above the table.

    Regards,
    Tobias

    Thread Starter DesignSmith

    (@designsmith)

    Thank you for the columnfilterwidgets reference. I thought I had read through all of the extension info on your site, but missed that one.
    I had already implemented the first column-filter extension you mention above. It works great and I like that you’re injecting it into the table. Without properly explaining it, my initial inquiry was, in fact, regarding a way to use the column-filter TablePress Extension – but I was wondering where in that extension’s code I would look in order to put the column sorting in an additional table head row (versus the default placement in the table foot). It sounds like that extension’s JS code may hold the answer to my questions. I’ll look around in there.

    Thanks again for your help.

    Jeremy

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Jeremy,

    good to hear that the ColumnFilterWidgets Extension might be helpful!

    And yes, you will most likely have to modify the JS file of the Column-Filter add-on. Unfortunately, I’m not really familiar with that JS code (I only made it available as a TablePress Extension), so I don’t know where you would have to make changes, sorry.

    Regards,
    Tobias

    Thread Starter DesignSmith

    (@designsmith)

    You can change the location of the column sorting fields in the columnfilter.js file. Around line 590, the sPlaceHolder can be set to “foot” (default), “head:after” or “head:before”. There’s a bug in the column filter plugin that makes all of the table columns the same width – which breaks the layout on the final page. You can fix that by placing .text_filter { width: 100%; } in your CSS file.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    very nice find! Thanks for sharing this!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Move Column Sorting to Header Row’ is closed to new replies.