Wordpress Grid 4 PHP Framework Integration - Sample Snippet tested with Wordpress 6.4.3, https://www.gridphp.com

wp-demo-snippet-latest.php

/**
 * Grid 4 PHP Framework
 *
 * @author Abu Ghufran <gridphp@gmail.com> - https://www.gridphp.com
 * @version 2
 * @date 20-Oct-2020
 * @license: see license.txt included in package
 */

/*
Usage Notes: 
1) If jQuery is already included in your theme, don't include it in script_footer function.
2) If more than one grids are being shown on a page, use script_footer hook only for first grid, comment out for rest in contructor.
3) Remember to set unique grid id in constructor, e.g. $this->grid_id = "list1";
4) If want to show grid in admin area, uncomment admin_init, admin_footer hooks from constructor. #2 also applies.
5) In case of CSS conflict with Wordpress theme, adjust CSS at the end of render() function.
*/
	 
class phpgrid_users
{
  	protected $g;
  	protected $grid_id;
  
  	public function __construct()
	{
		// set your shortcode name, should be unique. array parameters are (classname,function)
		add_shortcode("phpgrid-users", array($this,'render'));

		// ajax call management
		add_action('template_redirect', array($this,'json'));
		add_action('wp_footer', array($this,'script_footer'),20);	

		// for datagrid in admin pages (next 2 lines)
		//add_action('admin_init', array($this,'json'));
		//add_action('admin_footer', array($this,'script_footer'),20);	  

	  	$this->grid_id = "list1";
	  
		include_once(ABSPATH."phpgrid/inc/jqgrid_dist.php");

		// Database config file to be passed in phpgrid constructor
		$db_conf = array(
							"type"		=> "mysqli",
							"server"	=> DB_HOST,
							"user"		=> DB_USER,
							"password"	=> DB_PASSWORD,
							"database"	=> DB_NAME
						);

		$g = new jqgrid($db_conf);
		$this->g = $g;	  
	}

	function script_footer(){
		 $base_url = get_option('siteurl');
	?>
		<!-- if jquery already included in theme, comment very next line -->
		<script src="<?php echo $base_url; ?>/phpgrid/js/jquery.min.js" type="text/javascript"></script>

		<script>var $ = jQuery.noConflict();</script>
		<script src="<?php echo $base_url; ?>/phpgrid/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
		<script src="<?php echo $base_url; ?>/phpgrid/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
		<script src="<?php echo $base_url; ?>/phpgrid/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
	<?php
	}  
  
	public function json()
	{
		// If ajax call from datagrid
		if ( (isset($_GET["grid_id"]) && $_GET["grid_id"]==$this->grid_id) 
				&& ($_SERVER["HTTP_X_REQUESTED_WITH"] == 'XMLHttpRequest' || isset($_GET["export"]) || isset($_GET["import"])))
		{
			$this->render();
		}
	}

	/*
	public function add_rows($data)
	{
	  	$g = $this->g;
	  	$check_sql = "SELECT count(*) as c FROM wp_users";
		$rs = $g->get_one($check_sql);

		if($rs["c"] > 0)
			phpgrid_error("The users already exists in the database");
	}
	*/

	// actual grid sample code from demos
	public function render() 
	{
		ob_start();
		$g = $this->g;
		$opt["caption"] = "Sample Grid ". get_current_user_id();

		// horizontal scroll bar
		$opt["autowidth"] = false;
		$opt["shrinkToFit"] = false;
		$opt["cmTemplate"]["visible"] = "xs+";

		$g->set_options($opt);

		$g->table = "wp_users";

	  	// sample use if event handler
	  	/*
		$e = array();
		$e["on_insert"] = array("add_rows", $this, true);
		$g->set_events($e);
		*/
			
		// should be unique grid id
		$out = $g->render($this->grid_id);
		$base_url = get_option('siteurl');
	?>
		<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url; ?>/phpgrid/js/themes/redmond/jquery-ui.custom.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url; ?>/phpgrid/js/jqgrid/css/ui.jqgrid.bs.css" />

		<style>
		table {margin:0 !important; background-color: inherit;}
		table td, table th {border:0px !important; text-align:inherit; background:inherit; }
		.global-search input {padding: 3px 5px !important;}
		.ui-jqgrid .ui-jqgrid-htable td, .ui-jqgrid .ui-jqgrid-htable th, .ui-jqgrid .ui-pg-table td {padding: 1px 1px 0 1px !important;}
		.ui-jqgrid tr.jqgfirstrow td { padding: 0 2px 0 2px !important; }
		</style>

		<div>
		<?php echo $out?>
		</div>
	<?php
		$content = ob_get_clean();
		return $content;
	}
}

new phpgrid_users();

wp-demo-snippet-outdated.php

/**
 * PHP Grid Component
 *
 * @author Abu Ghufran <gridphp@gmail.com> - http://www.phpgrid.org
 * @version 1
 * @license: see license.txt included in package
 */

// Note: classname & grid-id should be unique when using multiple grids, line 18,23,57
// Same classname should be used in add_shortcode and add_action, line 13,16

// set your shortcode name, should be unique. array parameters are (classname,function)
add_shortcode("phpgrid-users", array('phpgrid_users','render'));

// ajax call management
add_action('template_redirect', array('phpgrid_users','json'));

function script_footer(){
	 $base_url = get_option('siteurl');
?>
	<!-- if jquery already included in theme, comment very next line -->
	<script src="<?php echo $base_url; ?>/phpgrid/js/jquery.min.js" type="text/javascript"></script>
	 
	<script>var $ = jQuery.noConflict();</script>
	<script src="<?php echo $base_url; ?>/phpgrid/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="<?php echo $base_url; ?>/phpgrid/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="<?php echo $base_url; ?>/phpgrid/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
<?php
}
add_action('wp_footer', 'script_footer',20);	
	 
// for datagrid in admin pages (next 2 lines)
add_action('admin_init', array('phpgrid_users','json'));
add_action('admin_footer', 'script_footer',20);

class phpgrid_users
{
  public static function json()
  {
	// list1 is unique ID passed to render function on line 54
        if ( (isset($_GET["grid_id"]) && $_GET["grid_id"]=="list1") && ($_SERVER["HTTP_X_REQUESTED_WITH"] == 'XMLHttpRequest' || isset($_GET["export"]) || isset($_GET["import"])))
	{
	  self::render();
	}
  }

  // actual grid sample code from demos
  public static function render() 
  {
	  include_once(ABSPATH."phpgrid/inc/jqgrid_dist.php");

	  // Database config file to be passed in phpgrid constructor
	  $db_conf = array(
						  "type" 		=> "mysqli",
						  "server" 		=> DB_HOST,
						  "user" 		=> DB_USER,
						  "password" 	=> DB_PASSWORD,
						  "database" 	=> DB_NAME
					  );

	  $g = new jqgrid($db_conf);

	  $opt["caption"] = "Sample Grid ". get_current_user_id();

	  // horizontal scroll bar
	  $opt["autowidth"] = false;
	  $opt["shrinkToFit"] = false;
	  $opt["cmTemplate"]["visible"] = "xs+";

	  $g->set_options($opt);

	  $g->table = "wp_users";

	  // should be unique grid id
	  $out = $g->render("list1");
	  $base_url = get_option('siteurl');
  ?>
	  <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url; ?>/phpgrid/js/themes/redmond/jquery-ui.custom.css" />
	  <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url; ?>/phpgrid/js/jqgrid/css/ui.jqgrid.bs.css" />

	  <style>
	  table {margin:0 !important; background-color: inherit;}
	  table td, table th {border:0px !important; text-align:inherit; background:inherit; }
	  .global-search input {padding: 3px 5px !important;}
	  .ui-jqgrid .ui-jqgrid-htable td, .ui-jqgrid .ui-jqgrid-htable th, .ui-jqgrid .ui-pg-table td {padding: 1px 1px 0 1px !important;}
	  .ui-jqgrid tr.jqgfirstrow td { padding: 0 2px 0 2px !important; }
	  </style>

	  <div>
	  <?php echo $out?>
	  </div>
  <?php
  }
}