AUI-Experimental components-Sortable tables, I cant make my table sortable

RoiV September 17, 2013

Hello, I want to write a Table, with it s colums sortables. I m trying the AUI-Experimental component Sortable Table. Like this https://developer.atlassian.com/display/AUI/Sortable+Tables

My table is writen as the example, but I doesn t work...anybody has the same problem¿?

3 answers

1 accepted

1 vote
Answer accepted
Jamie Saliga June 17, 2014

You need to pull in the appropriate js/css for sortable tables and then tell AJS to apply it to your table.

Do the following:

1. Add this to your resources

#requireResource("com.atlassian.auiplugin:aui-experimental-table-sortable")

2. Add the classes "aui aui-table-sortable" to your table element and give it a unique ID.

3. Once the table is appended to the gadget view let AJS know about it by calling:

AJS.tablessortable.setTableSortable(AJS.$("#uniqueID"));

1 vote
RoiV September 17, 2013
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="GADGET 2"
                 title_url=""
                 directory_title="__MSG_gadget-prueba.name__"
                 description="GADGET 2"
                 author=""
                 author_email=""
                 screenshot='http://www.google.com/gadgets/directory/2661487601-no_preview.gif'
                 thumbnail='http://www.google.com/gadgets/directory/348515928-no_image_gadget_thm.png'>
                 <Require feature="minimessage" />
       
		<Require feature="views" />
		
		<Require feature="setprefs" />
		<Require feature="dynamic-height" />
		<Require feature="oauthpopup" />
		<Optional feature="auth-refresh" />
        <Optional feature="gadget-directory">
            <Param name="categories">
                JIRA
            </Param>
        </Optional>      

       		#oauth
            #supportedLocales("gadget.common")

                  	
    </ModulePrefs>    
    <UserPref name="isConfigured" datatype="hidden" default_value="false" />     
    <UserPref name="__UP_nombreContrato" datatype="hidden"/>
  <Content type="html">
     <![CDATA[
          #requireResource("com.atlassian.jira.gadgets:common")                    
          #requireResource("com.atlassian.gadgets.publisher:ajs-gadgets")
          #requireResource("com.atlassian.auiplugin:ajs")   
          #requireResource("com.atlassian.auiplugin:aui-experimental-example")              
          #requireResource("com.vectorsf.gadgetJira.gadgetJiraGms:gadgetJiraGms-resources")
          #includeResources()      	  
     <script type="text/javascript">
     (function () {
        var gadget = AJS.Gadget({        
          baseUrl: "__ATLASSIAN_BASE_URL__",
          useOauth: "/rest/gadget/1.0/currentUser", 
        
		config:
		{
		    descriptor: function(args)
		    {
		    	var gadget = this; 
			    return {
			       action: "/rest/gadget/1.0/project/validate", 
				   theme : function () { 
							if (gadgets.window.getViewportDimensions().width < 450){ 
								return "gdt top-label"; 
							} 
							else { 
								return "gdt"; }
							}(),		
			        fields: [	   				        				 
				    	AJS.gadget.fields.projectsOrCategoriesPicker(gadget, "projectsOrCategories", args.options),
				    	{
					    	userpref: "columnasGadget", 
							label: "Columnas",
							description: "Seleccione las columnas a mostrar",
							type: "checkbox",
							selected: gadget.getPref("columnasGadget"),
					    	options:[ 
		                      {label: "AreaId",value:"areaId"},
		                      {label: "Avance",value:"areaNombre"},
		                      {label: "Codigo",value:"codigo"},
		                      {label: "Departamento ID",value:"departamentoId"},
		                      {label: "Departamento Nombre",value:"departamentoNombre"},
		                      {label: "Estado ID",value:"estadoId"},
		                      {label: "Estado Nombre",value:"estadoNombre"},
		                      {label: "Gerente Nombre",value:"gerenteNombre"},
		                      {label: "Id",value:"id"},
		                      {label: "Imputado Horas",value:"imputadoHoras"},
		                      {label: "Jefe Proyecto Nombre",value:"jefeProyectoNombre"},
		                      {label: "Modo Produccion Nombre",value:"modoProduccionNombre"}, 
		                      {label: "Nombre",value:"nombre"}, 
		                      {label: "Parent ID",value:"parentId"}, 
		                      {label: "Sector ID",value:"sectorId"}, 
		                      {label: "Sector Nombre",value:"sectorNombre"}, 
		                      {label: "Contrato",value:"contrato"}, 
		                      {label: "Vendido Horas",value:"vendidoHoras"} 
		                    	]
		                 }
					]									
		    		}
		    	},
				args: function() 
				{ 
					return [
					
						{
                            key: "columnChoices",
                            ajaxOptions:  "/rest/gadget/1.0/availableColumns"
                        }, 
						{ 	key: "options", 
							ajaxOptions: "/rest/gadget/1.0/projectsAndProjectCategories" 
						} ];
			  	}() 
		},
	  	view:
	  	{
				  		template: function(args) {
					  				var gadget = this;
					  				
							  		var htmlList = "<div height='300px' widht='100%' style='overflow:auto'><table id='tablaOrdenada'>";						             
						            htmlList = htmlList + "<thead>";
						            htmlList = htmlList + "<tr>";
						            htmlList = htmlList + "<th id='areaId'>Area Id</th>";
						            htmlList = htmlList + "<th id='areaNombre'>Area Nombre</th>";
						            htmlList = htmlList + "<th id='avance'>Avance</th>";
						            htmlList = htmlList + "<th id='codigo'>codigo</th>";
						            htmlList = htmlList + "<th id='departamentoId'>Departamento Id</th>";
						            htmlList = htmlList + "<th id='departamentoNombre'>Departamento nombre</th>";
						            htmlList = htmlList + "<th id='estadoId'>Estado ID</th>";
						            htmlList = htmlList + "<th id='estadoNombre'>Estado Nombre</th>";
						            htmlList = htmlList + "<th id='gerenteNombre'>Gerente Nombre</th>";
						            htmlList = htmlList + "<th id='id'>id</th>";
						            htmlList = htmlList + "<th id='imputadoHoras'>Imputado Horas</th>";
						            htmlList = htmlList + "<th id='jefeProyectoNombre'>Jefe Proyecto Nombre</th>";
						            htmlList = htmlList + "<th id='modoProduccionNombre'>Modo Produccion Nombre</th>";
						            htmlList = htmlList + "<th id='nombre'>Nombre</th>";
						            htmlList = htmlList + "<th id='parentId'>Parent ID</th>";
						            htmlList = htmlList + "<th id='sectorId'>Sector ID</th>";
						            htmlList = htmlList + "<th id='sectorNombre'>Sector Nombre</th>";
						            htmlList = htmlList + "<th id='contrato'>Contrato</th>";
						            htmlList = htmlList + "<th id='vendidoHoras'>Vendido Horas</th></tr>";				  						            
				  				  	htmlList = htmlList + "</thead><tbody>";
				  				  	
									var listadoProjectos = args.jsonFile;
									
									for (i = 0; i < listadoProjectos.length;i++) {
										
										projecto = listadoProjectos[i];
													   
	                        			htmlList = htmlList + "<tr><td id='areaId'>" + projecto.areaId + "</td>";
	                        			htmlList = htmlList + "<td id='areaNombre'>" + projecto["areaNombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='avance'>" + projecto["avance"] + "</td>";
	                        			htmlList = htmlList + "<td id='codigo'>" + projecto["codigo"] + "</td>";
	                        			htmlList = htmlList + "<td id='departamentoId'>" + projecto["departamentoId"] + "</td>";
	                        			htmlList = htmlList + "<td id='departamentoNombre'>" + projecto["departamentoNombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='estadoId'>" + projecto["estadoId"] + "</td>";
	                        			htmlList = htmlList + "<td id='estadoNombre'>" + projecto["estadoNombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='gerenteNombre'>" + projecto["gerenteNombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='id'>" + projecto["id"] + "</td>";
	                        			htmlList = htmlList + "<td id='imputadoHoras'>" + projecto["imputadoHoras"] + "</td>";
	                        			htmlList = htmlList + "<td id='jefeProyectoNombre'>" + projecto["jefeProyectoNombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='modoProduccionNombre'>" + projecto["modoProduccionNombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='nombre'>" + projecto["nombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='parentId'>" + projecto["parentId"] + "</td>";
	                        			htmlList = htmlList + "<td id='sectorId'>" + projecto["sectorId"] + "</td>";
	                        			htmlList = htmlList + "<td id='sectorNombre'>" + projecto["sectorNombre"] + "</td>";
	                        			htmlList = htmlList + "<td id='contrato'>" + projecto["contrato"] + "</td>";
	                        			htmlList = htmlList + "<td id='vendidoHoras'>" + projecto["vendidoHoras"] + "</td></tr>";		
											  		
							  		}
    						  		htmlList = htmlList + "</table>";
    						  		
    						  		gadget.getView().html(htmlList);
				
    						  	
						},						
			  			args: [{
                        key: "jsonFile",
                        ajaxOptions: function() {
                        	
                        	
                        	
                        	var generaCodigosSeleccionados = function(projectos){
                        		var listaCodigo = '';                        		
                        		var todos = false;                        		
                        		if(projectos.options[0].selected == true){
                        			todos = true;
                        		}                        		
	                            for(i = 0;i<projectos.options.length;i++){
	                               	if((projectos.options[i].selected == true)||(todos)){
	                               		listaCodigo = listaCodigo + projectos.options[i].attributes[0].nodeValue + ",";
	                            	}
	                            }
	                            
                                return listaCodigo;
	                            	                        	
                        	};
                            return {
                                url: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXGestionTareas=" + generaCodigosSeleccionados(projectsOrCategories),
                                type: "GET",                                              
                                dataType: "json",
                                headers: {XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX)},
                                
                            };                            
                        }
                        }
			            ]
                        
												  
			
	  			}
		});
	})();
</script>

    </tbody>
</table> 
     ]]>
   </Content> 
</Module>

0 votes
wurbanski
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 17, 2013

Are you sure you have all the paropriate JS code on your page? Can you post the example somewhere so it's possible to see the actual problem?

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events