DataTables
高级交互
功能，适用于您的表格。
编辑器
全面的编辑
用于 DataTables 的库。
手册
下载
≡ 显示网站导航

jQuery UI 模态框

此示例显示了 responsive.details.display 选项与 modal 选项一起使用，当与响应式的 jQuery UI 集成一起使用时，将使用 jQuery UI 的原生模态框显示。

内置的 modal 显示选项应作为函数执行，并带有可选的参数传递进来以控制模态框显示的行为。在 jQuery UI 的情况下，它具有 header 选项（它是一个函数，应返回模态框的标题）和一个 modal 选项，它是一个包含 配置参数 的对象，这些参数将传递给 jQuery UI 模态框。

此外，responsive.details.renderer 选项在这里用于显示行的完整数据，而不仅仅是隐藏的列（这是默认行为），因为这在模态框中看起来更好！

名 姓 职位 办公室 年龄 开始日期 工资 分机号 电子邮件
Tiger Nixon 系统架构师 Edinburgh 61 2011-04-25 $320,800 5421 [email protected]
Garrett Winters 会计 Tokyo 63 2011-07-25 $170,750 8422 [email protected]
Ashton Cox 初级技术作家 San Francisco 66 2009-01-12 $86,000 1562 [email protected]
Cedric Kelly 高级 Javascript 开发人员 Edinburgh 22 2012-03-29 $433,060 6224 [email protected]
Airi Satou 会计 Tokyo 33 2008-11-28 $162,700 5407 [email protected]
Brielle Williamson 集成专家 New York 61 2012-12-02 $372,000 4804 [email protected]
Herrod Chandler 销售助理 San Francisco 59 2012-08-06 $137,500 9608 [email protected]
Rhona Davidson 集成专家 Tokyo 55 2010-10-14 $327,900 6200 [email protected]
Colleen Hurst Javascript 开发人员 San Francisco 39 2009-09-15 $205,500 2360 [email protected]
Sonya Frost 软件工程师 Edinburgh 23 2008-12-13 $103,600 1667 [email protected]
Jena Gaines 办公室经理 London 30 2008-12-19 $90,560 3814 [email protected]
Quinn Flynn 支持主管 Edinburgh 22 2013-03-03 $342,000 9497 [email protected]
Charde Marshall 区域总监 San Francisco 36 2008-10-16 $470,600 6741 [email protected]
Haley Kennedy 高级营销设计师 London 43 2012-12-18 $313,500 3597 [email protected]
Tatyana Fitzpatrick 区域总监 London 19 2010-03-17 $385,750 1965 [email protected]
Michael Silva 营销设计师 London 66 2012-11-27 $198,500 1581 [email protected]
Paul Byrd 首席财务官（CFO） New York 64 2010-06-09 $725,000 3059 [email protected]
Gloria Little 系统管理员 New York 59 2009-04-10 $237,500 1721 [email protected]
Bradley Greer 软件工程师 London 41 2012-10-13 $132,000 2558 [email protected]
Dai Rios 人事主管 Edinburgh 35 2012-09-26 $217,500 2290 [email protected]
Jenette Caldwell 开发主管 New York 30 2011-09-03 $345,000 1937 [email protected]
Yuri Berry 首席营销官（CMO） New York 40 2009-06-25 $675,000 6154 [email protected]
Caesar Vance 售前支持 New York 21 2011-12-12 $106,450 8330 [email protected]
Doris Wilder 销售助理 Sydney 23 2010-09-20 $85,600 3023 [email protected]
Angelica Ramos 首席执行官（CEO） London 47 2009-10-09 $1,200,000 5797 [email protected]
Gavin Joyce 开发人员 Edinburgh 42 2010-12-22 $92,575 8822 [email protected]
Jennifer Chang 区域总监 Singapore 28 2010-11-14 $357,650 9239 [email protected]
Brenden Wagner 软件工程师 San Francisco 28 2011-06-07 $206,850 1314 [email protected]
Fiona Green 首席运营官（COO） San Francisco 48 2010-03-11 $850,000 2947 [email protected]
Shou Itou 区域营销 Tokyo 20 2011-08-14 $163,000 8899 [email protected]
Michelle House 集成专家 Sydney 37 2011-06-02 $95,400 2769 [email protected]
Suki Burks 开发人员 London 53 2009-10-22 $114,500 6832 [email protected]
Prescott Bartlett 技术作家 London 27 2011-05-07 $145,000 3606 [email protected]
Gavin Cortez 团队领导 San Francisco 22 2008-10-26 $235,500 2860 [email protected]
Martena Mccray 售后支持 Edinburgh 46 2011-03-09 $324,050 8240 [email protected]
Unity Butler 营销设计师 San Francisco 47 2009-12-09 $85,675 5384 [email protected]
Howard Hatfield 办公室经理 San Francisco 51 2008-12-16 $164,500 7031 [email protected]
Hope Fuentes 秘书 San Francisco 41 2010-02-12 $109,850 6318 [email protected]
Vivian Harrell 财务主管 San Francisco 62 2009-02-14 $452,500 9422 [email protected]
Timothy Mooney 办公室经理 London 37 2008-12-11 $136,200 7580 [email protected]
Jackson Bradshaw 主管 New York 65 2008-09-26 $645,750 1042 [email protected]
Olivia Liang 支持工程师 Singapore 64 2011-02-03 $234,500 2120 [email protected]
Bruno Nash 软件工程师 London 38 2011-05-03 $163,500 6222 [email protected]
Sakura Yamamoto 支持工程师 Tokyo 37 2009-08-19 $139,575 9383 [email protected]
Thor Walton 开发人员 New York 61 2013-08-11 $98,540 8327 [email protected]
Finn Camacho 支持工程师 San Francisco 47 2009-07-07 $87,500 2927 [email protected]
Serge Baldwin 数据协调员 Singapore 64 2012-04-09 $138,575 8352 [email protected]
Zenaida Frank 软件工程师 New York 63 2010-01-04 $125,250 7439 [email protected]
Zorita Serrano 软件工程师 San Francisco 56 2012-06-01 $115,000 4389 [email protected]
Jennifer Acosta 初级 Javascript 开发人员 Edinburgh 43 2013-02-01 $75,650 3431 [email protected]
Cara Stevens 销售助理 New York 46 2011-12-06 $145,600 3990 [email protected]
Hermione Butler 区域总监 London 47 2011-03-21 $356,250 1016 [email protected]
Lael Greer 系统管理员 London 21 2009-02-27 $103,500 6733 [email protected]
Jonas Alexander 开发人员 San Francisco 30 2010-07-14 $86,500 8196 [email protected]
Shad Decker 区域总监 Edinburgh 51 2008-11-13 $183,000 6373 [email protected]
Michael Bruce Javascript 开发人员 Singapore 29 2011-06-27 $183,000 5384 [email protected]
Donna Snider 客户支持 New York 27 2011-01-25 $112,000 4226 [email protected]
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 服务器端脚本
  • 评论

下面显示的 Javascript 用于初始化此示例中显示的表格

$('#example').DataTable({ responsive: { details: { display: DataTable.Responsive.display.modal({ header: function (row) { var data = row.data(); return 'Details for ' + data[0] + ' ' + data[1]; } }), renderer: DataTable.Responsive.renderer.tableAll() } } });
new DataTable('#example', { responsive: { details: { display: DataTable.Responsive.display.modal({ header: function (row) { var data = row.data(); return 'Details for ' + data[0] + ' ' + data[1]; } }), renderer: DataTable.Responsive.renderer.tableAll() } } });

除了上面的代码之外，以下 Javascript 库文件也已加载以供此示例使用

    下面显示的 HTML 是原始 HTML 表格元素，在 DataTables 增强之前。

    此示例除了从库文件（如下）加载的内容之外，还使用了一些额外的 CSS，以便正确显示表格。下面显示了使用的额外 CSS

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

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

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

      其他示例

      基本初始化

      显示类型

      列控制

      子行

      样式

      DataTables

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