DataTables ofrece una solución eficiente para el manejo de tablas, pero cuando se trata de grandes volúmenes de datos, la carga directa puede afectar el rendimiento. La carga asíncrona mediante AJAX permite optimizar este proceso.

La configuración básica requiere activar el modo servidor durante la inicialización:

var tabla = $("#miTabla").DataTable({
    procesando: true,
    servidorLado: true,
    ajax: {
        url: 'http://localhost:802/datatables/procesar.php',
        fuenteDatos: "resultados"
    },
    columnas: [
        { "data": "nombre" },
        { "data": "valor" }
    ],
    paginacion: true,
    ordenamiento: true,
    busqueda: true,
    longitudMostrar: 50,
    idioma: configIdioma
});

Al activar servidorLado: true, cada interacción con la tabla generará solicitudes al back end. Es crucial validar todos los parámetros recibidos para prevenir inyecciones SQL.

La respuesta del servidor debe seguir este formato:

{
    "resultados": [
        {
            "nombre": "Ana",
            "valor": "25"
        },
        {
            "nombre": "Carlos",
            "valor": "38"
        }
    ],
    "estado": true,
    "totalRegistros": 50000,
    "registrosFiltrados": 50000
}

Para implementar búsquedas personalizadas:

$('#filtrar').on('click', function() {
    var inicio = $('#valorInicio').val();
    var fin = $('#valorFin').val();
    tabla.api().search(inicio + ':' + fin).draw();
});

Para reducir la frecuencia de soliciutdes, configure un retardo en la búsqueda:

retardoBusqueda: 500

Ejemplo completo de configuración:

var configIdioma = {
    menuLongitud: '<select class="form-control">' +
        '<option value="50">50</option>' +
        '<option value="100">100</option>' +
        '</select>',
    buscar: '<span>Filtrar:</span>',
    paginacion: {
        primera: "Inicio",
        anterior: "Anterior",
        siguiente: "Siguiente",
        ultima: "Final"
    },
    sinRegistros: "No se encontraron resultados",
    info: "Mostrando _START_ a _END_ de _TOTAL_ registros"
};

$(document).ready(function() {
    var tabla = $("#miTabla").DataTable({
        procesando: true,
        servidorLado: true,
        ajax: {
            url: 'http://localhost:802/datatables/procesar.php',
            fuenteDatos: "resultados"
        },
        columnas: [
            { "data": "nombre" },
            { "data": "valor" }
        ],
        paginacion: true,
        ordenamiento: true,
        busqueda: true,
        retardoBusqueda: 500,
        longitudMostrar: 50,
        idioma: configIdioma
    });

    $('#filtrar').click(function() {
        var min = $('#minimo').val();
        var max = $('#maximo').val();
        tabla.api().search(min + '-' + max).draw();
    });
});