使用正交資料
這個範例示範了 SearchBuilder 如何使用正交資料。
「評分」欄根據其值呈現進度條。SearchBuilder 無法在其 select 元素中顯示進度條。透過設定 columns.searchBuilder.orthogonal 使 orthogonal.display 值為 'filter'，則會改為顯示原始數值資料。
| 姓名 | 職位 | 辦公室 | 評分 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 評分 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端指令碼
- 評論
以下顯示的 Javascript 用於初始化本範例中顯示的表格
var data = [ { name: 'Tiger Nixon', position: 'System Architect', salary: '320800', start_date: '2011/04/25', office: 'Edinburgh', rating: '5421' }, { name: 'Garrett Winters', position: 'Accountant', salary: '170750', start_date: '2011/07/25', office: 'Tokyo', rating: '8422' }, { name: 'Ashton Cox', position: 'Junior Technical Author', salary: '86000', start_date: '2009/01/12', office: 'San Francisco', rating: '1562' }, { name: 'Cedric Kelly', position: 'Senior Javascript Developer', salary: '433060', start_date: '2012/03/29', office: 'Edinburgh', rating: '6224' }, { name: 'Airi Satou', position: 'Accountant', salary: '162700', start_date: '2008/11/28', office: 'Tokyo', rating: '5407' }, { name: 'Brielle Williamson', position: 'Integration Specialist', salary: '372000', start_date: '2012/12/02', office: 'New York', rating: '4804' }, { name: 'Herrod Chandler', position: 'Sales Assistant', salary: '137500', start_date: '2012/08/06', office: 'San Francisco', rating: '9608' }, { name: 'Rhona Davidson', position: 'Integration Specialist', salary: '327900', start_date: '2010/10/14', office: 'Tokyo', rating: '6200' }, { name: 'Colleen Hurst', position: 'Javascript Developer', salary: '205500', start_date: '2009/09/15', office: 'San Francisco', rating: '2360' }, { name: 'Sonya Frost', position: 'Software Engineer', salary: '103600', start_date: '2008/12/13', office: 'Edinburgh', rating: '1667' }, { name: 'Jena Gaines', position: 'Office Manager', salary: '90560', start_date: '2008/12/19', office: 'London', rating: '3814' }, { name: 'Quinn Flynn', position: 'Support Lead', salary: '342000', start_date: '2013/03/03', office: 'Edinburgh', rating: '9497' }, { name: 'Charde Marshall', position: 'Regional Director', salary: '470600', start_date: '2008/10/16', office: 'San Francisco', rating: '6741' }, { name: 'Haley Kennedy', position: 'Senior Marketing Designer', salary: '313500', start_date: '2012/12/18', office: 'London', rating: '3597' }, { name: 'Tatyana Fitzpatrick', position: 'Regional Director', salary: '385750', start_date: '2010/03/17', office: 'London', rating: '1965' }, { name: 'Michael Silva', position: 'Marketing Designer', salary: '198500', start_date: '2012/11/27', office: 'London', rating: '1581' }, { name: 'Paul Byrd', position: 'Chief Financial Officer (CFO)', salary: '725000', start_date: '2010/06/09', office: 'New York', rating: '3059' }, { name: 'Gloria Little', position: 'Systems Administrator', salary: '237500', start_date: '2009/04/10', office: 'New York', rating: '1721' }, { name: 'Bradley Greer', position: 'Software Engineer', salary: '132000', start_date: '2012/10/13', office: 'London', rating: '2558' }, { name: 'Dai Rios', position: 'Personnel Lead', salary: '217500', start_date: '2012/09/26', office: 'Edinburgh', rating: '2290' }, { name: 'Jenette Caldwell', position: 'Development Lead', salary: '345000', start_date: '2011/09/03', office: 'New York', rating: '1937' }, { name: 'Yuri Berry', position: 'Chief Marketing Officer (CMO)', salary: '675000', start_date: '2009/06/25', office: 'New York', rating: '6154' }, { name: 'Caesar Vance', position: 'Pre-Sales Support', salary: '106450', start_date: '2011/12/12', office: 'New York', rating: '8330' }, { name: 'Doris Wilder', position: 'Sales Assistant', salary: '85600', start_date: '2010/09/20', office: 'Sydney', rating: '3023' }, { name: 'Angelica Ramos', position: 'Chief Executive Officer (CEO)', salary: '1200000', start_date: '2009/10/09', office: 'London', rating: '5797' }, { name: 'Gavin Joyce', position: 'Developer', salary: '92575', start_date: '2010/12/22', office: 'Edinburgh', rating: '8822' }, { name: 'Jennifer Chang', position: 'Regional Director', salary: '357650', start_date: '2010/11/14', office: 'Argentina', rating: '9239' }, { name: 'Brenden Wagner', position: 'Software Engineer', salary: '206850', start_date: '2011/06/07', office: 'San Francisco', rating: '1314' }, { name: 'Fiona Green', position: 'Chief Operating Officer (COO)', salary: '850000', start_date: '2010/03/11', office: 'San Francisco', rating: '2947' }, { name: 'Shou Itou', position: 'Regional Marketing', salary: '163000', start_date: '2011/08/14', office: 'Tokyo', rating: '8899' }, { name: 'Michelle House', position: 'Integration Specialist', salary: '95400', start_date: '2011/06/02', office: 'Sydney', rating: '2769' }, { name: 'Suki Burks', position: 'Developer', salary: '114500', start_date: '2009/10/22', office: 'London', rating: '6832' }, { name: 'Prescott Bartlett', position: 'Technical Author', salary: '145000', start_date: '2011/05/07', office: 'London', rating: '3606' }, { name: 'Gavin Cortez', position: 'Team Leader', salary: '235500', start_date: '2008/10/26', office: 'San Francisco', rating: '2860' }, { name: 'Martena Mccray', position: 'Post-Sales support', salary: '324050', start_date: '2011/03/09', office: 'Edinburgh', rating: '8240' }, { name: 'Unity Butler', position: 'Marketing Designer', salary: '85675', start_date: '2009/12/09', office: 'San Francisco', rating: '5384' }, { name: 'Howard Hatfield', position: 'Office Manager', salary: '164500', start_date: '2008/12/16', office: 'San Francisco', rating: '7031' }, { name: 'Hope Fuentes', position: 'Secretary', salary: '109850', start_date: '2010/02/12', office: 'San Francisco', rating: '6318' }, { name: 'Vivian Harrell', position: 'Financial Controller', salary: '452500', start_date: '2009/02/14', office: 'San Francisco', rating: '9422' }, { name: 'Timothy Mooney', position: 'Office Manager', salary: '136200', start_date: '2008/12/11', office: 'London', rating: '7580' }, { name: 'Jackson Bradshaw', position: 'Director', salary: '645750', start_date: '2008/09/26', office: 'New York', rating: '1042' }, { name: 'Olivia Liang', position: 'Support Engineer', salary: '234500', start_date: '2011/02/03', office: 'Argentina', rating: '2120' }, { name: 'Bruno Nash', position: 'Software Engineer', salary: '163500', start_date: '2011/05/03', office: 'London', rating: '6222' }, { name: 'Sakura Yamamoto', position: 'Support Engineer', salary: '139575', start_date: '2009/08/19', office: 'Tokyo', rating: '9383' }, { name: 'Thor Walton', position: 'Developer', salary: '98540', start_date: '2013/08/11', office: 'New York', rating: '8327' }, { name: 'Finn Camacho', position: 'Support Engineer', salary: '87500', start_date: '2009/07/07', office: 'San Francisco', rating: '2927' }, { name: 'Serge Baldwin', position: 'Data Coordinator', salary: '138575', start_date: '2012/04/09', office: 'Argentina', rating: '8352' }, { name: 'Zenaida Frank', position: 'Software Engineer', salary: '125250', start_date: '2010/01/04', office: 'New York', rating: '7439' }, { name: 'Zorita Serrano', position: 'Software Engineer', salary: '115000', start_date: '2012/06/01', office: 'San Francisco', rating: '4389' }, { name: 'Jennifer Acosta', position: 'Junior Javascript Developer', salary: '75650', start_date: '2013/02/01', office: 'Edinburgh', rating: '3431' }, { name: 'Cara Stevens', position: 'Sales Assistant', salary: '145600', start_date: '2011/12/06', office: 'New York', rating: '3990' }, { name: 'Hermione Butler', position: 'Regional Director', salary: '356250', start_date: '2011/03/21', office: 'London', rating: '1016' }, { name: 'Lael Greer', position: 'Systems Administrator', salary: '103500', start_date: '2009/02/27', office: 'London', rating: '6733' }, { name: 'Jonas Alexander', position: 'Developer', salary: '86500', start_date: '2010/07/14', office: 'San Francisco', rating: '8196' }, { name: 'Shad Decker', position: 'Regional Director', salary: '183000', start_date: '2008/11/13', office: 'Edinburgh', rating: '6373' }, { name: 'Michael Bruce', position: 'Javascript Developer', salary: '183000', start_date: '2011/06/27', office: 'Argentina', rating: '5384' }, { name: 'Donna Snider', position: 'Customer Support', salary: '112000', start_date: '2011/01/25', office: 'New York', rating: '4226' } ]; $('#example').DataTable({ columns: [ { data: 'name' }, { data: 'position' }, { className: 'f32', // used by world-flags-sprite library data: 'office', render: function (data, type) { if (type === 'display') { var country = ''; switch (data) { case 'Argentina': country = 'ar'; break; case 'Edinburgh': country = '_Scotland'; break; case 'London': country = '_England'; break; case 'New York': case 'San Francisco': country = 'us'; break; case 'Sydney': country = 'au'; break; case 'Tokyo': country = 'jp'; break; } return '<span class="flag ' + country + '"></span> ' + data; } return data; } }, { data: 'rating', searchBuilder: { orthogonal: { display: 'filter' } }, render: function (data, type, row, meta) { return type === 'display' ? '<progress title="' + data + '" value="' + data + '" max="9999"></progress>' : data; } }, { data: 'start_date' }, { data: 'salary', render: $.fn.dataTable.render.number(',', '.', 2, '$') } ], data: data, layout: { top1: 'searchBuilder' } });
var data = [ { name: 'Tiger Nixon', position: '系統架構師', salary: '320800', start_date: '2011/04/25', office: '愛丁堡', rating: '5421' }, { name: 'Garrett Winters', position: '會計師', salary: '170750', start_date: '2011/07/25', office: '東京', rating: '8422' }, { name: 'Ashton Cox', position: '初級技術作者', salary: '86000', start_date: '2009/01/12', office: '舊金山', rating: '1562' }, { name: 'Cedric Kelly', position: '資深 Javascript 開發人員', salary: '433060', start_date: '2012/03/29', office: '愛丁堡', rating: '6224' }, { name: 'Airi Satou', position: '會計師', salary: '162700', start_date: '2008/11/28', office: '東京', rating: '5407' }, { name: 'Brielle Williamson', position: '整合專家', salary: '372000', start_date: '2012/12/02', office: '紐約', rating: '4804' }, { name: 'Herrod Chandler', position: '銷售助理', salary: '137500', start_date: '2012/08/06', office: '舊金山', rating: '9608' }, { name: 'Rhona Davidson', position: '整合專家', salary: '327900', start_date: '2010/10/14', office: '東京', rating: '6200' }, { name: 'Colleen Hurst', position: 'Javascript 開發人員', salary: '205500', start_date: '2009/09/15', office: '舊金山', rating: '2360' }, { name: 'Sonya Frost', position: '軟體工程師', salary: '103600', start_date: '2008/12/13', office: '愛丁堡', rating: '1667' }, { name: 'Jena Gaines', position: '辦公室經理', salary: '90560', start_date: '2008/12/19', office: '倫敦', rating: '3814' }, { name: 'Quinn Flynn', position: '支援主管', salary: '342000', start_date: '2013/03/03', office: '愛丁堡', rating: '9497' }, { name: 'Charde Marshall', position: '區域總監', salary: '470600', start_date: '2008/10/16', office: '舊金山', rating: '6741' }, { name: 'Haley Kennedy', position: '資深行銷設計師', salary: '313500', start_date: '2012/12/18', office: '倫敦', rating: '3597' }, { name: 'Tatyana Fitzpatrick', position: '區域總監', salary: '385750', start_date: '2010/03/17', office: '倫敦', rating: '1965' }, { name: 'Michael Silva', position: '行銷設計師', salary: '198500', start_date: '2012/11/27', office: '倫敦', rating: '1581' }, { name: 'Paul Byrd', position: '財務長 (CFO)', salary: '725000', start_date: '2010/06/09', office: '紐約', rating: '3059' }, { name: 'Gloria Little', position: '系統管理員', salary: '237500', start_date: '2009/04/10', office: '紐約', rating: '1721' }, { name: 'Bradley Greer', position: '軟體工程師', salary: '132000', start_date: '2012/10/13', office: '倫敦', rating: '2558' }, { name: 'Dai Rios', position: '人事主管', salary: '217500', start_date: '2012/09/26', office: '愛丁堡', rating: '2290' }, { name: 'Jenette Caldwell', position: '開發主管', salary: '345000', start_date: '2011/09/03', office: '紐約', rating: '1937' }, { name: 'Yuri Berry', position: '行銷長 (CMO)', salary: '675000', start_date: '2009/06/25', office: '紐約', rating: '6154' }, { name: 'Caesar Vance', position: '售前支援', salary: '106450', start_date: '2011/12/12', office: '紐約', rating: '8330' }, { name: 'Doris Wilder', position: '銷售助理', salary: '85600', start_date: '2010/09/20', office: '雪梨', rating: '3023' }, { name: 'Angelica Ramos', position: '執行長 (CEO)', salary: '1200000', start_date: '2009/10/09', office: '倫敦', rating: '5797' }, { name: 'Gavin Joyce', position: '開發人員', salary: '92575', start_date: '2010/12/22', office: '愛丁堡', rating: '8822' }, { name: 'Jennifer Chang', position: '區域總監', salary: '357650', start_date: '2010/11/14', office: '阿根廷', rating: '9239' }, { name: 'Brenden Wagner', position: '軟體工程師', salary: '206850', start_date: '2011/06/07', office: '舊金山', rating: '1314' }, { name: 'Fiona Green', position: '營運長 (COO)', salary: '850000', start_date: '2010/03/11', office: '舊金山', rating: '2947' }, { name: 'Shou Itou', position: '區域行銷', salary: '163000', start_date: '2011/08/14', office: '東京', rating: '8899' }, { name: 'Michelle House', position: '整合專家', salary: '95400', start_date: '2011/06/02', office: '雪梨', rating: '2769' }, { name: 'Suki Burks', position: '開發人員', salary: '114500', start_date: '2009/10/22', office: '倫敦', rating: '6832' }, { name: 'Prescott Bartlett', position: '技術作者', salary: '145000', start_date: '2011/05/07', office: '倫敦', rating: '3606' }, { name: 'Gavin Cortez', position: '團隊領導', salary: '235500', start_date: '2008/10/26', office: '舊金山', rating: '2860' }, { name: 'Martena Mccray', position: '售後支援', salary: '324050', start_date: '2011/03/09', office: '愛丁堡', rating: '8240' }, { name: 'Unity Butler', position: '行銷設計師', salary: '85675', start_date: '2009/12/09', office: '舊金山', rating: '5384' }, { name: 'Howard Hatfield', position: '辦公室經理', salary: '164500', start_date: '2008/12/16', office: '舊金山', rating: '7031' }, { name: 'Hope Fuentes', position: '秘書', salary: '109850', start_date: '2010/02/12', office: '舊金山', rating: '6318' }, { name: 'Vivian Harrell', position: '財務主管', salary: '452500', start_date: '2009/02/14', office: '舊金山', rating: '9422' }, { name: 'Timothy Mooney', position: '辦公室經理', salary: '136200', start_date: '2008/12/11', office: '倫敦', rating: '7580' }, { name: 'Jackson Bradshaw', position: '總監', salary: '645750', start_date: '2008/09/26', office: '紐約', rating: '1042' }, { name: 'Olivia Liang', position: '支援工程師', salary: '234500', start_date: '2011/02/03', office: '阿根廷', rating: '2120' }, { name: 'Bruno Nash', position: '軟體工程師', salary: '163500', start_date: '2011/05/03', office: '倫敦', rating: '6222' }, { name: 'Sakura Yamamoto', position: '支援工程師', salary: '139575', start_date: '2009/08/19', office: '東京', rating: '9383' }, { name: 'Thor Walton', position: '開發人員', salary: '98540', start_date: '2013/08/11', office: '紐約', rating: '8327' }, { name: 'Finn Camacho', position: '支援工程師', salary: '87500', start_date: '2009/07/07', office: '舊金山', rating: '2927' }, { name: 'Serge Baldwin', position: '資料協調員', salary: '138575', start_date: '2012/04/09', office: '阿根廷', rating: '8352' }, { name: 'Zenaida Frank', position: '軟體工程師', salary: '125250', start_date: '2010/01/04', office: '紐約', rating: '7439' }, { name: 'Zorita Serrano', position: '軟體工程師', salary: '115000', start_date: '2012/06/01', office: '舊金山', rating: '4389' }, { name: 'Jennifer Acosta', position: '初級 Javascript 開發人員', salary: '75650', start_date: '2013/02/01', office: '愛丁堡', rating: '3431' }, { name: 'Cara Stevens', position: '銷售助理', salary: '145600', start_date: '2011/12/06', office: '紐約', rating: '3990' }, { name: 'Hermione Butler', position: '區域總監', salary: '356250', start_date: '2011/03/21', office: '倫敦', rating: '1016' }, { name: 'Lael Greer', position: '系統管理員', salary: '103500', start_date: '2009/02/27', office: '倫敦', rating: '6733' }, { name: 'Jonas Alexander', position: '開發人員', salary: '86500', start_date: '2010/07/14', office: '舊金山', rating: '8196' }, { name: 'Shad Decker', position: '區域總監', salary: '183000', start_date: '2008/11/13', office: '愛丁堡', rating: '6373' }, { name: 'Michael Bruce', position: 'Javascript 開發人員', salary: '183000', start_date: '2011/06/27', office: '阿根廷', rating: '5384' }, { name: 'Donna Snider', position: '客戶支援', salary: '112000', start_date: '2011/01/25', office: '紐約', rating: '4226' } ]; new DataTable('#example', { columns: [ { data: 'name' }, { data: 'position' }, { className: 'f32', // used by world-flags-sprite library data: 'office', render: function (data, type) { if (type === 'display') { var country = ''; switch (data) { case 'Argentina': country = 'ar'; break; case 'Edinburgh': country = '_Scotland'; break; case 'London': country = '_England'; break; case 'New York': case 'San Francisco': country = 'us'; break; case 'Sydney': country = 'au'; break; case 'Tokyo': country = 'jp'; break; } return '<span class="flag ' + country + '"></span> ' + data; } return data; } }, { data: 'rating', searchBuilder: { orthogonal: { display: 'filter' } }, render: function (data, type, row, meta) { return type === 'display' ? '<progress title="' + data + '" value="' + data + '" max="9999"></progress>' : data; } }, { data: 'start_date' }, { data: 'salary', render: $.fn.dataTable.render.number(',', '.', 2, '$') } ], data: data, layout: { top1: 'searchBuilder' } });
除了以上程式碼之外，此範例還載入了以下 Javascript 程式庫檔案以供使用
以下顯示的 HTML 是原始的 HTML 表格元素，在經過 DataTables 增強之前
此範例除了從程式庫檔案載入的 CSS 之外，還使用了一些額外的 CSS (如下所示)，以便正確顯示表格。 以下顯示所使用的額外 CSS
td.f32 .flag { vertical-align: middle; }
以下載入了 CSS 程式庫檔案，以在此範例中提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。當任何額外資料載入時，此資料將自動更新。
以下顯示用於執行此表格的伺服器端處理的腳本。 請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，並使用 DataTables 文件中描述的協定。