且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

JQuery Datatable - 将单个单元格拆分为多个列以便于阅读?

更新时间:2023-02-04 20:03:19

我会尝试使用像这样的正则表达式: / ^(https?:\ / \ /)(.+ \ /)(。+)/



因此,假设您的数据是在JSON中形成的,如



您可以在此处测试您自己的正则表达式。



希望它有所帮助!

;)










编辑



仅分割路径...而不是完整URL,如评论中所述:



您***使用 .split 函数。

因为这部分不会像以前那样常规。

它可以有不同的子目录级别...

它可以有一个尾部斜杠,有时不会。



所以我et say你有4列,就像你提供的例子:/ this / is / my / path



由于函数有点长,我认为它***避免重复4次。

所以让我们创建一个放置在全局范围内的函数。

  //此var是表的实际列量(不是从零开始)。 
var maxPathParts = 4;

函数pathSplitter(pathPart){

//检查第一个char是否为/并且如果是这样则删除。
//奇怪的是,第一个数组元素为空。
if(data.charAt(0)==/){
data = data.sustr(1);
}

//检查最后一个字符是否为斜杠。
var lastWasSlash = false;
if(data.charAt(data.length-1)==/){
lastWasSlash = true;
data = data.substr(0,data.length-1);
}

//现在基于斜杠拆分数组中的数据。
var splittedData = data.split(/);

//如果有多个部分而不是maxPathParts ...在最后一部分汇总所有的例外情况。
if(splittedData.length> maxPathParts){
var tempLastPart;
for(i = maxPathParts-1; i< splittedData.length; i ++){
tempLastPart + = splittedData [i] +/;
}
splittedData [maxPathParts] = tempLastPart;
}

//如果存在。
if(typeof(splittedData [pathPart]!=undefined){

//如果它不是最后一个元素,则为它添加一个尾部斜杠。
if(pathPart != splittedData.length-1){

//为其添加一个尾部斜杠。
splittedData [pathPart] + =/;
}

//但是如果路径的最后一个字符是斜线,则无论如何都要添加它。
if(pathPart!= splittedData.length-1&& lastWasSlash){

/ /添加一个尾部斜杠。
splittedData [pathPart] + =/;
}
返回splittedData [pathPart];

} else {
//如果此列没有值。
返回;
}
}

现在您已经有了一个函数,只需在DataTable列设置中调用它,并使用正确的列号作为参数:

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

让我知道它的错误...
我没有测试任何东西。


With JQuery Data tables, is it possible to split a single column up into parts purely for readability? For example, I have a databases of URLs split into the domain and the path. I want to keep the path whole, but for readability I would like each part of the path split up into columns. For example:

DOMAIN | PATH
www.xxx| /p | /rty |   |
www.zzz| /o |      |   |
www.yyy| /yu| /x   | /t|

I have tried using render to split up each URL with spaces, but this is less than ideal as everything is within the same column and rather an eyesore.

EDIT Just to be clear, I would really like to keep the path as one data entry. I am aware this is an odd choice, but in my case it is preferable.

EDIT Code to fill in the table

Javascript

<script>
$(function() {
    $('#ut-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('/all') !!}',
        columns: [
            { data: 'frequency'},
            { data: 'occurrences'},
            { data: 'protocol'},
            { data: 'domain'},
            { data: 'path', render: function(data, type, row){
                var newchar = '  |  ';
                return data.split('/').join(newchar);
                }
            },
        ],
    });
});

HTML

<table class="table table-bordered" id="ut-table">
    <thead>
    <tr>
        <th>frequency</th>
        <th>occurrences</th>
        <th>protocol</th>
        <th>domain</th>
        <th>path</th>
    </tr>
    </thead>
</table>


Laravel Back End

public function all()
{
    Debugbar::warning('query fired');
    return Datatables::of(
        Unknown_Tag::query()
        ->orderBy('frequency', 'desc')
        ->groupBy('urlTrimmed')
    )->make(true);
}

EDIT: Thanks a million to Louys and his answer, however I still have a problem. I need to split up my path, not my url. EX I need to split this: "/this/is/my/path" into this: this is my path I tried the below code:

<script>
$(function() {
    var table = $('#ut-table');
    table.dataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! url('/all') !!}',
        columns: [
            { data: 'domain'},
            { data: 'path', render: function(data, type, row){
                var regexp = /^\/.*?(?=\/|$)/g;
                var match = regexp.exec(data);
                return match[0];
            }
            },
            { data: 'path', render: function(data, type, row){
                var regexp = /^\/.*?(?=\/|$)/g;
                var match = regexp.exec(data);
                return match[1];
            }
            },
        ],
    });
});

However, since both calls to my regex are in different scopes, only my first match will be returned. Any idea how I can get around this without having to run a loop for each iteration? Actually, this thought just came to me, is there anyway I can edit the JSON from my PHP call to include the split up path?

I would try using a regular expression like this one : /^(https?:\/\/)(.+\/)(.+)/.

So, assuming your data is in JSON formed like in this example.
And that you have ONE JSON attribute containg the full URL.

Say... Something like this:

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

Your function would look like:

$(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
                }
            },
        ],
    });
});

So the regular expression has 3 possible "matches" determined by the parenthesis.
The trick is to return the right match in the right column.

You can test your own regular expression here.

Hoping it helps!
;)





EDIT

To "split" the path only... instead of the full URL, as asked in comments:

You better use the .split function then.
Because this part will not be as "regular" has the previous case.
It can have different sub-directory level...
It can have a trailing slash and sometimes not.

So let say you have 4 columns, like for the example you provided : "/this/is/my/path"

Since the function is a bit longuer, I think it is best to avoid having it repeated 4 times.
So let's create a function to place in global scope.

// 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 "";
    }
}

So now that you have a function, just call it in the DataTable column settings with the right column number as argument:

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

Let me know it it bugs... I didn't test anything.