WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] JQuery DataTable Column Filter (18 posts)

  1. GlennHodas
    Member
    Posted 1 year ago #

    Hi Tobias -- This plug in is great ! Its so helpful, thanks for creating it!

    My question: I would like to add in the functionality for the JQuery DataTable Column Filter. . I see the code the author lists in his explanation. And i have downloaded the folder form his download site.

    How do i install this?

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, you can add that functionality via a "TablePress Extension", i.e. a plugin to the plugin. Please just install and activate https://github.com/downloads/TobiasBg/TablePress-Extensions/tablepress-datatables-columnfilter.zip as a regular WordPress plugin.
    Then change your Shortcode from something like

    [table id=123 /]

    to

    [table id=123 datatables_columnfilter=true /]

    This will transform the last row of your table (for which you need to have the "Table Foot" checkbox checked) via the script from the link you provided. There is no need to download or load any files from that site directly!

    By the way, if you'd prefer the filter boxes above the table, you can use the script http://datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/
    To use that, just install and activate https://github.com/downloads/TobiasBg/TablePress-Extensions/tablepress-datatables-column-filter-widgets.zip as a plugin and change the Shortcode to

    [table id=123 datatables_columnfilterwidgets=true /

    Regards,
    Tobias

  3. GlennHodas
    Member
    Posted 1 year ago #

    Tobias -- Thanks so much for these links. I tried both, and like the one where the filter fields are on the bottom of the table. (but both are very cool!)

    But my styling seems to be off, when i enable the footer row. The footer doesn't follow the header formatting. And then when i use the column filter plug-in, my columns expand in width such that my table bleeds off the end of the screen.

    I had purposefully shrunk the table data font size down, so as to accommodate the many columns, and still keep the table on one page. but the footer and/or column filter seem to be overriding that.

    I saw your documentation on column widths (and padding), and have been experimenting with both (see code below), but these codes don't seem to be changing the column width. So i'm thinking maybe my code is not correct.

    I'm sorry to be bugging you about this. I can only imagine how busy you must be. But if you have time, please review the screenshots and below code, and see if you see anything i can change. Thanks again!

    Here is a link to my table-in-progress:

    .tablepress-id-6 thead th
    {
    background-color: #DDD9DE;
    font-size: 9px;
    color: #000000;
    text-align: center;
    vertical-align: bottom;
    border: 1px solid #615555;
    text-shadow: none;
    }

    .tablepress .column-1 {
    width: 55px;
    }

    .tablepress-id-6 tr td
    {
    border: 1px solid #615555;
    font-size: 11px;
    text-align: center;

    }

    Glenn

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Glenn,

    yes, the footer row does not follow the head row styling, because your CSS code only modifies the head row :-) But that's easily fixed.
    Additionally, the text fields get their own (larger) width by the theme, so that the table extends. This should also be fixed easily with some CSS.

    Please replace the Custom CSS that you posted with this new CSS:

    .tablepress-id-6 thead th,
    .tablepress-id-6 tfoot th {
        background-color: #DDD9DE;
        font-size: 9px;
        color: #000000;
        text-align: center;
        vertical-align: bottom;
        border: 1px solid #615555;
        text-shadow: none;
    }
    
    .tablepress-id-6 tbody td {
        border: 1px solid #615555;
        font-size: 11px;
        text-align: center;
    }
    .tablepress-id-6 tfoot th {
        padding: 3px;
    }
    .tablepress-id-6 .text_filter {
        width: 100%;
        height: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 3px;
    }

    Regards,
    Tobias

  5. GlennHodas
    Member
    Posted 1 year ago #

    Thanks again!

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem! You are very welcome!

    Best wishes,
    Tobias

  7. Jeroen Janssen
    Member
    Posted 1 year ago #

    Hello Tobias,

    The information about the filter boxes above the table is great that's quite what I'm looking for.
    I do not understand where should I put the code to make it work.
    can you tell me where i must place the code to make it work.

    Thanks for the information

    regards,
    Jeroen

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jeroen,

    thanks for your post.

    You will just need to install the file from http://tablepress.org/download/extension/tablepress-datatables-column-filter-widgets.zip as a regular WordPress plugin and activate it.

    For each table that shall get this, then change the Shortcode in the page from something like

    [table id=123 /]

    to

    [table id=123 datatables_columnfilterwidgets=true /]

    Regards,
    Tobias

  9. Jeroen Janssen
    Member
    Posted 1 year ago #

    Hello Tobias,
    I have instald the update for table press and get the following problem with the filter column. The table where you can select your options, the code <div> table name </ div> appears.

    is there any solution for this?

    regards,

    Jeroen

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jeroen,

    yes, that's due to a change in the 0.9-RC. Sorry about that.

    I have fixed this in a new version 1.1 of the ColumnFilterWidgets Extension. Please install the update manually, from http://tablepress.org/extensions/datatables-columnfilterwidgets/

    Regards,
    Tobias

  11. perfectchoice
    Member
    Posted 1 year ago #

    Tobias!! Man love the new setup.

    Hey is there any way to use a set of radio buttons to filter the columns, providing the value used in a known value within the table?

    Really great Plugin!

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post! Nice to hear that you like the plugin! :-)

    Unfortunately, I'm not aware of a readily usable solution for checkboxes or radio buttons :-( You would have to develop this yourself, using the API functions of the external DataTables JavaScript library from http://www.datatables.net that TablePress uses.
    Unfortunately, I don't really have experience with that API, so I can't help with that. Sorry.
    For inspiration and hints, you might want to take a look at the "API" section in the DataTables examples at http://datatables.net/examples/

    Regards,
    Tobias

  13. Orduse
    Member
    Posted 4 months ago #

    Hey
    Can i use column filter without footer... ?? or use header instead of footer.

    Thanks

  14. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi,

    thanks for your question.

    No, sorry, the footer is required and moving it to the header is not possible for this Extension. However, you might want to try this Extension instead: http://tablepress.org/extensions/datatables-columnfilterwidgets/
    That will add dropdowns above the table.

    Regards,
    Tobias

  15. Jeroen Janssen
    Member
    Posted 4 months ago #

    For an example of columnfilterwidgets you could view this website: Opleidensnel

    regards,
    Jeroen

  16. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi,

    yes, that's a nice usage of it, indeed. :-)

    Regards,
    Tobias

  17. Orduse
    Member
    Posted 4 months ago #

    hey

    regarding my question 3 comments above, if i have to use footer then is it possible to hide names of column i.e not show on webpage ??
    that is my main aim is to hide footer from showing on web page.

    Thanks
    Ord :)

  18. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi,

    @Orduse: I'm confused. Can you please post a link to the page with your table, so that I can get a clearer picture of what you are trying to do? Thanks!

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic