Hi,

I found the CSS code to hide the "New", "Edit" and "Delete" buttons. This code applies to all tables (Backend+Frontend).

.DTTT_button_new { display: none !important; }

.DTTT_button_delete { display: none !important; }

On my page are 5 tables and only 2 of them (ID 1 and 2) shall be limited to "Edit" by the user. Another user shared code to implement into functions.php file of the theme, but I wasn't able to do it successfully.

1. Can I limit the button hiding to the Frontend and see all the buttons on the backend?

2. Can I limit the CSS code to specific tables or could you provide the code (and  where to add) for the functions.php?!

Thanks

Martin

Hi,

when you want to use the WPDataTables as a frontend form to collect data from users, it might be helpful to limit the actions users can apply to the tables. 

I want to share my experiences (with the help of Milan -Thank you!).

Hiding "New", "Edit" or "Delete" buttons only on frontend works, when this code is saved to the page. Code applying to all tables on the page:

<style>   

.DTTT_button_new { display: none !important; }    

.DTTT_button_delete { display: none !important; }

</style>

[wpdatatable id=1]

Hiding "New" and "Delete" button only in id "table_1". That id can be different from the table No. in the shortcode.

<style>
.wpDataTables.wpDataTablesWrapper a.dt-button.new_table_entry.DTTT_button.DTTT_button_new[aria-controls="table_1"], .wpDataTables.wpDataTablesWrapper a.dt-button.delete_table_entry.DTTT_button.DTTT_button_delete[aria-controls="table_1"]{ display: none !important; }
</style>
[wpdatatable id=1]

Hiding paginating and breadcrumb nav. for all tables on that page:

<style>

 .paginate_button { display: none !important; }
 .breadcrumb-navigation { display: none !important; }

</style>

[wpdatatable id=1]

It wouldn't make sense to hide only the "New" button because inside the edit-box there is a button "Save and add new" or similar. You can hide it like this (only table_1):

<style>
#table_1_apply_edit_dialog.btn.btn-success.btn-icon-text.waves-effect { display: none !important; }
</style>

Have a nice table-building... :)

Kind regards

Martin