See video version of the tutorial

When the table is configured to be editable you also need to do one more step – configure the rules of editing for each column. In this tutorial we will look through all the possible configuration options in detail.

In editable wpDataTables the column blocks in admin panel configuration get 2 additional elements:

Configuring front-end MySQL editor in wpDataTables

Editor input types

Similar as for the advanced filtering, you can define the look of the input elements for each column with this setting.

Let’s go through each editor input type in detail.

1. None (preselected by default)

This is an empty editor input type, which means that front-end users will not be allowed to edit the values of this column, and no input would be rendered. For edited rows this column will not be modified, for new rows the default value will be used if provided, or a blank value will be inserted if there is no default set up.

2. One-line edit

This editor type will render a simple one-line text input. Users can enter anything they need in this field, whether strings or numbers:

Editing values in MySQL from WordPress front-end

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, or TEXT.

Issues to note: the only thing to note here is that if you use this edit on some MySQL column which is not VARCHAR or TEXT, and users type in some text, it will not be saved.

Validation rules: none.

3. Multi-line edit

This editor type will render a textarea, where users can type in long texts, and do line breaks:

Editing multiple lines in MySQL from WordPress site front

When these cells will be rendered in the front-end they will also have these line breaks that user typed in.

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, or TEXT.

Issues to note: the only thing to note here is that if you use this edit on some MySQL column which is not VARCHAR or TEXT, and users type in some text, it will not be saved. Also if MySQL type is e.g. VARCHAR(255) and users enter more then 255 chars, everything after 255’th character will be truncated on save.

Validation rules: none.

4. Single-value selectbox

This editor input type will render a dropdown selectbox, where front-end users could select one value out of several possible:

Editing MySQL tables with selectbox dropdowns in WordPress

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, TEXT, ENUM. Also can be used for numerical values.

Issues to note: In order for this input to work you must define the possible values of the column in the “Possible values” input of the column settings block on the table edit page, separated with a “|”:

Configuring editing MySQL tables in WordPress

Please note: we are working on making it possible to fetch sets of values from another table (e.g. via MySQL foreign key), but it is not yet implemented, so filling in the possible values manually is required for now

If you want one of the options to be pre-selected in the editor, enter it it in the “Default value” input.

Validation rules: none.

5. Multiple-value selectbox

This editor input type will render a selectbox, where front-end users could select several values out the defined:

Multi-selectbox in WordPress MySQL front-end editor

Applicable column types: on wpDataTables side any (but usually string), on MySQL side VARCHAR, TEXT, ENUM. Also can be used for numerical values.

Issues to note: In order for this input to work you must define the possible values of the column in the “Possible values” input of the column settings block on the table edit page, separated with a “|”. If you want one of the options to be pre-selected in the editor, enter it it in the “Default value” input.

Validation rules: none.

6. Date

This editor input type will render an input, which will show a datepicker on click. In this datepicker front-end users can define a date, which will then be pasted in a format that you provided on the settings page:

Editing dates in MySQL through WordPress front-end

The datepicker popup is responsive, which means that it will be looking fine also on mobiles and tablets.

Applicable column types: on wpDataTables side – date, on MySQL side DATE, TIMESTAMP. Also can be used for numerical values.

Issues to note: On some configurations you’d need to play around with column format on MySQL side. If you find some problems with some of the date formats please let us know.

Validation rules: none

7. E-mail link

This editor type will render a simple one-line text input, which will be validated as an e-mail when the user tries to save the entry. If the field isn’t blank, but not a valid email is specified, it will highlight the input field as incorrect, and the entry will not be saved:

Editing e-mail MySQL from WordPress front-end

Applicable column types: on wpDataTables side “E-mail link”, on MySQL side VARCHAR, or TEXT.

Issues to note: the only thing to note here is that if you use this edit on some MySQL column which is not VARCHAR or TEXT, and users type in an e-mail, it will not be saved.

Validation rules: the entered data must be a valid e-mail (but can be empty if column isn’t configured as non-empty). Alternatively can be entered in the “Two stick” format where the displayed text and the e-mail are separated with || (see the E-mail column documentation section for details)

8. URL link

This editor type will render a simple one-line text input, which will be validated as an URL link when the user tries to save the entry. If not a valid URL is specified it will highlight the input field as incorrect, and the entry will not be saved:

Editing URL links from WordPress front-end

Applicable column types: on wpDataTables side “URL link”, on MySQL side VARCHAR, or TEXT.

Issues to note: the only thing to note here is that if you use this edit on some MySQL column which is not VARCHAR or TEXT, and users type in an e-mail, it will not be saved.

Validation rules: the entered data must be a valid URL (but can be empty if column isn’t configured as non-empty). Alternatively can be entered in the “Two stick” format where the displayed text and the e-mail are separated with || (see the URL link column documentation section for details)

9. Attachment

This editor type will render a “Browse” button that would open the WP media library, and (if the file was already uploaded) a remove link:

Using WordPress media library in WordPress front-end

Using the “Browse” button front-end users can easily attach files to each table row with native WordPress Media Library.

Uploading files from WordPress front-end

Users can browse between previously uploaded files, or upload a new file.

Later users can just click on “Detach” to remove the link to the file if it’s not needed any more.

wpDataTables will store the link to the file in the MySQL table.

The column of the table will contain the download links to attachments.

Applicable column types: on wpDataTables side – URL link and Image, on MySQL side VARCHAR, or TEXT.

Issues to note:

  • If the Column type is set to Image, uploader will automatically insert a ‘thumb’ size in the table cell (resolution is defined in WP confi), and link it to full-size image. If you have a WP Lightbox 2 plugin installed, each image will automatically open in a lightbox,
  • Since wpDataTables is using native WP Media Library for uploading and managing files, it also derives the standard WP restrictions. Which means that front-end users that edit the table must have the upload_files capability to be able to upload attachments. You can add this capability to Subscribers if you need (e.g. with this or this plugin), and if you want to allow uploads for non-logged-in users you would need to remove the check for this capability (see our FAQ).
  • Files should be with extensions that WP allows.
  • Files shouldn’t be bigger that current PHP configuration allows.

Validation rules: none.

Mandatory fields

You can decide yourself which fields cannot be empty on user input regardless of their editor input type. This might be very helpful if a back-end MySQL table has a “NOT NULL” setting enabled for some column, so front-end users wouldn’t try to save a blank field for it.

To make some column mandatory just tick the “Cannot be empty” checkbox in the column configuration block:

Configuring mandatory fields in wpDataTables front-end MySQL editor

Then save and open the table in the front-end.

Edit some row, or create a new row, and take a look at the editor:

Configuring NOT NULL fields in wpDataTables

The field configured as mandatory gets a “*” sign near the label, and if you try to save the entry without filling in this field you get a validation error.

To understand better how this works try to play around with an editable table on your wpDataTables install or on our sandbox site – it is easier then it might seem after such a long documentation 🙂

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.