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

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

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

我已经尝试使用渲染来分隔每个带空格的URL，但这并不理想，因为所有内容都在同一列中，而不是一个眼睛。

编辑为了清楚起见，我真的希望将路径保留为一个数据条目。 我知道这是一个奇怪的选择，但在我的情况下，这是更好的选择。

编辑代码填写表格

使用Javascript

  $(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

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

编辑：万分感谢路易斯和他的回答，但我还是有问题。 我需要分开我的路径，而不是我的url。 EX我需要拆分：“/ this / is / my / path”到这个：这是我的路径我尝试了下面的代码：

  $(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?:\/\/)(.+\/)(.+)/ ?: /^(https?:\/\/)(.+\/)(.+)/ .+ /^(https?:\/\/)(.+\/)(.+)/ . /^(https?:\/\/)(.+\/)(.+)/ 。

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

说……这样的事情：

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

你的function看起来像：

 $(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种可能的“匹配”。
诀窍是在右栏中返回正确的匹配。

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

希望它有所帮助！
;）

---

编辑

仅在路径中“拆分”…而不是完整的URL，如评论中所述：

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

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

由于function有点长，我认为最好避免重复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 

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

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

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