Skip to main content
se añadieron 856 caracteres en el cuerpo
Origen Enlace
alanfcm
  • 20.9k
  • 11
  • 19
  • 35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
CTA- Cuotas
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../css/trirand/ui.jqgrid.css" />
    <script type="text/ecmascript"<html src="..xmlns="http:/js/codetabs.js"></script>
    <script type="text/ecmascript" src="www.w3./jsorg/themeswitchertool.js"><1999/script>
    xhtml">
    <head>
    <script>
       <meta $(document).ready(functionhttp-equiv="Content-Type" ()content="text/html; {charset=UTF-8"/>
          <title>CTA - $('.menuContainer').load('..Cuotas</menu.html');
        });title>
        
        function<!-- cargaForm(){The jQuery library is a prerequisite for all jqSuite products -->
        <script type="text/ecmascript" src="../js/jquery.min.js"></script> 
        <!-- This is the $(Javascript function()file {of jqGrid -->   
        <script type="text/ecmascript" src="../js/trirand/jquery.jqGrid.min.js"></script>
      $( "#dialog" )<!-- This is the localization file of the grid controlling messages, labels, etc.dialog({id:"dialog"
        <!-- We support more than 40 localizations -->
        <script type="text/ecmascript" src="../js/trirand/i18n/grid.locale-es.js"></script>
        <!-- A link to a jQuery UI ThemeRoller theme, closeText:more ""than });22 built-in and many more custom -->
        <link rel="stylesheet" type="text/css" media="screen" }href="../css/jquery-ui.css" );/>
        }<link rel="stylesheet" type="text/css" media="screen" href="../css/cuotas.css" />

        
 <!-- The link to functionthe load(){CSS that the grid needs -->
        
 <link rel="stylesheet" type="text/css" media="screen" href="../css/trirand/ui.jqgrid.css" />
   var nMes = document.getElementById("mes").value; / <script type="text/ecmascript" formulariosrc=".mes.value;/js/codetabs.js"></script>
        var nAnno<script =type="text/ecmascript" documentsrc=".getElementById("anno").value; /js/ formulario.mesthemeswitchertool.value;js"></script>
        
        $("#dialog").dialog('close');
        
            jQuery("#tblCuotas").jqGrid({<script>
                url:'cargaCuotas$(document).php',
                datatype: 'json',
                mtype: 'POST',
                mes: nMes,
                anno: nAnno,
                colModel:[
                    {
                        label: 'ID Cuota',
                        name: 'idCuota',
                        index:'idCuota',
                        width: 50,
                        key: true,
                        hidden: true
                    },
                  ready(function () {
                        label: 'Num$('. Cuota',
                        name: 'NumCuota',
                        index:'NumCuota',
                        width: 50
                    },
                    {
                        label: 'idmenuContainer'). Afiliado',
                        name: 'idAfiliado',
                        index:'idAfiliado',
                        width: 30,
                        align: 'right'
                    },
                    {
                        label: 'Nombre',
                        name: 'NOMBRE',
                        index:'NOMBRE',
                        width: 300load('../menu.html');
                    },
                    {
                        label: 'Cuota',
                        name: 'cuota',
                        index:'cuota',
                        width: 50,
                        align: 'right');
                    },
                   function cargaForm(){
                        label: 'Mes',
                        name: 'nMes',
                        index:'nMes',
                        width: 30,
                        align: 'right'
                    },
                  $( function() {
                        label: 'Mes',
                        name: 'mes',
                        index:'mes',
                        width: 80
                    },
                  $( "#dialog" ).dialog({
                        label: 'Año',
                        name: 'anno',
                        index:'anno',
                        widthid: 50"dialog",
                        aligncloseText: 'center'
                   "" },
                    {
                        label: 'Pagado',
                        name: 'pagado',
                        index:'pagado',
                        width: 50,
                        align: 'center');
                    },
                    {
                        label: 'Forma Pago',
                        name: 'FormaPago',
                        index:'FormaPago',
                        width: 100);
                    }
                    
                ],  
                loadonce: false,
                width: window.innerWidth-20,
                height: window.innerHeight-200,
                pager: '#paginacion',
                multiselect: true,
                rowNum: 50,
                rowList:[50,100,150],
                sortname: 'Custom',
                //sortorder: 'desc',
                viewrecords: true,
                caption: 'CUOTAS'
            });   
            
        function load(){    
            
            var nMes = document.getElementById("mes").value; // formulario.mes.value;
            var nAnno = document.getElementById("anno").value; // formulario.mes.value;
            
            $("#dialog").dialog('close');
            
                jQuery("#tblCuotas").jqGrid({
                    url:'cargaCuotas.php',
                    datatype: 'json',
                    mtype: 'POST',
                    mes: nMes,
                    anno: nAnno,
                    colModel:[
                        {
                            label: 'ID Cuota',
                            name: 'idCuota',
                            index:'idCuota',
                            width: 50,
                            key: true,
                            hidden: true
                        },
                        {
                            label: 'Num. Cuota',
                            name: 'NumCuota',
                            index:'NumCuota',
                            width: 50
                        },
                        {
                            label: 'id. Afiliado',
                            name: 'idAfiliado',
                            index:'idAfiliado',
                            width: 30,
                            align: 'right'
                        },
                        {
                            label: 'Nombre',
                            name: 'NOMBRE',
                            index:'NOMBRE',
                            width: 300
                        },
                        {
                            label: 'Cuota',
                            name: 'cuota',
                            index:'cuota',
                            width: 50,
                            align: 'right'
                        },
                        {
                            label: 'Mes',
                            name: 'nMes',
                            index:'nMes',
                            width: 30,
                            align: 'right'
                        },
                        {
                            label: 'Mes',
                            name: 'mes',
                            index:'mes',
                            width: 80
                        },
                        {
                            label: 'Año',
                            name: 'anno',
                            index:'anno',
                            width: 50,
                            align: 'center'
                        },
                        {
                            label: 'Pagado',
                            name: 'pagado',
                            index:'pagado',
                            width: 50,
                            align: 'center'
                        },
                        {
                            label: 'Forma Pago',
                            name: 'FormaPago',
                            index:'FormaPago',
                            width: 100
                        }
                        
                    ],  
                    loadonce: false,
                    width: window.innerWidth-20,
                    height: window.innerHeight-200,
                    pager: '#paginacion',
                    multiselect: true,
                    rowNum: 50,
                    rowList:[50,100,150],
                    sortname: 'Custom',
                    //sortorder: 'desc',
                    viewrecords: true,
                    caption: 'CUOTAS'
                });   
                
                
                jQuery("#tblCuotas").jqGrid('navGrid','#paginacion',
                    {edit:false,add:false,del:false,view:true,search:false});
            

        }
            function getSelectedRows() {
                var grid = $("#tblCuotas");
                var rowKey = grid.getGridParam("selrow");

                if (!rowKey)
                    alert("No ha seleccionado ninguna linea.");
                else {
                    var selectedIDs = grid.getGridParam("selarrrow");
                    var result = "";
                    for (var i = 0; i < selectedIDs.length; i++) {
                        result += selectedIDs[i] + ",";
                    }

                    alert(result);
                }                
            }
            
        </script>
        
    </script>
    
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <script>
            
            function openForm() {
                $( function() {
                    $( "#dialog" ).dialog({id:"dialog", closeText: "" });
                } );
            }
            
        </script>
        
    </script>head>
    
</head>
<body id="cuerpo" onLoad="openForm()">
        <div class="menuContainer"></div>

    <header id="submenu">
        <nav id="enlaces">
           <header <ul>id="submenu">
                <nav <li>id="enlaces">
                     <a href="javascript:getSelectedRows()" >PAGAR CUOTAS SELECCIONADAS</a><ul>
                </li>
            <li>
    <li>
                     <a href="javascript:openFormgetSelectedRows()" >LOAD</a>
                </li>
            </ul>
      >PAGAR CUOTAS <SELECCIONADAS</nav>a>
    </header>       
    
     <table id="tblCuotas"></table>
    <div id="paginacion"> </div>
    li>
    <div id="dialog" hidden="true" title="FILTRO DE CUOTAS">
        <div class="group">
        <table id="formulario"><li>
            <thead>
                <tr<a style="heighthref="javascript: 35px;">
                    <th colspan="2"><label><span>Elige el mes y el año</span></label></th>
                </tr>   
            </thead>
            <tbody>
                <tr>
                    <td><label for="Mes">Mes <span><em>openForm(requerido)</em></span></label></td>
                    <td><?php include("../recursos/mesSelect.php"); ?></td>
                <>LOAD</tr>
                <tr>a>
                    <td><label for="anno">Año <span><em>(requerido)</em></span></label></td>li>
                    <td><input id="anno" type="number" name="anno" min="1990" max="2500" size="4" value="<?php echo date("Y"); ?>" required/><</td>ul>
                </tr>nav>
                <tr><td colspan="2"><button id="btn_filtrar" align="middle" class="formButtom" onClick="load()" name="generar" >FILTRAR</button></td><</tr>
     header>       </tbody>
        
        <<table id="tblCuotas"></table>
        <div id="paginacion"> </div>
        
        <div id="dialog" hidden="true" title="FILTRO DE CUOTAS">
            <div class="group">
            <table id="formulario">
                <thead>
                    <tr style="height: 35px;">
                        <th colspan="2"><label><span>Elige el mes y el año</span></label></th>
                    </tr>   
                </thead>
                <tbody>
                    <tr>
                        <td><label for="Mes">Mes <span><em>(requerido)</em></span></label></td>
                        <td><?php include("../recursos/mesSelect.php"); ?></td>
                    </tr>
                    <tr>
                        <td><label for="anno">Año <span><em>(requerido)</em></span></label></td>
                        <td><input id="anno" type="number" name="anno" min="1990" max="2500" size="4" value="<?php echo date("Y"); ?>" required/></td>
                    </tr>
                    <tr><td colspan="2"><button id="btn_filtrar" align="middle" class="formButtom" onClick="load()" name="generar" >FILTRAR</button></td></tr>
                </tbody>
            
            </table>
    </div>
        </div>
        
    </body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
CTA- Cuotas
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../css/trirand/ui.jqgrid.css" />
    <script type="text/ecmascript" src="../js/codetabs.js"></script>
    <script type="text/ecmascript" src="../js/themeswitchertool.js"></script>
    
    
    <script>
        $(document).ready(function () {
            $('.menuContainer').load('../menu.html');
        });
        
        function cargaForm(){
            $( function() {
                $( "#dialog" ).dialog({id:"dialog", closeText: "" });
            } );
        }

        
     function load(){    
        
         var nMes = document.getElementById("mes").value; // formulario.mes.value;
        var nAnno = document.getElementById("anno").value; // formulario.mes.value;
        
        $("#dialog").dialog('close');
        
            jQuery("#tblCuotas").jqGrid({
                url:'cargaCuotas.php',
                datatype: 'json',
                mtype: 'POST',
                mes: nMes,
                anno: nAnno,
                colModel:[
                    {
                        label: 'ID Cuota',
                        name: 'idCuota',
                        index:'idCuota',
                        width: 50,
                        key: true,
                        hidden: true
                    },
                    {
                        label: 'Num. Cuota',
                        name: 'NumCuota',
                        index:'NumCuota',
                        width: 50
                    },
                    {
                        label: 'id. Afiliado',
                        name: 'idAfiliado',
                        index:'idAfiliado',
                        width: 30,
                        align: 'right'
                    },
                    {
                        label: 'Nombre',
                        name: 'NOMBRE',
                        index:'NOMBRE',
                        width: 300
                    },
                    {
                        label: 'Cuota',
                        name: 'cuota',
                        index:'cuota',
                        width: 50,
                        align: 'right'
                    },
                    {
                        label: 'Mes',
                        name: 'nMes',
                        index:'nMes',
                        width: 30,
                        align: 'right'
                    },
                    {
                        label: 'Mes',
                        name: 'mes',
                        index:'mes',
                        width: 80
                    },
                    {
                        label: 'Año',
                        name: 'anno',
                        index:'anno',
                        width: 50,
                        align: 'center'
                    },
                    {
                        label: 'Pagado',
                        name: 'pagado',
                        index:'pagado',
                        width: 50,
                        align: 'center'
                    },
                    {
                        label: 'Forma Pago',
                        name: 'FormaPago',
                        index:'FormaPago',
                        width: 100
                    }
                    
                ],  
                loadonce: false,
                width: window.innerWidth-20,
                height: window.innerHeight-200,
                pager: '#paginacion',
                multiselect: true,
                rowNum: 50,
                rowList:[50,100,150],
                sortname: 'Custom',
                //sortorder: 'desc',
                viewrecords: true,
                caption: 'CUOTAS'
            });   
            
            
            jQuery("#tblCuotas").jqGrid('navGrid','#paginacion',
                {edit:false,add:false,del:false,view:true,search:false});
        

    }
        function getSelectedRows() {
            var grid = $("#tblCuotas");
            var rowKey = grid.getGridParam("selrow");

            if (!rowKey)
                alert("No ha seleccionado ninguna linea.");
            else {
                var selectedIDs = grid.getGridParam("selarrrow");
                var result = "";
                for (var i = 0; i < selectedIDs.length; i++) {
                    result += selectedIDs[i] + ",";
                }

                alert(result);
            }                
        }
        
    </script>
    
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        
        function openForm() {
            $( function() {
                $( "#dialog" ).dialog({id:"dialog", closeText: "" });
            } );
        }
        
    </script>
    
</head>
<body id="cuerpo" onLoad="openForm()">
    <div class="menuContainer"></div>

    <header id="submenu">
        <nav id="enlaces">
            <ul>
                 <li>
                     <a href="javascript:getSelectedRows()" >PAGAR CUOTAS SELECCIONADAS</a>
                </li>
                <li>
                     <a href="javascript:openForm()" >LOAD</a>
                </li>
            </ul>
        </nav>
    </header>       
    
     <table id="tblCuotas"></table>
    <div id="paginacion"> </div>
    
    <div id="dialog" hidden="true" title="FILTRO DE CUOTAS">
        <div class="group">
        <table id="formulario">
            <thead>
                <tr style="height: 35px;">
                    <th colspan="2"><label><span>Elige el mes y el año</span></label></th>
                </tr>   
            </thead>
            <tbody>
                <tr>
                    <td><label for="Mes">Mes <span><em>(requerido)</em></span></label></td>
                    <td><?php include("../recursos/mesSelect.php"); ?></td>
                </tr>
                <tr>
                    <td><label for="anno">Año <span><em>(requerido)</em></span></label></td>
                    <td><input id="anno" type="number" name="anno" min="1990" max="2500" size="4" value="<?php echo date("Y"); ?>" required/></td>
                </tr>
                <tr><td colspan="2"><button id="btn_filtrar" align="middle" class="formButtom" onClick="load()" name="generar" >FILTRAR</button></td></tr>
            </tbody>
        
        </table>
</div>
    </div>
    
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>CTA - Cuotas</title>
        
        <!-- The jQuery library is a prerequisite for all jqSuite products -->
        <script type="text/ecmascript" src="../js/jquery.min.js"></script> 
        <!-- This is the Javascript file of jqGrid -->   
        <script type="text/ecmascript" src="../js/trirand/jquery.jqGrid.min.js"></script>
        <!-- This is the localization file of the grid controlling messages, labels, etc.
        <!-- We support more than 40 localizations -->
        <script type="text/ecmascript" src="../js/trirand/i18n/grid.locale-es.js"></script>
        <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
        <link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="../css/cuotas.css" />

        <!-- The link to the CSS that the grid needs -->
        <link rel="stylesheet" type="text/css" media="screen" href="../css/trirand/ui.jqgrid.css" />
        <script type="text/ecmascript" src="../js/codetabs.js"></script>
        <script type="text/ecmascript" src="../js/themeswitchertool.js"></script>
        
        
        <script>
            $(document).ready(function () {
                $('.menuContainer').load('../menu.html');
            });
            
            function cargaForm(){
                $( function() {
                    $( "#dialog" ).dialog({id:"dialog", closeText: "" });
                } );
            }

            
        function load(){    
            
            var nMes = document.getElementById("mes").value; // formulario.mes.value;
            var nAnno = document.getElementById("anno").value; // formulario.mes.value;
            
            $("#dialog").dialog('close');
            
                jQuery("#tblCuotas").jqGrid({
                    url:'cargaCuotas.php',
                    datatype: 'json',
                    mtype: 'POST',
                    mes: nMes,
                    anno: nAnno,
                    colModel:[
                        {
                            label: 'ID Cuota',
                            name: 'idCuota',
                            index:'idCuota',
                            width: 50,
                            key: true,
                            hidden: true
                        },
                        {
                            label: 'Num. Cuota',
                            name: 'NumCuota',
                            index:'NumCuota',
                            width: 50
                        },
                        {
                            label: 'id. Afiliado',
                            name: 'idAfiliado',
                            index:'idAfiliado',
                            width: 30,
                            align: 'right'
                        },
                        {
                            label: 'Nombre',
                            name: 'NOMBRE',
                            index:'NOMBRE',
                            width: 300
                        },
                        {
                            label: 'Cuota',
                            name: 'cuota',
                            index:'cuota',
                            width: 50,
                            align: 'right'
                        },
                        {
                            label: 'Mes',
                            name: 'nMes',
                            index:'nMes',
                            width: 30,
                            align: 'right'
                        },
                        {
                            label: 'Mes',
                            name: 'mes',
                            index:'mes',
                            width: 80
                        },
                        {
                            label: 'Año',
                            name: 'anno',
                            index:'anno',
                            width: 50,
                            align: 'center'
                        },
                        {
                            label: 'Pagado',
                            name: 'pagado',
                            index:'pagado',
                            width: 50,
                            align: 'center'
                        },
                        {
                            label: 'Forma Pago',
                            name: 'FormaPago',
                            index:'FormaPago',
                            width: 100
                        }
                        
                    ],  
                    loadonce: false,
                    width: window.innerWidth-20,
                    height: window.innerHeight-200,
                    pager: '#paginacion',
                    multiselect: true,
                    rowNum: 50,
                    rowList:[50,100,150],
                    sortname: 'Custom',
                    //sortorder: 'desc',
                    viewrecords: true,
                    caption: 'CUOTAS'
                });   
                
                
                jQuery("#tblCuotas").jqGrid('navGrid','#paginacion',
                    {edit:false,add:false,del:false,view:true,search:false});
            

        }
            function getSelectedRows() {
                var grid = $("#tblCuotas");
                var rowKey = grid.getGridParam("selrow");

                if (!rowKey)
                    alert("No ha seleccionado ninguna linea.");
                else {
                    var selectedIDs = grid.getGridParam("selarrrow");
                    var result = "";
                    for (var i = 0; i < selectedIDs.length; i++) {
                        result += selectedIDs[i] + ",";
                    }

                    alert(result);
                }                
            }
            
        </script>
        
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <script>
            
            function openForm() {
                $( function() {
                    $( "#dialog" ).dialog({id:"dialog", closeText: "" });
                } );
            }
            
        </script>
        
    </head>
    <body id="cuerpo" onLoad="openForm()">
        <div class="menuContainer"></div>

        <header id="submenu">
            <nav id="enlaces">
                <ul>
                     <li>
                         <a href="javascript:getSelectedRows()" >PAGAR CUOTAS SELECCIONADAS</a>
                    </li>
                    <li>
                         <a href="javascript:openForm()" >LOAD</a>
                    </li>
                </ul>
            </nav>
        </header>       
        
        <table id="tblCuotas"></table>
        <div id="paginacion"> </div>
        
        <div id="dialog" hidden="true" title="FILTRO DE CUOTAS">
            <div class="group">
            <table id="formulario">
                <thead>
                    <tr style="height: 35px;">
                        <th colspan="2"><label><span>Elige el mes y el año</span></label></th>
                    </tr>   
                </thead>
                <tbody>
                    <tr>
                        <td><label for="Mes">Mes <span><em>(requerido)</em></span></label></td>
                        <td><?php include("../recursos/mesSelect.php"); ?></td>
                    </tr>
                    <tr>
                        <td><label for="anno">Año <span><em>(requerido)</em></span></label></td>
                        <td><input id="anno" type="number" name="anno" min="1990" max="2500" size="4" value="<?php echo date("Y"); ?>" required/></td>
                    </tr>
                    <tr><td colspan="2"><button id="btn_filtrar" align="middle" class="formButtom" onClick="load()" name="generar" >FILTRAR</button></td></tr>
                </tbody>
            
            </table>
    </div>
        </div>
        
    </body>

</html>
Origen Enlace

Pasar parámetros a jqGrid

Tengo un jqGrid, en el cual carga los datos. Al entrar en la pagina, lo primero que me aparece es un pequeño dialogo que me pide un mes y el año. Cuando le das ha aceptar carga el dialogo. Me gustaría saber cómo puedo pasar estas variables al archivo de carga, para poder filtrar la consulta por ese mes y ese año.

Muchas gracias y un saludo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
CTA - Cuotas
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../css/trirand/ui.jqgrid.css" />
    <script type="text/ecmascript" src="../js/codetabs.js"></script>
    <script type="text/ecmascript" src="../js/themeswitchertool.js"></script>
    
    
    <script>
        $(document).ready(function () {
            $('.menuContainer').load('../menu.html');
        });
        
        function cargaForm(){
            $( function() {
                $( "#dialog" ).dialog({id:"dialog", closeText: "" });
            } );
        }

        
    function load(){    
        
        var nMes = document.getElementById("mes").value; // formulario.mes.value;
        var nAnno = document.getElementById("anno").value; // formulario.mes.value;
        
        $("#dialog").dialog('close');
        
            jQuery("#tblCuotas").jqGrid({
                url:'cargaCuotas.php',
                datatype: 'json',
                mtype: 'POST',
                mes: nMes,
                anno: nAnno,
                colModel:[
                    {
                        label: 'ID Cuota',
                        name: 'idCuota',
                        index:'idCuota',
                        width: 50,
                        key: true,
                        hidden: true
                    },
                    {
                        label: 'Num. Cuota',
                        name: 'NumCuota',
                        index:'NumCuota',
                        width: 50
                    },
                    {
                        label: 'id. Afiliado',
                        name: 'idAfiliado',
                        index:'idAfiliado',
                        width: 30,
                        align: 'right'
                    },
                    {
                        label: 'Nombre',
                        name: 'NOMBRE',
                        index:'NOMBRE',
                        width: 300
                    },
                    {
                        label: 'Cuota',
                        name: 'cuota',
                        index:'cuota',
                        width: 50,
                        align: 'right'
                    },
                    {
                        label: 'Mes',
                        name: 'nMes',
                        index:'nMes',
                        width: 30,
                        align: 'right'
                    },
                    {
                        label: 'Mes',
                        name: 'mes',
                        index:'mes',
                        width: 80
                    },
                    {
                        label: 'Año',
                        name: 'anno',
                        index:'anno',
                        width: 50,
                        align: 'center'
                    },
                    {
                        label: 'Pagado',
                        name: 'pagado',
                        index:'pagado',
                        width: 50,
                        align: 'center'
                    },
                    {
                        label: 'Forma Pago',
                        name: 'FormaPago',
                        index:'FormaPago',
                        width: 100
                    }
                    
                ],  
                loadonce: false,
                width: window.innerWidth-20,
                height: window.innerHeight-200,
                pager: '#paginacion',
                multiselect: true,
                rowNum: 50,
                rowList:[50,100,150],
                sortname: 'Custom',
                //sortorder: 'desc',
                viewrecords: true,
                caption: 'CUOTAS'
            });   
            
            
            jQuery("#tblCuotas").jqGrid('navGrid','#paginacion',
                {edit:false,add:false,del:false,view:true,search:false});
        

    }
        function getSelectedRows() {
            var grid = $("#tblCuotas");
            var rowKey = grid.getGridParam("selrow");

            if (!rowKey)
                alert("No ha seleccionado ninguna linea.");
            else {
                var selectedIDs = grid.getGridParam("selarrrow");
                var result = "";
                for (var i = 0; i < selectedIDs.length; i++) {
                    result += selectedIDs[i] + ",";
                }

                alert(result);
            }                
        }
        
    </script>
    
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        
        function openForm() {
            $( function() {
                $( "#dialog" ).dialog({id:"dialog", closeText: "" });
            } );
        }
        
    </script>
    
</head>
<body id="cuerpo" onLoad="openForm()">
    <div class="menuContainer"></div>

    <header id="submenu">
        <nav id="enlaces">
            <ul>
                 <li>
                     <a href="javascript:getSelectedRows()" >PAGAR CUOTAS SELECCIONADAS</a>
                </li>
                <li>
                     <a href="javascript:openForm()" >LOAD</a>
                </li>
            </ul>
        </nav>
    </header>       
    
    <table id="tblCuotas"></table>
    <div id="paginacion"> </div>
    
    <div id="dialog" hidden="true" title="FILTRO DE CUOTAS">
        <div class="group">
        <table id="formulario">
            <thead>
                <tr style="height: 35px;">
                    <th colspan="2"><label><span>Elige el mes y el año</span></label></th>
                </tr>   
            </thead>
            <tbody>
                <tr>
                    <td><label for="Mes">Mes <span><em>(requerido)</em></span></label></td>
                    <td><?php include("../recursos/mesSelect.php"); ?></td>
                </tr>
                <tr>
                    <td><label for="anno">Año <span><em>(requerido)</em></span></label></td>
                    <td><input id="anno" type="number" name="anno" min="1990" max="2500" size="4" value="<?php echo date("Y"); ?>" required/></td>
                </tr>
                <tr><td colspan="2"><button id="btn_filtrar" align="middle" class="formButtom" onClick="load()" name="generar" >FILTRAR</button></td></tr>
            </tbody>
        
        </table>
</div>
    </div>
    
</body>