JQuery Datatable - 将单个单元格拆分为多个列以便于阅读？ [英] JQuery Datatable - Split single cell into multiple columns for readability?
问题描述
使用JQuery Data表，是否可以将单个列拆分为纯粹为了便于阅读的部分？例如，我有一个URL数据库分为域和路径。我想保持整个路径，但为了便于阅读，我希望路径的每个部分分成列。例如：
DOMAIN |路径
www.xxx | / p | / rty | |
www.zzz | / o | | |
www.yyy | /宇| / x | / T |
我尝试使用 render 分隔每个带空格的网址，但是这不太理想，因为所有内容都在同一列中，而不是眼睛。
编辑为了清楚，我真的很想将路径保留为一个数据条目。我知道这是一个奇怪的选择，但在我的情况下，它更可取。
编辑填写表格的代码
Javascript
< script>
$（function（）{
$（'＃ut-table'）。DataTable（{
processing：true，
serverSide：true，
ajax：' {!! url（'/ all'）!!}'，
列：[
{data：'frequency'}，
{data：'occurrence''，
{data：'protocol'}，
{data：'domain'}，
{data：'path'，render：function（data，type，row）{
var newchar =' |';
返回data.split（'/'）。join（newchar）;
}
}，
]，
}）;
}）;
HTML
< table class =table table-borderedid =ut-table>
< thead>
< tr>
< th>频率< / th>
< th> eventss< / th>
< th> protocol< / th>
< th> domain< / th>
< th>路径< / th>
< / tr>
< / thead>
< / table>
Laravel后端
公共函数all（）
{
Debugbar :: warning（'query fired'）;
return Datatables :: of（
Unknown_Tag :: query（）
- > orderBy（'frequency'，'desc'）
- > groupBy（'urlTrimmed'）
） - > make（true）;
}
编辑：
感谢一百万到路易斯和他的回答，不过我还有问题。我需要分开我的路径，而不是我的网址。 EX我需要拆分这个：
/ this / is / my / path
到这个：
这是我的路径
我尝试了以下代码：
< script>
$（function（）{
var table = $（'＃ut-table'）;
table.dataTable（{
processing：true，
serverSide：是的，
ajax：'{!! url（'/ all'）!!}'，
栏：[
{data：'domain'}，
{资料： 'path'，render：function（data，type，row）{
var regexp = /^\/.*?(?=\/||）/ g;
var match = regexp .exec（数据）;
返回匹配[0];
}
}，
{数据：'路径'，渲染：函数（数据，类型，行）{
var regexp = /^\/.*?(?=\/|$)/g;
var match = regexp.exec（data）;
return match [1];
}
}，
]，
}）;
}）;
但是，由于两次调用都是我的正则表达式在不同的范围内，只返回我的第一场比赛。任何想法如何解决这个问题而不必为每次迭代运行一个循环？
实际上，这个想法刚刚来到我身边，无论如何我可以编辑我的PHP调用中的JSON以包含拆分路径吗？
我会尝试使用像这样的正则表达式： / ^（https？：\ / \ /)(.+ \ /）（。+）/ 。
因此，假设您的数据是在JSON中形成的，如
您可以在此处测试您自己的正则表达式。
希望它有所帮助！
;）
< hr>
编辑
仅分割路径...而不是完整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.
这篇关于JQuery Datatable - 将单个单元格拆分为多个列以便于阅读？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
