在管理菜單區使用jQuery jTable和Wordpress插件

Question

想用jQuery-jTable插件（jtable.org）從數據庫中獲取（並添加/編輯）記錄。我將所需的腳本加入隊列，並驗證它們是通過頁面源加載的，但我什麼也沒得到。根據入門指南，我應該至少得到一個空白表，但我得到一個空白頁。我的代碼在下面 - 任何想法？

守則排隊腳本：

function lfc_load_scripts() { 
//set global variables 
global $plugin_url; 

//set variable to use to point to process.php path 
$js_vars = array('plugin_url'=>$plugin_url,); 

//Load scripts and css for Tabs UI 
wp_enqueue_script('jquery-ui-tabs'); 
wp_enqueue_script('lfc-ui-js', $plugin_url . 'includes/js/tabs-ui.js', array('jquery')); 
wp_localize_script('lfc-ui-js', 'js_vars', $js_vars) ; 
wp_register_style('lfc_jquery_admin_css', $plugin_url . 'includes/css/ui.css', false, '1.0.0'); 
    wp_enqueue_style('lfc_jquery_admin_css'); 

//Load scripts and css for jTable 
    wp_enqueue_script('jquery-ui-core'); 
    wp_enqueue_script('lfc-jtable-js', $plugin_url . 'includes/js/jtable/jquery.jtable.js', array('jquery')); 
wp_register_style('lfc_jtable_css', $plugin_url . 'includes/js/jtable/themes/metro/blue/jtable.css', false, '1.0.0'); 
    wp_enqueue_style('lfc_jtable_css'); 

    //Load main jQuery file 
wp_enqueue_script('lfc-process-js', $plugin_url . 'includes/js/process.js', array('jquery')); 

} 
add_action('admin_enqueue_scripts', 'lfc_load_scripts'); 

這是jQuery的（按照jTable.org頁面上的說明）我在一個虛擬插件測試的JTable

$('#FighterTableContainer').jtable({ 
     title: 'Table of people', 
     actions: { 
      listAction: '/GettingStarted/PersonList', 
      createAction: '/GettingStarted/CreatePerson', 
      updateAction: '/GettingStarted/UpdatePerson', 
      deleteAction: '/GettingStarted/DeletePerson' 
     },    
     fields: { 
      PersonId: { 
       key: true, 
       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 
      } 
     } 
}); 

Answer 1

和它的工作顯示了一個帶有聲明字段的空白表格（Name,Age和RecordDate）。

問題與您的代碼：

1）以下：

wp_enqueue_script('jquery-ui-tabs'); 
wp_enqueue_script('lfc-ui-js', $plugin_url . 'includes/js/tabs-ui.js', array('jquery')); 

可以聲明爲：

wp_enqueue_script(
    'lfc-ui-js', 
    $plugin_url . 'includes/js/tabs-ui.js', 
    array('jquery', 'jquery-ui-tabs') 
); 

與同爲腳本'lfc-jtable-js'。也許，你的代碼需要排入footer。

2）總結你的代碼(document).ready，就像這樣：

jQuery(document).ready(function($) { 
    $('#FighterTableContainer').jtable({ 
     // rest of the code 
    }); 
});