Lo primero a realizar para poder desarrollar estas modificaciones, ha sido estudiar el funcionamiento del motor de TinyTable v3. Fruto de este he dado en la clave de las modificaciones necesarias para el correcto funcionamiento.

Eliminación de acentos y otros caracteres en JavaScript

Hay muchos códigos por internet sobre la eliminación de acentos, pero por algún motivo que no he llegado a encontrar en TinyTable no funcionaban correctamente y es por eso que realicé este script para la eliminación de acentos:

function til(t){
   var ts = '';
   for(var i=0;i<t.length;i++)
   {
      var c = t.charCodeAt(i);
      if(c >= 224 && c <= 230)
         ts += 'a';
      else if(c >= 232 && c <= 235)
         ts += 'e';
      else if(c >= 236 && c <= 239)
         ts += 'i';
      else if(c >= 242 && c <= 246)
         ts += 'o';
      else if(c >= 249 && c <= 252)
         ts += 'u';
      else
         ts += t.charAt(i);
   }
   return ts;
};

Podéis consultar las tablas de codificación de caracteres ASCII.

Modificaciones a TinyTable v3

Fichero tinytable/script-new.js

En el método search (sorter.prototype.search) es necesario llamar a til() para que el texto que viene del campo de búsqueda y el texto que compra en la tabla HTML sean procesados sin acentos, así como la comparación sea basada en estos:

sorter.prototype.search=function(f){
   var i=x=n=0, k=-1, q=til(T$(f).value.toLowerCase());
   if(this.p.colddid){k=T$(this.p.colddid).value}
   [...]
   for(x=s;x<e;x++){
      var b=til(r.cells[x].innerHTML.toLowerCase());
      if(b.indexOf(q)==-1){v=0}else{v=1; break}
   }
[...]

El método sort (sorter.prototype.sort) es el encargado de ordenar las columnas, pero la decisión sobre el orden lo hace el método cp() (comparation) y es aquí donde he tenido que realizar las modificaciones añadiendo el uso de til():

function cp(f,c){
   var g,h; f=g=til(f.v.toLowerCase()); c=h=til(c.v.toLowerCase());
   var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
[...]

Ejemplo y descarga

Aquí os dejo un ejemplo y el código para que lo podáis usar fácilmente.

Puedes ver un ejemplo aquí

Descargar código completo

Sin las modificaciones en el código de jQuery ContextMenu pasa esto:

En el directorio jqueryContextMenu encontramos jquery.contextMenu.js dónde está el código JavaScript de menú contextual. Sólo es necesario añadir estas líneas para que quede así:

(e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
(e.pageY) ? y = e.pageY : x = e.clientY + d.scrollTop;

//Código añadido
var menuW = menu.width();
var parentRightPosition = $(this).position().left+$(this).width();
if((x+menuW) > parentRightPosition)
{
     x -= menuW;
}
//fin código añadido
// Show the menu
$(document).unbind('click');
$(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);

Gracias a este código se puede controlar la posición donde va a aparecer el menú contextual, que en nuestro caso es hacia la izquierda si iba a salir fuera del elemento padre:

Hace ya algún tiempo que en la Web de anieto2k encontré un interesante artículo sobre TinyTable v3.

TinyTable v3 es un script Javascript que agrega ordenación, búsqueda, promedios de columna y totales, paginación... en tablas HTML. Todo esto lo hace con tan sólo 7Kb!!

Partiendo de esta base y después de usar TinyTable en diferentes proyectos he visto la necesidad de extender sus funcionalidades, concretamente el uso de jQuery Context Menu y jQuery Dialog UI.

Librerías usadas

Listado de librerías usadas para este desarrollo:

• JQuery 1.4.2
• TinyTable v3
• jQuery Context Menu
• jQuery Dialog UI

Motor del sistema

Para poder controlar todas las acciones que intervienen en el Script programado he creado un "controller" para canalizarlas y así simplificar el código:

function Controller(action, el)
{
	//COLUMNA de TinyTable con el id principal
	var idColumn = 0;
	//COLUMNA de TinyTable con el nombre más destacado
	var nameColumn = 1;
	var ids = $(el).children('td').eq(idColumn).text();

	switch(action)
	{
		case "eliminarAction":
			alert("Eliminar "+$('#dialogTable #idEliminar').text());
			break;
		case "eliminar":
			$('#dialogTable').dialog('open');
			$('#dialogTable #nomEliminar').text($(el).children('td').eq(nameColumn).text());
			$('#dialogTable #idEliminar').text(ids);
			break;
		case "editar":
			alert("Eliminar fila: "+ids);
			break;
	}
}

Como queremos que el menú secundario aparezca en cada fila de la tabla, creamos un método para poder inicializar las propiedades de las fila "TR" al finalizar la carga de la página y al realizar una reordenación de la tabla.

function initFuncionsTaula()
{
//Iniciamos el menú secundario personalizado para las filas de la tabla
	$('#tableData tbody tr').contextMenu({
			menu: 'contextMenuElements',
			inSpeed: 10,
			outSpeed: 10
		},
		function(action, el, pos) {
			Controller(action, el)
		}
	);
//Permitimos que se pueda editar la fila con doble click de ratón.
	$('#tableData tbody tr').dblclick(
		function() {
			Controller('editar', this)
		}
	);
}

Modificaciones a Tiny Table v3

Tiny Table al ordenar y al hacer un reset en las filas, reescribe el contenido de ellas una vez ordenadas internamente, esto hace que las inicializaciones de initFunctionsTaula() no tengan efecto. Es por eso que he hecho unas pequeñas modificaciones a Tiny Table para que inicialice nuestros métodos cada vez que se cambia la estructura:

Fichero tinytable/script-new.js

[...]
TINY.table=function(){
	function sorter(n,t,p,r){this.n=n; this.id=t; this.p=p; if(r == undefined ) r = function(){}; this.r = r; if(this.p.init){this.init()}}
[...]

Ahora Tiny Table v3 tiene un cuarto parámetro que es una función que se llamará en sorter.prototype.reset y sorter.prototype.sort, como this.r().

Inicialización de Tiny Table y jQuery Dialog UI

Para finalizar nuestro código Javascrit para que todo funcione nos falta iniciar Tiny Table con el método initFunctionsTaula() y jQuery Dialog UI usando $(document).ready() de Jquery:

var sorter = null;
$(document).ready( function() {
	//INICIAR TINYTABLE
	sorter = new TINY.table.sorter('sorter','tableData',{
		headclass:'head',
		ascclass:'asc',
		descclass:'desc',
		evenclass:'evenrow',
		oddclass:'oddrow',
		evenselclass:'evenselected',
		oddselclass:'oddselected',
		paginate:true,
		size:10,
		colddid:'columns',
		currentid:'currentpage',
		totalid:'totalpages',
		startingrecid:'startrecord',
		endingrecid:'endrecord',
		totalrecid:'totalrecords',
		hoverid:'selectedrow',
		pageddid:'pagedropdown',
		navid:'tablenav',
		sortcolumn:1,
		sortdir:1,
		sum:[8],
		avg:[6,7,8,9],
		columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
		init:true
		},
		function() {initFuncionsTaula()}
	);
	//INICIALIZAR EL MÓDULO DE DIALOGO
	$("#dialogTable").dialog({
		bgiframe: true,
		resizable: false,
		autoOpen: false,
		modal: true,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'Cancelar': function() {
				$(this).dialog('close');
			},
			'Eliminar esta fila': function() {
				Controller('eliminarAction',this);
				$(this).dialog('close');
			}
		}
	});
});

Para el menú secundario ContextMenu será necesario algo como esto:

Editar
Eliminar

Y esto para el contenido del diálogo de eliminar:

 Está intentando eliminar la fila:




¿Está seguro que desea continuar?

Ejemplo y descarga

Aquí os dejo un ejemplo y el código para que lo podáis usar fácilmente.

Puedes ver un ejemplo aquí

Descargar código completo