jeudi 26 mars 2015

How can I add jTable in admin page?


I am really having a hard time to integrate jTable ang jquery-ui in my plugin's admin page, can somebody help me, I already tried adding it through admin_enqueue_script but still no luck. I've tried viewing the page source in my browser and the scripts seems to be loaded already, but still got nothing.


link to jTable : http://ift.tt/1txSWuy


Thanks in advance!


Here's my code:



// add actions
add_action('admin_init' , 'wog_membership_init ');
add_action('admin_enqueue_scripts', 'wog_requests_scripts' );
add_action('admin_menu', 'wog_requests_tab');


function wog_requests_tab(){
global $wog_member_admin_page;
add_menu_page( 'Requests Manager', "WOG Request Manager", 'manage_options', "wog_membership_requests");
$wog_member_admin_page = add_submenu_page( "wog_membership_requests", "Membership Requests", "Membership Requests", 'manage_options', "wog_membership_requests", "wog_membership_render");
}

//Enqueue my scripts
function wog_requests_scripts($hook){

global $wog_member_admin_page;
if ($hook != $wog_member_admin_page) {
return;
}
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script ('jquery-ui-tabs');
wp_enqueue_script ('wog-jtable-script');
wp_enqueue_style ('wog-jtable-style');
}

// registering my scripts and style
function wog_membership_init () {
wp_register_script ('wog-jtable-script', plugins_url( '/wog-request-manager/jtable/scripts/jtable/jquery.jtable.js', __FILE__ ));
wp_register_style ('wog-jtable-style', plugins_url( '/wog-request-manager/jtable/scripts/jtable/themes/metro/blue/jtable.min.css', __FILE__ ));

}

function wog_membership_render(){
?>

<div id="RequestManagerContainer" style="width: 600px;"></div>
<script type="text/javascript">

$(document).ready(function () {
//Prepare jTable
$('#RequestManagerContainer').jtable({
title: 'Table of people',
actions: {
listAction: '',
createAction: '',
updateAction: '',
deleteAction: ''
},
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
}
}
});

//Loading the container
$('#RequestManagerContainer').jtable('load');

});

</script>

<?php

}




Aucun commentaire:

Enregistrer un commentaire