sql >> Base de Datos >  >> RDS >> Mysql

JQuery Datatable:¿Dividir una sola celda en varias columnas para facilitar la lectura?

Intentaría usar una expresión regular como esta:/^(https?:\/\/)(.+\/)(.+)/ .

Entonces, asumiendo que sus datos están en formato JSON como en este ejemplo .
Y que tiene UN atributo JSON que contiene la URL completa.

Di... Algo como esto:

{
    "frequency":{value},
    "occurrences":{value},
    "fullurl":{value}
}

Su función se vería así:

$(function() {
    $('#ut-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('/all') !!}',
        columns: [
            { data: 'frequency'},
            { data: 'occurrences'},
            { data: 'fullurl', render: function(data, type, row){
                var regexp = /^(https?:\/\/)(.+\/)(.+)/;
                var match = regexp.exec(data);
                return match[0];                        // PROTOCOL
                }
            },
            { data: 'fullurl', render: function(data, type, row){
                var regexp = /^(https?:\/\/)(.+\/)(.+)/;
                var match = regexp.exec(data);
                return match[1];                        // DOMAIN
                }
            },
            { data: 'fullurl', render: function(data, type, row){
                var regexp = /^(https?:\/\/)(.+\/)(.+)/;
                var match = regexp.exec(data);
                return match[2];                        // PATH
                }
            },
        ],
    });
});

Entonces, la expresión regular tiene 3 "coincidencias" posibles determinadas por el paréntesis.
El truco es devolver la coincidencia correcta en la columna derecha.

Puede probar su propia expresión regular aquí .

¡Espero que ayude!
;)




EDITAR

Para "dividir" solo la ruta... en lugar de la URL completa, como se solicita en los comentarios:

Será mejor que uses el .split función entonces.
Porque esta parte no será tan "regular" como el caso anterior.
Puede tener un nivel de subdirectorio diferente...
Puede tener una barra inclinada final y, a veces, no .

Entonces, digamos que tiene 4 columnas, como en el ejemplo que proporcionó:"/this/is/my/path"

Dado que la función es un poco más larga, creo que es mejor evitar que se repita 4 veces.
Así que vamos a crear una función para colocarla en el ámbito global.

// This var is the real column amount of your table (not zero-based).
var maxPathParts = 4;

function pathSplitter(pathPart){

    // Check if the first char is a / and remove if it's the case.
    // It would oddly make the first array element as empty.
    if(data.charAt(0)=="/"){
        data = data.sustr(1);
    }

    // Check if last char is a slash.
    var lastWasSlash=false;
    if(data.charAt(data.length-1)=="/"){
        lastWasSlash=true;
        data = data.substr(0,data.length-1);
    }

    // Now split the data in an array based on slashes.
    var splittedData = data.split("/");

    // If there is more parts than maxPathParts... Aggregate all the excedent in the last part.
    if(splittedData.length>maxPathParts){
        var tempLastPart;
        for(i=maxPathParts-1;i<splittedData.length;i++){
        tempLastPart += splittedData[i] + "/";
        }
        splittedData[maxPathParts]=tempLastPart;
    }

    // If it exist.
    if(typeof(splittedData[pathPart]!="undefined"){

        // Add a trailing slash to it if it is not the last element.
        if( pathPart != splittedData.length-1 ){

            // Add a trailing slash to it.
            splittedData[pathPart] += "/";
        }

        // But add it anyway if the last char of the path was a slash.
        if (pathPart != splittedData.length-1 && lastWasSlash ){

            // Add a trailing slash to it.
            splittedData[pathPart] += "/";
        }
        return splittedData[pathPart];

    }else{
        // If there is no value for this column.
        return "";
    }
}

Entonces, ahora que tiene una función, simplemente llámela en la configuración de la columna DataTable con el número de columna correcto como argumento:

columns: [
    { data: 'domain'},
    { data: 'path', render: pathSplitter(0)},
    { data: 'path', render: pathSplitter(1)},
    { data: 'path', render: pathSplitter(2)},
    { data: 'path', render: pathSplitter(3)},
],

Déjame saber si hay errores... No probé nada.