JQuery Datatable - 将单个单元格拆分为多列以提高可读性？

Posted 2023-02-24

【中文标题】JQuery Datatable - 将单个单元格拆分为多列以提高可读性？

【英文标题】：JQuery Datatable - Split single cell into multiple columns for readability?

【发布时间】：2017-07-20 00:43:20

【问题描述】：

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

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

我曾尝试使用 render 将每个 URL 与空格分开，但这并不理想，因为所有内容都在同一列中，而且很碍眼。

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

EDIT 填写表格的代码

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

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

<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 以包含拆分路径吗？

【问题讨论】：

显示如何填充 Datatable 数据...

【参考方案1】：

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

因此，假设您的数据采用 JSON 格式，类似于 this example。 并且您拥有一个包含完整 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 个可能的“匹配项”，由括号确定。 诀窍是在右列中返回正确的匹配项。

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

希望对您有所帮助！ ;)

---

编辑

仅“拆分”路径...而不是完整的 URL，如 cmets 中所要求的：

那么你最好使用.split 函数。 因为这部分不会像以前的情况那样“常规”。 它可以有不同的子目录级别... 它可以有一个尾部斜杠，有时没有。

假设您有 4 列，例如您提供的示例：“/this/is/my/path”

由于函数有点长，我认为最好避免重复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),
],

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

【讨论】：

哇，好吃！我可能不得不使用这个！ :-)

感谢您的帮助，您确实帮助我了解了数据表的工作原理。然而，这并不是我所需要的。查看我更新的帖子

我更新了我的答案，只考虑了路径。 ;)