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

Question

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

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

我一直在使用呈现分裂与空间的每个网址试过，但一切都在同一列，相当碍眼之内，这是不太理想的。

编辑只是要清楚，我真的想保持路径作为一个数据输入。我知道这是一个奇怪的选择，但在我的情况下，这是可取的。

编辑代码填写在表格

的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来包含分离路径？

Answer 1

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

因此，假设您的数据是在类似于this example的JSON中形成的。
并且您拥有包含完整URL的ONE 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，如问评论：

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

因此，让我们说你有4列，像这个例子中你提供的：“/这/是/我的/路径”

由于该功能是有点longuer，我认为这是最好的，以避免它重复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 ""; 
    } 
} 

所以，现在你有一个功能，只需用正确的列数调用它在数据表列设置为参数：

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

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