Question

使用JQuery Data表，是否可以将单个列拆分为纯粹为了便于阅读的部分？例如，我有一个URL数据库分为域和路径。我想保持整个路径，但为了便于阅读，我希望路径的每个部分分成列。例如：

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

我尝试使用 render 将每个网址拆分为空格，但这并不理想，因为所有内容都位于同一列中，而是一个眼睛。

编辑为了清楚起见，我真的希望将路径保留为一个数据条目。我知道这是一个奇怪的选择，但就我而言，它更可取。

编辑代码填写表格

的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);
}

编辑：万分感谢路易斯和他的回答，但我还是有问题。我需要分开我的路径，而不是我的网址。我需要分开这个： “/这/是/我的/路径” 进入这个：这是我的道路我尝试了以下代码：

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

但是，由于对我的正则表达式的两个调用都在不同的范围内，因此只会返回我的第一个匹配项。任何想法如何解决这个问题而不必为每次迭代运行一个循环？实际上，这个想法刚刚来到我身边，无论如何我可以从我的PHP调用中编辑JSON以包含拆分路径吗？

Answer 1

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

因此，假设您的数据是在this example中形成的JSON中形成的并且您有一个包含完整URL的JSON属性。

说......这样的事情：

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

您的功能如下：

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

因此正则表达式有3种可能的＆＃34;匹配＆＃34;由括号确定。
诀窍是在右栏中返回正确的匹配。

您可以测试自己的正则表达式here。

希望它有所帮助！
;）

<小时/>
的修改

To＆＃34; split＆＃34;仅限路径...而不是完整的网址，如评论中所述：

您最好使用.split功能。
因为这部分不会像＃34;常规＆＃34;有上一个案例它可以有不同的子目录级别...
它可以有一个斜杠，有时不会。

因此，假设您有4列，例如您提供的示例：＆＃34; / this / is / my / path＆＃34;

由于功能有点长，我认为最好避免重复4次因此，让我们创建一个放置在全局范围内的函数。

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

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

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

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

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

1 个答案: