AnexGRID grilla para Bootstrap 3

Plugin desarrollado en jQuery y en español que permite paginar, ordenar y/o filtrar registros para los proyectos que usen Bootstrap 3.

¿Cómo funciona?

Al igual que la mayoría de los plugins de jQuery, todo la configuración se hace declarando un objeto JSON y un contenedor HTML para que este sepa donde debe generarse la grilla.

El plugin solo trabaja bajo peticiones XHR hacia el servidor (Ajax), por lo tanto para poder usar el plugin debe configurar previamente su servidor para que sepa como comunicarse y pueda generar la grilla correctamente.

El ejemplo a continuación ha sido generado configurando al máximo AnexGrid para que puedan ver su potencial.
<div id="list"></div>
Configuraicón
var data = {
    class: 'table-striped table-bordered table-condensed',
    columnas: [
        { leyenda: '', style: 'width:40px;', class: 'text-center'},
        { leyenda: 'Profesión', style: 'width:200px;', columna: 'Profesion_id', ordenable: true, filtro: function(){
            return anexGrid_select({
                data: [
                    { valor: '', contenido: 'Todos' },
                    { valor: '1', contenido: 'Abogado' },
                    { valor: '2', contenido: 'Bombero' },
                    { valor: '3', contenido: 'Doctor' },
                    { valor: '4', contenido: 'Ingeniero Civil' },
                    { valor: '5', contenido: 'Ingeniero de Sistemas' },
                    { valor: '6', contenido: 'Músico' },
                ]
            });
        } },
        { leyenda: 'Empleado', class: '', ordenable: true, columna: 'Nombre', filtro: true },
        { leyenda: 'Correo', style: 'width:300px;', ordenable: true, filtro: true, columna: 'Correo' },
        { leyenda: 'Sexo', style: 'width:120px;', columna: 'Sexo', filtro: function(){
            return anexGrid_select({
                data: [
                    { valor: '', contenido: 'Todos' },
                    { valor: '1', contenido: 'Masculino' },
                    { valor: '2', contenido: 'Femenino' },
                ]
            });
        } },
        { leyenda: 'Sueldo', style: 'width:100px;', ordenable: true, columna: 'Sueldo' },
        { leyenda: 'Registro', style: 'width:100px;', ordenable: true, columna: 'FechaRegistro' },
    ],
    modelo: [
        { class: 'text-center', formato: function(tr, obj, valor){
            return anexGrid_dropdown({
                contenido: '<i class="glyphicon glyphicon-cog"></i>',
                class: 'btn btn-primary btn-xs',
                target: '_blank',
                id: 'editar-' + obj.id,
                data: [
                    { href: '#', contenido: 'Editar' },
                    { href: '#', contenido: 'Eliminar' }
                ]
            });
            }
        },
        { propiedad: 'Profesion.Nombre' },
        { style: '', class: '', formato: function(tr, obj, valor){
            return obj.Nombre + ' ' + obj.Apellido;
        }},
        { propiedad: 'Correo' },
        { propiedad: 'Sexo', formato: function(tr, obj, valor){
            return obj.Sexo == 1 ? 'Masculino' : 'Femenino';
        }},
        { propiedad: 'Sueldo', class: 'text-right', },
        { propiedad: 'FechaRegistro', class: 'text-right', },
    ],
    url: 'data.php',
    paginable: true,
    filtrable: true,
    limite: [20, 60, 100],
    columna: 'id',
    columna_orden: 'DESC'
};
Implementación
$(document).ready(function(){
    var grid = $("#list").anexGrid(data);
})

Dudas y/o sugerencias deja un comentario ..

Desarrollado por Anexsoft.