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

讓我知道它的錯誤...... 我沒不測試任何東西。