固定首尾列

FixedColumns 允许将列固定在表格的开头和结尾。通过使用 fixedColumns.end 初始化参数来固定尾部列,其工作原理与 fixedColumns.start 用于表格开头相同。此示例显示了固定在位的第一列和最后一列。

姓氏 名字 职位 办公室 年龄 开始日期 薪水 分机 电子邮件
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({ fixedColumns: { start: 1, end: 1 }, paging: false, scrollCollapse: true, scrollX: true, scrollY: 300 });
new DataTable('#example', { fixedColumns: { start: 1, end: 1 }, paging: false, scrollCollapse: true, scrollX: true, scrollY: 300 });

除了上面的代码,以下 Javascript 库文件也加载到此示例中以供使用

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

    此示例使用了一些比库文件(如下)加载的 CSS 更多的额外 CSS,以便正确显示表格。下面显示了使用的额外 CSS

    /* 确保演示表格滚动 */ th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

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

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

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

      其他示例