DataTables
先进交互
为你的表格增强功能。
编辑器
一个综合编辑
一个用于 DataTables 的库。
手册
下载
≡ 显示网站导航

使用正交数据

此示例展示了如何使 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: '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' } ]; 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

    td.f32 .flag { vertical-align: middle; }

    以下 CSS 库文件供此示例使用，以提供表格样式

      此表格通过 Ajax 加载数据。下面显示了已加载的最新数据。随着任何额外数据的加载，此数据将自动更新。

      下面显示了用于对此表格执行服务器端处理的脚本。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables文档中描述的协议。

      其他示例

      性能

      初始化和选项

      API 演示

      定制

      样式

      集成

      DataTables

      DataTables 由 SpryMedia Ltd 设计并创建。
      © 2007-2024 特许 MIT。 隐私政策。 支持者。
      SpryMedia Ltd 已在苏格兰注册，公司编号为 SC456502。