Support » Fixing WordPress » Using JQGrid in Posts

  • I am trying to use JQGrid in a post, but not sure how to do it. Is this something I would have to do with a plugin, or am I just doing it wrong here. This code works fine in a plain hmtl file. I am just looking to be pointed in the correct direction (noob with wp). Thanks!

    <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-smoothness/jquery-ui-1.8.23.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
    <script src="jqgrid/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="jqgrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>
    <script type="text/javascript">
    <table id="list"></table> <div id="pager"></div>
Viewing 3 replies - 1 through 3 (of 3 total)
  • I am also trying to get JQgrid to show up in a post also. I have written a plugin with php and a shortcode to accomplish this. I had to put the script calls in the header.

    The grid shows up with the correct column headers but the data will not show up.

    After learning about the structure of WP, I ended up putting the necessary scripts and css in my themes/scripts (or themes/js, depending on the theme) and themes/css folders respectively. All the themes I worked with already had jQuery, so I just needed to add the JQGrid scripts. Then I added references for the JQGrid css and scripts in the theme header:

    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/ui-smoothness/jquery-ui-1.8.23.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/ui.jqgrid.css" />
      wp_enqueue_script("jqgridm", get_template_directory_uri() . "/scripts/i18n/grid.locale-en.js", array( "jquery" ));
      wp_enqueue_script("jqgrids", get_template_directory_uri() . "/scripts/jquery.jqGrid.src.js", array( "jquery" ));

    Afterwards, I could just put this right in the post:

    <script type="text/javascript">
    jQuery(function() {
        datatype: "json",
        colNames:['a', 'b', 'c', 'd', 'e'],
          {name:'a',index:'a', width:50},
          {name:'b',index:'b', width:225},
          {name:'c',index:'c', width:60},
          {name:'d',index:'d', width:75},
          {name:'e',index:'e', width:75, align:"right" }
        pager: '#pager',
        sortname: 'e',
        sortorder: "asc",
        viewrecords: true,
        gridview: true,
        height: '100%',
        width: '100%',
        loadComplete: function(reload) {
    <table id="tableid"></table> <div id="pager"></div>

    I am using php to generate the data as json for the grid, and putting those in a json folder in my root www dir. My approach sounds a bit different than yours, but figured I would share my working solution.

    The only problem I have now is getting the grids to scale with the rest of the page, which I’m sure I’ll figure out when I get back around to it.

    If you want to share more details about what you are doing, I can see if I can offer any suggestions. I’ve been debating building a plugin for parametrized jqgrids, but that’s months out at this point if I decide to do it. Thanks!

    Hi enjaydo,
    Did you manage to get this working with WordPress tables.

    I am looking to do something for quick editing custom post types in the admin section, as a table row structured view.




Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using JQGrid in Posts’ is closed to new replies.