📘 jsonRulesFilter.js

Plugin de jQuery para crear reglas avanzadas de filtrado sobre datasets JSON de forma dinámica y visual.

Permite construir filtros tipo:

• Texto (contiene, empieza por, etc.)
• Números (mayor que, menor que, etc.)
• Select (valores únicos del dataset)

🚀 Instalación

Instalar via npm:

npm install json-rules-filter

Incluye las dependencias necesarias:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap (opcional, para estilos) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<!-- FontAwesome (opcional para iconos) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<!-- jsonRulesFilter -->
<script src="jsonRulesFilter.js"></script>

Instalar via cdn:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap (opcional, para estilos) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<!-- FontAwesome (opcional para iconos) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<!-- jsonRulesFilter -->
<script src="https://unpkg.com/[email protected]/src/jquery.jsonRulesFilter.js" class="script_" type="text/javascript"></script>

⚙️ Uso básico

const data = [
    { name: "Juan", total: 100, cargo: "Admin" },
    { name: "Ana", total: 200, cargo: "User" },
    { name: "Luis", total: 150, cargo: "Admin" }
];

$("#miFiltro").jsonRulesFilter(data,
 {
    filters:[
        {
            name: "Total",
            type: "number",
            data: "total",
            render: function(data) {
                return data.text;
            }
        },
         
    ],
    onApply: function (rules, filteredData) {
        console.log("Reglas:", rules);
        console.log("Resultados:", filteredData);
    }
});

🧠 Configuración

bsVersion

Define la compatibilidad del plugin con la version de bootstrap , actualmente solo acepta dos valores , 4 para bootstrap4 y 5 para bootstrap5

bsVersion:5 //Bootstrap 5

filters

Define las columnas disponibles para filtrar.

• name: (título del filtro)
• type: tipo de filtrado. Las opciones disponibles son number,string y select
• data: clave de referencia en el dataset de JSON, se usa tanto para filtrar como para generar las opciones únicas de los tipo select

filters: [
    {
        name: "Total",
        type: "number",
        data: "total",
        render: function(data) {
            return data.text;
        }
    }
]

language

Personaliza los operadores de filtrado.

language: {
        string: {
            sContain: "Contiene",
            sNotContain: "No contiene",
            sEquals: "Igual a",
            sDifference: "Diferente de",
            sStartWith: "Empieza con",
            sEndWith: "Termina con"
        },
        number: {
            nEquals: "Igual a",
            nDifference: "Diferente de",
            nGreatherThan: "Mayor que",
            nGreatherThanOrEquals: "Mayor o igual que",
            nLowerThan: "Menor que",
            nLowerThanOrEquals: "Menor o igual que"
        },
        searchLabel:{
            string: "Texto",
            number: "Número"
        }
    }

buttons

Configura textos y estilos de botones.

buttons: {
    reset: {
        text: "Resetear",
        className: "btn btn-link"
    },
    dropdown: {
        text: "Añadir regla",
        className: "btn btn-secondary"
    },
    apply: {
        text: "Aplicar",
        className: "btn btn-primary"
    }
}

title

Título del componente.

title: {text:"Reglas de filtrado",className:"fs-4"}

onApply

Callback ejecutado al aplicar filtros.

onApply: function (rules, filteredData) {
}

🧩 Tipos de filtros

Texto (text)

• Contiene
• No contiene
• Igual a
• Diferente de
• Empieza con
• Termina con

Número (number)

• Igual a
• Diferente de
• Mayor que
• Mayor o igual que
• Menor que
• Menor o igual que

Select (select)

• Genera valores únicos automáticamente
• Permite selección múltiple

🛠️ Métodos públicos

updateData

El datasets de JSON se mantiene en memoria tras la inicialización , si tu datasets cambió , debes pasarle en todo momento los datos actualizados.

$("#miFiltro").jsonRulesFilter("updateData", nuevosDatos);

🧪 Ejemplo completo

const empleados = [
    { name: "Carlos", total: 300, cargo: "Manager" },
    { name: "Laura", total: 120, cargo: "Developer" },
    { name: "Pedro", total: 220, cargo: "Developer" }
];

$("#container-rules").jsonRulesFilter(empleados, {
    bsVersion:5,
    filters: [
        { name: "Nombre", type: "text", data: "name" },
        { name: "Total", type: "number", data: "total" },
        { name: "Cargo", type: "select", data: "cargo",function(data){ 
            return`<span class="badge text-bg-success">${data}</span>`;
        }}
    ],
    onApply: function (rules, results) { 
        $("#container-rules-collapse").empty();
        //aquí podemos actualizar la tabla de datos con los datos ya filtrados
        //generamos indicador budge para contenedor de filtros
        $.each(reglas, function (index, element) {
        
            let text = `${element.dataName} ${element.optionFilterText.join("").toLowerCase()} ${element.searchValue}`;

            if (element.typeFilter === 'select') {
                text = `${element.dataName} en (${element.optionFilter.join(", ").toLowerCase()})`
            }

            const budge =`<span class="badge rounded-pill text-bg-primary ml-1">${text}</span>`;

            $("#container-rules-collapse").append(budge);
        });

        $("#num-filters").html(reglas.length);
    }
});

<div class="max-w-8xl mx-auto sm:px-6 px-8">
    <div class="mt-3 bg-white overflow-hidden shadow-sm border border-secondary rounded-xl px-3 py-2">
        <div id="container-rules" class="collapse py-2 px-2">

        </div>
        <div class="d-flex justify-content-between py-2 pe-2">
            <div class="pl-2 d-flex justify-content-start">
                <span class="fw-semibold">Filtros activos:</span>
                <div id="container-rules-collapse"></div>
            </div>
            <a class="link-dark position-relative" data-bs-toggle="collapse" href="#container-rules"
                role="button">
                <i class="fa-solid fa-filter"></i>
                <span id="num-filters"
                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">0</span>
            </a>
        </div>
    </div>
</div>

📌 Notas

• Compatibilidad con bootstrap 4 y 5
• Soporta propiedades anidadas (ej: user.name)
• Usa lógica AND entre reglas
• Basado en Select2
• Permite múltiples instancias

💡 Ideas futuras

• Lógica OR
• Guardado de filtros
• Exportar/importar reglas