EDIT 16/6/2012: Solucioné los problemas y las clasificaciones funcionaban correctamente. También he convertido las zonas horarias en sus códigos UTC de una letra (A-Z). Lo único que queda es conseguir que el formateador verifique el horario de verano, pero hay mucho sobre ese tema. Sin embargo, siéntase libre de contribuir si lo desea sería muy bienvenido. Gracias a todos por ayudarme a alcanzar el objetivo.Ordenando una tabla HTML con información llenándola dinámicamente desde un servidor
EDIT2 16/04/2012: ¡Lo resolví! Debido a que la fecha ya estaba en UTC, estaba haciendo algunas conversiones innecesarias que creaban algunos conflictos/resultados extraños. Esta pregunta debe considerarse SOLUCIONADA. Gracias a todos los que ayudaron.
Estoy usando knockoutjs para crear un widget (tabla en html/javascript) que extrae dinámicamente información de mi servidor. Estoy atascado en la clasificación de métodos para esto. He creado y descargado diferentes versiones de métodos de clasificación de tablas, pero todos hacen desaparecer los datos iniciales que se extraen del servidor. Ellos tratan las tablas como si la información no pudiera ser editada; así que parece haber un conflicto con mi mesa ya que necesito que toda la información sea editable.
Right now in my ViewModel.js file I have:
Event(column1,column2,column3,...columnN){
var self = this;
self.column1 = column1;
self.column2 = column2;
.
.
}
function ViewModel(){
var self= this;
self.rows = ko.observableArray([]);
self.addRow = function(){
self.rows.push("","",.......);
}
//THIS REMOVE FUNCTION DOESN'T WORK
self.removeRow = function(row)
self.rows.remove(row);
}
//THIS DOESN'T WORK EITHER, a.column and b.column, the 'column would be column1,
//column2, etc.
self.SortMethod = function(){
self.items.sort(function(a,b){
return a.column < b.column ? -1 : 1;
});
}
}
//navigate to the server and its info
function getEvents(){
$get.JSON("http://......",
function(data){
$.each(data.d, function(i,item){handleEvent(item)})
}
);
}
//this populates the rows/columns in the table with the events(info) from the server
//Here, 'Model' is a new ViewModel which is declared further below
function handleEvent(item){
var newEvent = new Event(item.Event1, item.Event2,.....);
this.Model.rows.push(newEvent);
}
this.Model = new ViewModel();
this.getEvents();
ko.applyBindings(this.Model);
//The HTML code just makes the table, the headers and the style of the table and I then use
//data-bind to bind the info in the server into the appropriate block in the table.
//And yes, I do use <script src="knockout.js"> and for all other js files I have in the
//HTML file.
The HTML is basically this:
title
meta
scripts
table style
table
headers <tr><td>Column1Header</td><td>Column2Header</td>.....</tr>
table body
Example line from table's body: <td><input data-bind = "value: column1" /><td>
buttons (for adding a row and another button for sorting the array)
//I think it would be better to get rid of the sorting button and make it so if you click on
//the table headers, you'll sort the table according to that header's column's information.
=========================================== ================================ EDIT2:
Se corrigió el error de clasificación, accidentalmente Olvidé cambiar el nombre de una de las funciones de ordenación copiadas por lo que estaba causando un conflicto. Todavía no he podido encontrar la manera de hacer que la mesa regrese a su orden original. Si alguien puede ver la función de clasificación que hice y mostrarme lo que tengo que hacer o cambiar sería muy apreciada.
Tampoco he podido hacer que la función de eliminación funcione correctamente. Está causando un conflicto de alguna manera, ya que cuando lo incluyo en la tabla, los datos del servidor no ocupan la mesa.
EDIT: Me las arreglé para encontrar una manera "rápida y sucia" de obtener una clasificación para una columna individual. Es algo parecido a esto:
//After the line: self.rows = ko.observableArray([]); I continued with:
self.sortColumn = "Column1";
self.sortAscending = true;
self.SortColumn1 = function(){
if(self.sortColumn == "Column1")
self.sortAscending = !self.sortAscending;
else{
self.sortColumn = "Column1";
self.sortAscending = true;
}
self.rows.sort(function(a,b){
if(self.sortAscending == true)
return a.Column1 < b.Column1 ? -1 : 1;
else
return a.Column1 > b.Column1 ? -1 : 1;
});
}
Sin embargo, si he copiado el código para todas las otras columnas (cambiando todo en la columna 2 de 3 y de de y así sucesivamente para cada copia distinta de la función de la columna 1); algunas filas no están ordenadas correctamente. Sin embargo, si mantengo solo esta función sin copias hacia las otras columnas, funciona bien.
** También necesito la capacidad de devolver la tabla a su orden original. En este momento tengo esta función vinculada al encabezado Columna1 en la tabla. Si hago clic una vez, lo pone en orden descendente, y si vuelvo a hacer clic en el encabezado; pone la tabla en orden ascendente (de acuerdo con la información de Column1, por supuesto). Ahora el problema es hacerlo donde si hago clic por tercera vez, restaura la tabla a su orden predeterminado (original).
Podría proporcionar un jsfiddle de su problema. – madcapnmckay
Voy a suponer que jsfiddle es como el violinista (corrígeme si me equivoco) y lamentablemente no puedo, ya que el servidor es privado. – Matt1713
si no puede tener la decencia de hacer una búsqueda rápida en Google y descubrir qué es jsfiddle, supongo que tampoco ha investigado su pregunta. – Timmerz