RowGroup 技巧與訣竅

RowGroup 是一個非常有用的工具，可以在排序資料列時以視覺方式顯示資料群組。RowGroup 擴充功能的初始範例說明了初始化這些分組有多麼容易。可以進行更進階的分組，我將在下面介紹幾種不同的使用 RowGroup 的方法。

$('#example').DataTable( {
    order: [[3, 'asc']],
    rowGroup: {
        dataSrc: 2
    }
});

這個非常基本的 RowGroup 初始化會根據索引為 2 的欄位中資料列所持有的任何內容來對資料進行分組。

讓我們擴展一下 - 在這篇文章中，我將詳細介紹如何：

使用自訂分組和函式來提供範圍分組
自動根據表格中正在排序的欄位中的資料進行分組。

自訂分組

使用 RowGroup，可以不只依據原始的儲存格資料來分組資料列。此範例使用 rowGroup.dataSrc 屬性作為函式，允許處理資料，然後根據資料列的資料傳回群組名稱。

$('#basicRowGroup').DataTable( {
    order: [[3, 'asc']],
    rowGroup: {
        dataSrc: function ( row ) {
            var base = Math.floor(row[3] / 10);
            return "" + base + "0 - " + base + '9';
        }
    }
});

姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011-04-25	$320,800
Garrett Winters	會計師	東京	63	2011-07-25	$170,750
Ashton Cox	初級技術作家	舊金山	66	2009-01-12	$86,000
Cedric Kelly	資深 Javascript 開發人員	愛丁堡	22	2012-03-29	$433,060
Airi Satou	會計師	東京	33	2008-11-28	$162,700
Brielle Williamson	整合專家	紐約	61	2012-12-02	$372,000
Herrod Chandler	銷售助理	舊金山	59	2012-08-06	$137,500
Rhona Davidson	整合專家	東京	55	2010-10-14	$327,900
Colleen Hurst	Javascript 開發人員	舊金山	39	2009-09-15	$205,500
Sonya Frost	軟體工程師	愛丁堡	23	2008-12-13	$103,600
Jena Gaines	辦公室經理	倫敦	30	2008-12-19	$90,560
Quinn Flynn	支援主管	愛丁堡	22	2013-03-03	$342,000
Charde Marshall	區域總監	舊金山	36	2008-10-16	$470,600
Haley Kennedy	資深行銷設計師	倫敦	43	2012-12-18	$313,500
Tatyana Fitzpatrick	區域總監	倫敦	19	2010-03-17	$385,750
Michael Silva	行銷設計師	倫敦	66	2012-11-27	$198,500
Paul Byrd	財務長 (CFO)	紐約	64	2010-06-09	$725,000
Gloria Little	系統管理員	紐約	59	2009-04-10	$237,500
Bradley Greer	軟體工程師	倫敦	41	2012-10-13	$132,000
Dai Rios	人事主管	愛丁堡	35	2012-09-26	$217,500
Jenette Caldwell	開發主管	紐約	30	2011-09-03	$345,000
Yuri Berry	行銷長 (CMO)	紐約	40	2009-06-25	$675,000
Caesar Vance	銷售前支援	紐約	21	2011-12-12	$106,450
Doris Wilder	銷售助理	雪梨	23	2010-09-20	$85,600
Angelica Ramos	執行長 (CEO)	倫敦	47	2009-10-09	$1,200,000
Gavin Joyce	開發人員	愛丁堡	42	2010-12-22	$92,575
Jennifer Chang	區域總監	新加坡	28	2010-11-14	$357,650
Brenden Wagner	軟體工程師	舊金山	28	2011-06-07	$206,850
Fiona Green	營運長 (COO)	舊金山	48	2010-03-11	$850,000
Shou Itou	區域行銷	東京	20	2011-08-14	$163,000
Michelle House	整合專家	雪梨	37	2011-06-02	$95,400
Suki Burks	開發人員	倫敦	53	2009-10-22	$114,500
Prescott Bartlett	技術作家	倫敦	27	2011-05-07	$145,000
Gavin Cortez	團隊領導	舊金山	22	2008-10-26	$235,500
Martena Mccray	銷售後支援	愛丁堡	46	2011-03-09	$324,050
Unity Butler	行銷設計師	舊金山	47	2009-12-09	$85,675
Howard Hatfield	辦公室經理	舊金山	51	2008-12-16	$164,500
Hope Fuentes	秘書	舊金山	41	2010-02-12	$109,850
Vivian Harrell	財務總監	舊金山	62	2009-02-14	$452,500
Timothy Mooney	辦公室經理	倫敦	37	2008-12-11	$136,200
Jackson Bradshaw	主管	紐約	65	2008-09-26	$645,750
Olivia Liang	支援工程師	新加坡	64	2011-02-03	$234,500
Bruno Nash	軟體工程師	倫敦	38	2011-05-03	$163,500
Sakura Yamamoto	支援工程師	東京	37	2009-08-19	$139,575
Thor Walton	開發人員	紐約	61	2013-08-11	$98,540
Finn Camacho	支援工程師	舊金山	47	2009-07-07	$87,500
Serge Baldwin	資料協調員	新加坡	64	2012-04-09	$138,575
Zenaida Frank	軟體工程師	紐約	63	2010-01-04	$125,250
Zorita Serrano	軟體工程師	舊金山	56	2012-06-01	$115,000
Jennifer Acosta	初級 Javascript 開發人員	愛丁堡	43	2013-02-01	$75,650
Cara Stevens	銷售助理	紐約	46	2011-12-06	$145,600
Hermione Butler	區域總監	倫敦	47	2011-03-21	$356,250
Lael Greer	系統管理員	倫敦	21	2009-02-27	$103,500
Jonas Alexander	開發人員	舊金山	30	2010-07-14	$86,500
Shad Decker	區域總監	愛丁堡	51	2008-11-13	$183,000
Michael Bruce	Javascript 開發人員	新加坡	29	2011-06-27	$183,000
Donna Snider	客戶支援	紐約	27	2011-01-25	$112,000
姓名	職位	辦公室	年齡	開始日期	薪資

這裡發生的事情是，當 RowGroup 檢查要將資料列新增到哪個群組時，每當它呼叫 rowGroup.dataSrc，它會執行此函式，而不只是查看儲存在其中一個欄位中的資料。透過從欄位中取得資料並加以操作，可以用許多不同的方式將資料列分組在一起。

另一個基本但有用的函式可能是從名稱中取出第一個字元，並將它們以三個為一組進行分組，例如 [ABC]、[DEF]、...

依排序自動進行資料列分組

也可以根據正在排序的欄位自動設定分組，如下面的範例所示

var table = $('#MultiGrouping')
    .on('order.dt', function(e, ctx, order) {
        var api = new $.fn.DataTable.Api(this);
        var orderingArr = [];

        for (var i=0 ; i<order.length ; i++) {
            orderingArr.push(order[i].col);
        }

        api.rowGroup().dataSrc(orderingArr);
    })  
    .DataTable({
        pageLength: 25,
        rowGroup: true
    });

姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011-04-25	$320,800
Garrett Winters	會計師	東京	63	2011-07-25	$170,750
Ashton Cox	初級技術作家	舊金山	66	2009-01-12	$86,000
Cedric Kelly	資深 Javascript 開發人員	愛丁堡	22	2012-03-29	$433,060
Airi Satou	會計師	東京	33	2008-11-28	$162,700
Brielle Williamson	整合專家	紐約	61	2012-12-02	$372,000
Herrod Chandler	銷售助理	舊金山	59	2012-08-06	$137,500
Rhona Davidson	整合專家	東京	55	2010-10-14	$327,900
Colleen Hurst	Javascript 開發人員	舊金山	39	2009-09-15	$205,500
Sonya Frost	軟體工程師	愛丁堡	23	2008-12-13	$103,600
Jena Gaines	辦公室經理	倫敦	30	2008-12-19	$90,560
Quinn Flynn	支援主管	愛丁堡	22	2013-03-03	$342,000
Charde Marshall	區域總監	舊金山	36	2008-10-16	$470,600
Haley Kennedy	資深行銷設計師	倫敦	43	2012-12-18	$313,500
Tatyana Fitzpatrick	區域總監	倫敦	19	2010-03-17	$385,750
Michael Silva	行銷設計師	倫敦	66	2012-11-27	$198,500
Paul Byrd	財務長 (CFO)	紐約	64	2010-06-09	$725,000
Gloria Little	系統管理員	紐約	59	2009-04-10	$237,500
Bradley Greer	軟體工程師	倫敦	41	2012-10-13	$132,000
Dai Rios	人事主管	愛丁堡	35	2012-09-26	$217,500
Jenette Caldwell	開發主管	紐約	30	2011-09-03	$345,000
Yuri Berry	行銷長 (CMO)	紐約	40	2009-06-25	$675,000
Caesar Vance	銷售前支援	紐約	21	2011-12-12	$106,450
Doris Wilder	銷售助理	雪梨	23	2010-09-20	$85,600
Angelica Ramos	執行長 (CEO)	倫敦	47	2009-10-09	$1,200,000
Gavin Joyce	開發人員	愛丁堡	42	2010-12-22	$92,575
Jennifer Chang	區域總監	新加坡	28	2010-11-14	$357,650
Brenden Wagner	軟體工程師	舊金山	28	2011-06-07	$206,850
Fiona Green	營運長 (COO)	舊金山	48	2010-03-11	$850,000
Shou Itou	區域行銷	東京	20	2011-08-14	$163,000
Michelle House	整合專家	雪梨	37	2011-06-02	$95,400
Suki Burks	開發人員	倫敦	53	2009-10-22	$114,500
Prescott Bartlett	技術作家	倫敦	27	2011-05-07	$145,000
Gavin Cortez	團隊領導	舊金山	22	2008-10-26	$235,500
Martena Mccray	銷售後支援	愛丁堡	46	2011-03-09	$324,050
Unity Butler	行銷設計師	舊金山	47	2009-12-09	$85,675
Howard Hatfield	辦公室經理	舊金山	51	2008-12-16	$164,500
Hope Fuentes	秘書	舊金山	41	2010-02-12	$109,850
Vivian Harrell	財務總監	舊金山	62	2009-02-14	$452,500
Timothy Mooney	辦公室經理	倫敦	37	2008-12-11	$136,200
Jackson Bradshaw	主管	紐約	65	2008-09-26	$645,750
Olivia Liang	支援工程師	新加坡	64	2011-02-03	$234,500
Bruno Nash	軟體工程師	倫敦	38	2011-05-03	$163,500
Sakura Yamamoto	支援工程師	東京	37	2009-08-19	$139,575
Thor Walton	開發人員	紐約	61	2013-08-11	$98,540
Finn Camacho	支援工程師	舊金山	47	2009-07-07	$87,500
Serge Baldwin	資料協調員	新加坡	64	2012-04-09	$138,575
Zenaida Frank	軟體工程師	紐約	63	2010-01-04	$125,250
Zorita Serrano	軟體工程師	舊金山	56	2012-06-01	$115,000
Jennifer Acosta	初級 Javascript 開發人員	愛丁堡	43	2013-02-01	$75,650
Cara Stevens	銷售助理	紐約	46	2011-12-06	$145,600
Hermione Butler	區域總監	倫敦	47	2011-03-21	$356,250
Lael Greer	系統管理員	倫敦	21	2009-02-27	$103,500
Jonas Alexander	開發人員	舊金山	30	2010-07-14	$86,500
Shad Decker	區域總監	愛丁堡	51	2008-11-13	$183,000
Michael Bruce	Javascript 開發人員	新加坡	29	2011-06-27	$183,000
Donna Snider	客戶支援	紐約	27	2011-01-25	$112,000
姓名	職位	辦公室	年齡	開始日期	薪資

在這裡，我們使用的是 rowGroup().dataSrc() API 方法。透過將它放在 order 事件的回呼中，每當變更欄位排序時，就會呼叫它，允許我們非同步更新 RowGrouping 來源。在回呼中，我們所做的只是從傳遞到回呼的資料中提取正在進行排序的欄位。然後，我們將這些欄位轉換為一個簡單的整數陣列，然後將其傳遞到 rowGroup().dataSrc() API 方法。透過使用陣列，我們允許在多個欄位上進行排序時發生子分組。

同樣值得注意的是，在 DataTable 本身之前新增事件監聽器非常重要。這樣做可以將 DataTable 的初始排序納入考量。如果我們在 DataTable 之後初始化回呼，則您的排序和 RowGrouping 可能不相符。

RowGroup 技巧與訣竅

自訂分組

依排序自動進行資料列分組

DataTables