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