In this tutorial, I will show you how to combine a jTable to wordpress's post or page. jTable is a jQuery plugin used to create AJAX based CRUD tables without coding HTML or Javascript. It has so many features that can simplify your "life" when you want to handle a complex table. Let's get started!
Step 1
Requirement:
1. wordpress-3.8.1
2. wordpress plugin : insert-javascript-css, download from www.nutt.net
3. jTable with PHP Samples, download from www.jtable.org
Step 2
1. Install and activate "insert-javascript-css" plugin to your wordpress
2. Create database (separate from wordpress main database) for jTable and create table "people" with data from Samples included (jtabletestdb.sql)
3. Edit SQL connection in "PersonActions.php" with your own setting for example :
$con = mysql_connect("localhost","root","root"); //change with your database connection setting mysql_select_db("jtabletestdb", $con);
4. Put jTable-PHP-Samples folder into wordpress folder
Step 3
1. Find "header.php" in your wordpress themes folder, I'm using hueman themes, so the "header.php" should stored in wp-content\themes\hueman\header.php . Edit "header.php" with inserting the jTable prerequisite script beetween <head></head> like this:
<title><?php wp_title(''); ?></title>
<link href="<?php bloginfo('pingback_url'); ?>" rel="pingback"></link>
<!--START INSERTING JTABLES PREREQUISITE SCRIPT -->
<link href="jTable-PHP-Samples/codes/themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"></link>
<link href="jTable-PHP-Samples/codes/scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css"></link>
<script src="jTable-PHP-Samples/codes/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jTable-PHP-Samples/codes/scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="jTable-PHP-Samples/codes/Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
<!--END INSERTING-->
Step 4
1. Create a New Post
2. Insert Javascript/CSS (click the plugin icon)
Insert this script in the dialog box above and then "Save" :
<script type="text/javascript">
$(document).ready(function () {
//Prepare jTable
$('#PeopleTableContainer').jtable({
title: 'Table of people',
actions: {
listAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=list',
createAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=create',
updateAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=update',
deleteAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=delete'
},
fields: {
PersonId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Author Name',
width: '40%'
},
Age: {
title: 'Age',
width: '20%'
},
RecordDate: {
title: 'Record date',
width: '30%',
type: 'date',
create: false,
edit: false
}
}
});
//Load person list from server
$('#PeopleTableContainer').jtable('load');
});
</script>
3. Insert in Post Content
<div id="PeopleTableContainer" style="width: 600px;"> </div>
4. View Your Post
Congratulations! You're done. :)
Step 1
Requirement:
1. wordpress-3.8.1
2. wordpress plugin : insert-javascript-css, download from www.nutt.net
3. jTable with PHP Samples, download from www.jtable.org
Step 2
1. Install and activate "insert-javascript-css" plugin to your wordpress
2. Create database (separate from wordpress main database) for jTable and create table "people" with data from Samples included (jtabletestdb.sql)
3. Edit SQL connection in "PersonActions.php" with your own setting for example :
4. Put jTable-PHP-Samples folder into wordpress folder
Step 3
1. Find "header.php" in your wordpress themes folder, I'm using hueman themes, so the "header.php" should stored in wp-content\themes\hueman\header.php . Edit "header.php" with inserting the jTable prerequisite script beetween <head></head> like this:
<title><?php wp_title(''); ?></title>
<link href="<?php bloginfo('pingback_url'); ?>" rel="pingback"></link>
<!--START INSERTING JTABLES PREREQUISITE SCRIPT -->
<link href="jTable-PHP-Samples/codes/themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"></link>
<link href="jTable-PHP-Samples/codes/scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css"></link>
<script src="jTable-PHP-Samples/codes/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jTable-PHP-Samples/codes/scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="jTable-PHP-Samples/codes/Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
<!--END INSERTING-->
Step 4
1. Create a New Post
2. Insert Javascript/CSS (click the plugin icon)
Insert this script in the dialog box above and then "Save" :
<script type="text/javascript">
$(document).ready(function () {
//Prepare jTable
$('#PeopleTableContainer').jtable({
title: 'Table of people',
actions: {
listAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=list',
createAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=create',
updateAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=update',
deleteAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=delete'
},
fields: {
PersonId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Author Name',
width: '40%'
},
Age: {
title: 'Age',
width: '20%'
},
RecordDate: {
title: 'Record date',
width: '30%',
type: 'date',
create: false,
edit: false
}
}
});
//Load person list from server
$('#PeopleTableContainer').jtable('load');
});
</script>
3. Insert in Post Content
<div id="PeopleTableContainer" style="width: 600px;"> </div>
4. View Your Post
Congratulations! You're done. :)