Installing Editor in WordPress
There's been several forum questions recently asking how to configure DataTables or Editor within a WordPress website. This blog post provides a simple demonstration to quickly get DataTables and Editor working on your page. In this demonstration we show how to install DataTables in WordPress using two different methods:
- Direct script inclusion for fine grained control
- TablePress - a WordPress plug-in by Tobias Bäthge for a fully integrated DataTables / WordPress editing environment.
We also discuss how to install and configure Editor using direct inclusion.
WordPress Installation
The first step is to get WordPress installed and configured. There's two ways you can manage a WordPress site - you can self-host it on your server, or, you can let WordPress deal with the hosting.
If you self-host, you have total control. You get access to the filesystem, you can SSH in and move files around, you can add and remove packages. This means DataTables and Editor can be easily deployed.
WordPress-hosted sites are locked down. The free version disables plug-in installations and prevents any scripts from running - this means DataTables and Editor won't work! If you subscribe to a plan, you can install plug-ins that allow headers and footers, and code can be added, but you won't have access to the underlying file system. This means, though untested, DataTables would be usable in this environment. Editor requires access to its Javascript files, so provided they can be hosted on an accessible remote server, this would also work.
In summary, If you want DataTables, you either need a hosted WordPress with a paid plan or you need to self-host. If you want Editor, you need a paid plan with access to a remote server to host the Javascript files, or, you need to self-host.
As an aside, for those with technical curiosity, I self-hosted on a Vagrant managed Fedora 29 server. The installation was fairly painless - I used these excellent instructions from MangoLassi.it. I've also run a personal domain on a cPanel server where it is also easy to install WordPress.
Configuring DataTables
TablePress
The easiest way to add a DataTable to your site is to install Tobias Bäthge's TablePress WordPress plug-in. You define the table with an easy-to-use form which generates a shortcode that can be added to any post or page. All the necessary Javascript and CSS files are embedded within that shortcode so very easy to use.
Manual Method
If you want more control, you can manually add the table and necessary scripts. DataTables is open-source, CDN hosted software, so you can just reference those files in the CDN (or if you prefer download a copy to self host). Installing a plug-in such as Header And Footer Scripts allows you to add the scripts and CSS to either the page header or footer.
To insert a table and the DataTables code onto a page or a post, add a Custom HTML block and just type/paste the table's HTML. For a minimal table, it would be something like the following:
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
</tbody>
</table>
Then, at the bottom of that page, include the necessary scripts and styling into the head.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#example').DataTable();
} );
</script>
Configuring Editor
Before you can use Editor, you need to copy the distribution files to your server. The distribution, with all the necessary files, can be created by Generator or the Download page. This is explained in the manual so I won't repeat here. I installed the PHP libraries into a sub-directory of the web-server (‘/Editor').
WordPress works with either MariaDB or MySQL as its database. To avoid having a second database installation, I created an additional database specifically for the DataTables data - this used the same database credentials (username and password). Editor was configured to use this new database by updating the file Editor/lib/config.php. This process is explained in the Editor manual. This is my database setup in that config.php file:
$sql_details = array(
"type" => "Mysql", // MariaDB === MySQL
"user" => "sa", // database user (from WP install)
"pass" => "Pa55word123", // database password (from WP install)
"host" => "localhost",
"port" => "",
"db" => "datatables", // database created for DataTables
"dsn" => "",
"pdoAttr" => array()
);
I loaded the database with the DataTables demo data - the SQL scripts can be found in the examples/sql directory of the Editor download.
Once the distribution is in place, the database primed, then it's just a case of inserting the table by adding the TablePress shortcode or the Custom HTML block as before.
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
Then, like before, insert the scripts and styling are in the head section at the bottom of the page. Note the paths for the Editor files - they're within the WordPress website. Generator merged all the DataTables scripts into a single CDN include - these could be local to the server if you want to reduce your site's dependencies.
Be aware that if you're using a TablePress shortcode, the table's ID is tablepress-#, where ‘#' is the table number. Just replace example in the code below with that TablePress ID.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.css">
<link rel="stylesheet" type="text/css" href="/Editor/css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Editor/js/dataTables.editor.min.js"></script>
<script>
$(document).ready( function () {
var editor = new $.fn.dataTable.Editor( {
ajax: "/Editor/controllers/staff.php",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "/Editor/controllers/staff.php",
columns: [
{ data: null, render: function ( data, type, row ) {
return data.first_name+' '+data.last_name;
} },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
And that's it! I hope this was useful. If you have any comments, please post them below.