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

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
Accepted answer

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"));

<?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>

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
Community showcase
Posted Tuesday in United States

Topic Tuesday: What's your favorite topic?

Good morning All, Our goal is to get you into the habit of while enjoying your favorite morning drink you are checking the NOVA "space" for topics and comments. Your input is really needed and...

62 views 4 0
View post

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you