grid mysqli

<?
require_once('connection.php');

include_once("./phpgrid-full-v2.0/lib/inc/jqgrid_dist.php");

//LISTADO TOTALES
// nombre del archivo excel
$n_archivo_l = 'facturas_' . $n_dia . '_' . date('d-m-y');
$fecha = date("Y-m-d");

$g = new jqgrid();

// $grid["url"] = ""; // your paramterized URL -- defaults to REQUEST_URI
$grid["rowNum"] = '30'; // by default 20
$grid["sortname"] = 'pago_fact ASC,fecha_fact'; // by default sort grid by this field
$grid["sortorder"] = "asc"; // ASC or DESC
$grid["caption"] = "$boton_panel[6]"; // caption of grid
$grid["autowidth"] = true; // expand grid to screen width
//$grid["width"] = 600;
$grid["height"] = 410;
$grid["multiselect"] = true; // allow you to multi-select through checkboxes
$grid["hiddengrid"] = false;
$grid["rowactions"] = false;
$grid["edit_options"]["beforeSubmit"] = "function(post,form){ return validate_form_once(post,form); }";
$grid["add_options"]["beforeSubmit"] = "function(post,form){ return validate_form_once(post,form); }";

// export PDF file params
$grid["export"] = array("filename"=>$n_archivo_l, "heading"=>$n_archivo_l, "orientation"=>"portrait", "paper"=>"a4");
// for excel, sheet header
$grid["export"]["sheetname"] = $n_archivo_l;


// export filtered data or all data
$grid["export"]["range"] = "filtered"; // or "all"

// excel visual params
$grid["cellEdit"] = true; // inline cell editing, like spreadsheet
$grid["rownumbers"] = false;
$grid["rownumWidth"] = 15;

$col = array();
$col["title"] = "id_fact";
$col["name"] = "id_fact";
$col["width"] = "2";
$col["export"] = false;
$col["hidden"] = true; // hide column by default
$cols[] = $col;

$col["title"] = "id_booking_fact";
$col["name"] = "id_booking_fact";
$col["width"] = "1";
$col["export"] = false;
$col["show"]["list"] = false;
$col["show"]["add"] = true;
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "factura";
$col["name"] = "numero_fact";
$col["width"] = "1";
$col["export"] = false;
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "apellidos";
$col["name"] = "apellidos_fact";
$col["width"] = "1";
$col["export"] = false;
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "nombre";
$col["name"] = "nombre_fact";
$col["width"] = "1";
$col["export"] = false;
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "valor";
$col["name"] = "valor_fact";
$col["width"] = "1";
//$col["align"] = "center";
$col["editable"] = true;
$col["export"] = true;
$col["search"] = true;
$col["editable"] = true;
$cols[] = $col;

$col["title"] = "fecha";
$col["name"] = "fecha_fact";
$col["width"] = "1";
//$col["align"] = "center";
$col["editable"] = true;
$col["export"] = true;
$col["hidden"] = false;
$col["search"] = true;
$col["editable"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "fecha pago";
$col["name"] = "fecha_pago";
$col["editable"] = true;
$col["width"] = "2";
$col["export"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "periodo_factura";
$col["name"] = "periodo_factura";
$col["width"] = "3";
$col["editable"] = true;
$col["export"] = true;
$col["search"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "pagada?";
$col["name"] = "pago_fact";
$col["width"] = "1";
$col["editable"] = true;
$col["export"] = true;
$col["search"] = true;
$col["hidden"] = false;
$cols[] = $col;

$col = array();
$col["title"] = "ver";
$col["name"] = "habitacion";
$col["width"] = "1";
$col["editable"] = true;
$col["export"] = true;
$col["search"] = true;
$col["hidden"] = false;
$cols[] = $col;

$g->set_options($grid);

$g->set_actions(array(
						"add"=>false, // allow/disallow add
						"edit"=>true, // allow/disallow edit
						"delete"=>true, // allow/disallow delete
						"rowactions"=>true, // show/hide row wise edit/del/save option
						"export_excel"=>true, // show/hide export to excel option - must set export xlsx params
						"export_pdf"=>false, // show/hide export to pdf option - must set pdf params
						"autofilter" => true, // show/hide autofilter for search
						"search" => 'simple', // show single/multi field search condition (e.g. simple or advance)
						"showhidecolumns" => false // show single/multi field search condition (e.g. simple or advance)
					)
				);



// you can provide custom SQL query to display data
$g->select_command =  "SELECT
			f.id_fact,
			f.id_booking_fact,
			f.numero_fact,
			f.id_resident_fact,
			f.valor_fact,
			f.fecha_fact,
			f.fecha_pago,
			f.periodo_factura,
			r.nombre_fact,
			r.apellidos_fact

			FROM facturas_lista f LEFT JOIN residents r ON  f.id_resident_fact = r.resident_id	";

// this db table will be used for add,edit,delete
$g->table = "facturas_lista";
// pass the cooked columns to grid
$g->set_columns($cols);

$grid_id = "hola";
// generate grid output, with unique grid name as 'list1'
$residentes = $g->render($grid_id);
/*
$grid["edit_options"]["afterShowForm"] = 'function(hola) {
    jQuery("#sin comedor").inputmask("mm/dd/yyyy", {yearrange: { minyear: 2010, maxyear: 2020 }});
    jQuery("#Worth").inputmask("currency", {prefix:"$ ",groupSeparator:",",alias:"numeric",placeholder:"0",autoGroup:!0,digits:2,digitsOptional:!1,clearMaskOnLostFocus:!1});
 }';
*/

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
   <title>facturas</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <!--para botón de icono de pantalla en el movil (android)-->
    <link href="apple-touch-icon.png" rel="apple-touch-icon" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="theme-color" content="#43a047">

     <style>
		input, select{
			width: auto;
		}
	   input[type=checkbox] {
			display: block;
			width: 20px;
			height: 20px;
		}
	</style>


	<!--JQUERY-->
	<link rel="stylesheet" type="text/css" href="./phpgrid-full-v2.0/lib/js/themes/cupertino/jquery-ui.custom.css">
	<link rel="stylesheet" type="text/css" media="screen" href="./phpgrid-full-v2.0/lib/js/jqgrid/css/ui.jqgrid.css"></link>

	<script src="./phpgrid-full-v2.0/lib/js/jquery.min.js" type="text/javascript"></script>
	<script src='./phpgrid-full-v2.0/lib/js/jqgrid/js/i18n/grid.locale-en.js' type='text/javascript' charset='UTF-8'></script>
	<script src='./phpgrid-full-v2.0/lib/js/jqgrid/js/i18n/grid.locale-es.js' type='text/javascript' charset='UTF-8'></script>
	<script type="text/javascript" src="./phpgrid-full-v2.0/lib/js/jqgrid/js/jquery.jqGrid.min.js"></script>
	<script src="./phpgrid-full-v2.0/lib/js/themes/jquery-ui.custom.min.js" type="text/javascript" ></script>
</head>

<body>

 <div id="div_lista_residentes" style=" width:100%; margin: 0 auto; clear:both; float:left; padding:10px 10px 20px 10px;" >
 <? echo $residentes ?>
 </div>
 <div id="b_volver" name="b_volver" style="width:90px; float:left;"  class="boton_ui">
	volver
</div>
<script>
$(document).ready(function() {
	$(function() {
		$( ".boton_ui").button();
	});

	$('#b_volver').click(function(){
		window.close();
	});

});
</script>
</body>
</html>