<script src="/js/paginadorFuncionarios.js" language="javascript"></script>

<div class="resumenResultados"></div><br>

	<div id="idpaginador" class="paginador" style='z-index:99999 !important;'></div><br>

<div id="vfdgfseSPW" class="blog-posts">

</div>


<script type="text/javascript">		
 	_spBodyOnLoadFunctionNames.push("getListItemsPAGGFuncionarios(0)");
 	
 	
function getListItemsPAGGFuncionarios(index)
{ 
	var waitDialog_FileUpload;
	if(index != 0)	
	{
		SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
			waitDialog_FileUpload = SP.UI.ModalDialog.showWaitScreenWithNoClose("Cargando Funcionarios ", 'Espere...');
		});
	}
	
	 //  $('.ms-dlgOverlay').show();
   SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function(){
    var ctx = new SP.ClientContext(_spPageContextInfo.siteServerRelativeUrl+"/NuestraAlcaldia/Dependencias");
    var list = ctx.get_web().get_lists().getByTitle("Funcionarios");
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><ViewFields><FieldRef Name="ID"/><FieldRef Name="Title"/><FieldRef Name="Cargo"/><FieldRef Name="FileLeafRef"/><FieldRef Name="Correo"/><FieldRef Name="Fecha_x0020_de_x0020_Posesi_x00f3_n"/><FieldRef Name="Url"/><FieldRef Name="Celular"/><FieldRef Name="Nombre_x0020_del_x0020_Funcionario"/></ViewFields><Query><OrderBy><FieldRef Name="Cargo" Ascending="True" /></OrderBy></Query></View>');
     var items = list.getItems(camlQuery);
       ctx.load(items);
       ctx.executeQueryAsync(function() {
           Detalles(items, index, waitDialog_FileUpload);
       },logError);
   });
}

    function Detalles(pageItems, index, waitDialog_FileUpload)
    {
    	//alert(pageItems.get_count());
        var strhtml = "<div class='row' style='display: block;padding: 0 0 50px 0;' >";
        if(index != 9999)
		{
			var sdd = 1;
	        for(var i = index*6; i < index*6+6;i++) {
			            var pageItem = pageItems.getItemAtIndex(i);
		            if(pageItem != null)
		            {
		            	var strcel = '';
						if(pageItem.get_fieldValues()['Celular'] != null && pageItem.get_fieldValues()['Celular'] != ""){strcel = pageItem.get_fieldValues()['Celular'];}else{strcel = " ";}
								
						var strmail = '';
						if(pageItem.get_fieldValues()['Correo'] != null && pageItem.get_fieldValues()['Correo'] != ""){strmail = pageItem.get_fieldValues()['Correo'];}else{strmail = " ";}
						
								
						var strfechapos = '';
						if(pageItem.get_fieldValues()['Fecha_x0020_de_x0020_Posesi_x00f3_n'] != null && pageItem.get_fieldValues()['Fecha_x0020_de_x0020_Posesi_x00f3_n'] != ""){strfechapos = pageItem.get_fieldValues()['Fecha_x0020_de_x0020_Posesi_x00f3_n'];}else{strfechapos = " ";}
				
						var strurl = '';
						if(pageItem.get_fieldValues()['Url'] != null && pageItem.get_fieldValues()['Url'] != ""){strurl = pageItem.get_fieldValues()['Url'] ;}else{strurl = "javascript:void(0);";}
	
	 		             			
			         	strhtml+= "<div class='col-md-2'><img style='width: 300px; max-width: 100%;' src='/NuestraAlcaldia/Dependencias/Funcionarios/"+pageItem.get_fieldValues()['FileLeafRef']+"'></div> <div class='col-md-4'> <span class='subtitulo'><b>"+pageItem.get_fieldValues()['Cargo']+"</b></span><table width='50%' border='0' cellspacing='0' cellpadding='0' class='perfil'><tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Nombre:</td><td style='padding:.3em .5em !important; font-size:14px !important;'>"+pageItem.get_fieldValues()['Nombre_x0020_del_x0020_Funcionario']+"</td></tr> <tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Correo:</td><td style='padding:.3em .5em !important; font-size:14px !important;'><a href='mailto:"+strmail+"'>"+strmail+"</a></td></tr><tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Tel&eacute;fono:</td><td style='padding:.3em .5em !important; font-size:14px !important;'>"+strcel+"</td></tr><tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Direcci&oacute;n:</td><td style='padding:.3em .5em !important; font-size:14px !important;'>"+strfechapos+"</td></tr><tr> <td colspan='2' style='padding:0.2em .5em !important; font-size:14px !important; width:119px;'> <a style='font-weight: bold;' href='"+strurl+"'><i class='fa fa-eye'></i> Ver Hoja de Vida</a></td> </tr> </table></div>";
		           		if (sdd % 2 == 0)
				        {
				        	strhtml+= "</div>";
						}
						if (sdd % 2 == 0)
				        {
				        	strhtml+= "</div><div class='row' style='display: block;padding: 0 0 50px 0;'>";
						}

						sdd++;
 }
			}
			 
			   $("#vfdgfseSPW").html(strhtml+"</div></div>");
        
         $("#vfdgfseSPW .row:last").hide();
		        document.getElementById("idpaginador").innerHTML = "";
		        document.getElementById("idpaginador2").innerHTML = "";
		        
		        if(index != 0)	
		        	$("#s4-workspace").animate({ scrollTop: 680 }, 800);
		        	
		        crearPaginador("idpaginador",index,6,parseInt(pageItems.get_count()),6);
		      	crearPaginador("idpaginador2",index,6,parseInt(pageItems.get_count()),6);
		      	
		      	$(".resumenResultados").html("<strong>"+pageItems.get_count()+"</strong> Funcionarios, mostrando p&aacute;gina <strong>"+parseInt($(".spanpagination").html())+"</strong> de <strong>"+Math.ceil(parseInt(pageItems.get_count())/6)+"</strong> ( 6 Registros por p&aacute;gina ).");
		        
		        if(index != 0)	
				{
		        	waitDialog_FileUpload.close(SP.UI.DialogResult.OK);
		        }
		 }
		 else
		 {
		 		var ultima = parseInt(Math.ceil(parseInt(pageItems.get_count())/6))-1;
		 		//alert(ultima);
		 		for(var i = (ultima)*6; i < pageItems.get_count();i++) {
		 		
		 		 var pageItem = pageItems.getItemAtIndex(i);
		            if(pageItem != null)
		            {
		            	var strcel = '';
						if(pageItem.get_fieldValues()['Celular'] != null && pageItem.get_fieldValues()['Celular'] != ""){strcel = pageItem.get_fieldValues()['Celular'];}else{strcel = " ";}
								
						var strmail = '';
						if(pageItem.get_fieldValues()['Correo'] != null && pageItem.get_fieldValues()['Correo'] != ""){strmail = pageItem.get_fieldValues()['Correo'];}else{strmail = " ";}
						
								
						var strfechapos = '';
						if(pageItem.get_fieldValues()['Fecha_x0020_de_x0020_Posesi_x00f3_n'] != null && pageItem.get_fieldValues()['Fecha_x0020_de_x0020_Posesi_x00f3_n'] != ""){strfechapos = pageItem.get_fieldValues()['Fecha_x0020_de_x0020_Posesi_x00f3_n'];}else{strfechapos = " ";}
				
						var strurl = '';
						if(pageItem.get_fieldValues()['Url'] != null && pageItem.get_fieldValues()['Url'] != ""){strurl = pageItem.get_fieldValues()['Url'] ;}else{strurl = "javascript:void(0);";}
	
	 		             			
			         	strhtml+= "<div class='col-md-2'><img style='width:100% !important;' src='/NuestraAlcaldia/Dependencias/Funcionarios/"+pageItem.get_fieldValues()['FileLeafRef']+"'></div> <div class='col-md-4'> <span class='subtitulo'><b>"+pageItem.get_fieldValues()['Cargo']+"</b></span><table width='50%' border='0' cellspacing='0' cellpadding='0' class='perfil'><tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Nombre:</td><td style='padding:.3em .5em !important; font-size:14px !important;'>"+pageItem.get_fieldValues()['Nombre_x0020_del_x0020_Funcionario']+"</td></tr> <tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Correo:</td><td style='padding:.3em .5em !important; font-size:14px !important;'><a href='mailto:"+strmail+"'>"+strmail+"</a></td></tr><tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Tel&eacute;fono:</td><td style='padding:.3em .5em !important; font-size:14px !important;'>"+strcel+"</td></tr><tr><td style='padding:.3em .5em !important; font-size:14px !important;font-weight: bold;'>Direcci&oacute;n:</td><td style='padding:.3em .5em !important; font-size:14px !important;'>"+strfechapos+"</td></tr><tr> <td colspan='2' style='padding:0.2em .5em !important; font-size:14px !important; width:119px;'> <a style='font-weight: bold;' href='"+strurl+"'><i class='fa fa-eye'></i> Ver Funciones</a></td> </tr> </table></div>";
		           
						if (sdd % 2 == 0)
				        {
				        	strhtml+= "</div>";
						}
						if (sdd % 2 == 0)
				        {
				        	strhtml+= "</div><div class='row' style='display: block;padding: 0 0 50px 0;'>";
						}
						sdd++;

						 }

		 		}
		 		
		 		  $("#vfdgfseSPW").html(strhtml+"</div></div>");
        
		        document.getElementById("idpaginador").innerHTML = "";
		        document.getElementById("idpaginador2").innerHTML = "";
		        
		        if(index != 0)	
		        	$("#s4-workspace").animate({ scrollTop: 680 }, 800);
		        	
		        crearPaginador("idpaginador",ultima,6,parseInt(pageItems.get_count()),6);
		      	crearPaginador("idpaginador2",ultima,6,parseInt(pageItems.get_count()),6);
		      	
		      	$(".resumenResultados").html("<strong>"+pageItems.get_count()+"</strong> Funcionarios, mostrando p&aacute;gina <strong>"+parseInt($(".spanpagination").html())+"</strong> de <strong>"+Math.ceil(parseInt(pageItems.get_count())/6)+"</strong> ( 6 Registros por p&aacute;gina ).");
		        
		       // $("#vfdgfseSPW .row:last").hide();
		        
		        if(index != 0)	
				{
		        	waitDialog_FileUpload.close(SP.UI.DialogResult.OK);
		        }


    	 }
      
     }

    function logError(sender,args){
          console.log(args.get_message());
    }
    

</script>

<style type="text/css">
   a.titulo_enlace2:link, a.titulo_enlace2:hover, a.titulo_enlace2:visited, .titulo_enlace2 {
        color: black !important;
        font-size: 22px;
        font-family: 'Oswald', Arial, sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 23px;
        text-decoration: none !important;
    }
    .ms-dlgFrameContainer
    {
    	overflow:hidden !important;
    }
    
    .apagination{
	    background: #cee4d1;
    padding: 0 10px 0 10px;
    border-radius: 4px;
   box-shadow: 1px 1px 1px;
    margin: auto 3px 0 3px;
    font-size: 15px;
    font-weight: bold !important;
}

.spanpagination{
	background: #53AFE6;
    color: white;
    padding: 0 10px 0 10px;
    border-radius: 4px;
    box-shadow: 1px 2px 1px black;
    margin: auto 3px 0 3px;
    font-size: 15px;
    font-weight: bold !important;
}


.paginations{
    padding: 12px 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #d0d0d0;
    font-size: 15px;
    font-weight: bold !important;
    }
    
    
    .blog-posts .featured {
  width: 100% !important;
  height: 250px !important;
  margin: 0.5em 0 1em 0 !important;
}
.blog-posts .featured .image {
  height: 250px !important;
}
.blog-posts .featured .content {
  height: 250px !important;
}
.blog-posts .row {
  /* display: flex; */
}
.blog-posts .row .post:last-child {
  margin-right: 0 !important;
}
.blog-posts .post {
  flex: 1;
  overflow: hidden;
  background: white;
  height: 250px;
  -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  margin-right: 1em;
  margin-bottom: 1em;
  margin: 0 13px 35px 0;
}
.blog-posts .post:hover {
  -moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
}
.blog-posts .post:hover .image {
  opacity: 0.8;
}
.blog-posts .post .image, .container .blog-posts .post .content {
  display: inline-block;
  position: relative;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.blog-posts .post .image {
  float: left;
  width: 43%;
  height: 320px;
  background-size: cover;
  background-position: center center;
}
.blog-posts .post .image .time {
  background: #F5811E;
  width: 50px;
  text-align: center;
  padding: 0.5em 0;
  color: #ffff;
  position:absolute;
}

  .col-md-5 {
    width: 48.66666667% !important;
  }
  
.blog-posts .post .image .time .date {
  font-weight: bolder;
}
.blog-posts .post .image .time .month {
  font-size: 1.2rem;
}
.image img {
height: 70% !important;
    width: 100%;
}

.blog-posts .post .content {
  padding: 0.5em 1em;
  width: 57%;
  -moz-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
  height: 200px;
}
.blog-posts .post .content:before {
  content: '';
  position: absolute;
  background: white;
  width: 10px;
  height: 10px;
  top: 20%;
  left: -5px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
}
.blog-posts .post .content h1 {
    font-weight: 600;
    font-size: 18px !important;
    display: block;
    display: -webkit-box;
    max-width: 100%;
    margin: 0 0 5px 0;
    line-height: 1.3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;  
    }
.blog-posts .post .content p {
  font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 0.5em;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    }
.blog-posts .post .content .meta .icon-comment {
  font-size: 0.7em;
  line-height: 2;
  margin-top: auto;
}

[class^="icon-"]:before {
  margin-right: 0.5em;
 
}
</style>
<div class="resumenResultados"></div><br>

	<div id="idpaginador2" class="paginador" style='z-index:99999 !important;'></div>

<input type="text" style="display:none;" value="1" id="TxtIndex"/>