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

This widget could not be displayed.

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

This widget could not be displayed.
<?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>

This widget could not be displayed.

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 yesterday in Jira

What modern development practices are at the heart of how your team delivers software?

Hey Community mates! Claire here from the Software Product Marketing team. We all know software development changes rapidly, and it's often tough to keep up. But from our research, we've found the h...

67 views 0 1
Join discussion

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