nurmanx

One More Thing

Monday, May 05, 2014

jTable Wordpress Integration

9:38 AM Posted by nurmanx 5 comments
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="&lt;?php bloginfo('pingback_url'); ?&gt;" 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. :)

5 comments:

  1. Anonymous7:12 PM

    Where do you place the jTable files and jquery files? I tried following your directions and it just shows the div html in the post.

    ReplyDelete
    Replies
    1. nurmanx4:33 PM

      Put jTable-PHP-Samples (downloaded from http://www.jtable.org/downloads/jTable-PHP-Samples.zip) parallel with wp-admin, wp-content, and wp-include (See Step 2 point 4).
      In jTable-PHP-Samples folder there was a jquery file located at "\jTable-PHP-Samples\Codes\scripts"
      Then, following step 3 point 1 to add jquery, jquery-ui, and jtable to your wordpress header.php

      Delete
  2. Lily Taylor3:48 AM

    Wow! It’s a nice jQuery script; I was also seeking for that, thus i got it right now from at this time. Keep it up admin of this site.

    My Signature: Do you know that "Optimized360" is the top leading Medical Websites Design agency in the USA? They are the best in the business, they offered custom affordable design for all healthcare professionals.

    ReplyDelete
  3. Anonymous5:10 AM

    I have followed your instructions meticulously for three times. However when I view my site I only get the following on my page :

    id="PeopleTableContainer" style="width: 600px;" This is from your point 3 in your tutorial. I cannot insert the DIV as it cannot be tagged.

    I am using XAMPP. Please help. Regards

    ReplyDelete
  4. Anonymous11:31 PM

    Is this blogspot still active?

    ReplyDelete