JQuery DataTable Column Filter

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 https://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

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

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

Thanks again!

Hi,

sure, no problem! You are very welcome!

Best wishes,
Tobias

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

Hi Jeroen,

thanks for your post.

You will just need to install the file from https://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

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

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 https://tablepress.org/extensions/datatables-columnfilterwidgets/

Regards,
Tobias

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!

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 https://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 https://datatables.net/examples/

Regards,
Tobias

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

Thanks

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: https://tablepress.org/extensions/datatables-columnfilterwidgets/
That will add dropdowns above the table.

Regards,
Tobias

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

regards,
Jeroen

Hi,

yes, that’s a nice usage of it, indeed. ??

Regards,
Tobias