index.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
  6. <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
  7. <link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
  8. <link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
  9. <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
  10. </script>
  11. <script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js">
  12. </script>
  13. <script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js">
  14. </script>
  15. <title>FixedColumns examples - FixedColumns examples</title>
  16. </head>
  17. <body class="dt-example">
  18. <div class="container">
  19. <section>
  20. <h1>FixedColumns example <span>FixedColumns examples</span></h1>
  21. <div class="info">
  22. <p>When making use of DataTables' x-axis scrolling feature (<a href="//datatables.net/reference/option/scrollX"><code class="option" title=
  23. "DataTables initialisation option">scrollX</code></a>), you may wish to fix the left or right most columns in place. This extension for DataTables provides exactly
  24. this option (for non-scrolling tables, please use the <a href="//datatables.net/extensions/fixedheader">FixedHeader extension</a>, which can fix headers, footers
  25. and columns). Key features include:</p>
  26. <ul class="markdown">
  27. <li>Freezes the left most column to the side of the table</li>
  28. <li>Option to freeze two or more columns</li>
  29. <li>Full integration with DataTables' scrolling options</li>
  30. </ul>
  31. </div>
  32. </section>
  33. </div>
  34. <section>
  35. <div class="footer">
  36. <div class="gradient"></div>
  37. <div class="liner">
  38. <div class="toc">
  39. <div class="toc-group">
  40. <h3><a href="./initialisation/index.html">Initialisation</a></h3>
  41. <ul class="toc">
  42. <li>
  43. <a href="./initialisation/left_right_columns.html">Left and right fixed columns</a>
  44. </li>
  45. <li>
  46. <a href="./initialisation/simple.html">Basic initialisation</a>
  47. </li>
  48. <li>
  49. <a href="./initialisation/two_columns.html">Multiple fixed columns</a>
  50. </li>
  51. <li>
  52. <a href="./initialisation/right_column.html">Right column only</a>
  53. </li>
  54. <li>
  55. <a href="./initialisation/colvis.html">Column visibility integration</a>
  56. </li>
  57. <li>
  58. <a href="./initialisation/server-side-processing.html">Server-side processing</a>
  59. </li>
  60. <li>
  61. <a href="./initialisation/css_size.html">CSS row sizing</a>
  62. </li>
  63. <li>
  64. <a href="./initialisation/size_fixed.html">Assigned column width</a>
  65. </li>
  66. <li>
  67. <a href="./initialisation/size_fluid.html">Fluid column width</a>
  68. </li>
  69. <li>
  70. <a href="./initialisation/index_column.html">Index column</a>
  71. </li>
  72. </ul>
  73. </div>
  74. <div class="toc-group">
  75. <h3><a href="./styling/index.html">Styling</a></h3>
  76. <ul class="toc">
  77. <li>
  78. <a href="./styling/rowspan.html">Complex headers</a>
  79. </li>
  80. <li>
  81. <a href="./styling/colvis.html">Column visibility integration</a>
  82. </li>
  83. <li>
  84. <a href="./styling/server-side-processing.html">Server-side processing</a>
  85. </li>
  86. <li>
  87. <a href="./styling/col_filter.html">Individual column filtering</a>
  88. </li>
  89. <li>
  90. <a href="./styling/bootstrap.html">Bootstrap</a>
  91. </li>
  92. <li>
  93. <a href="./styling/foundation.html">Foundation</a>
  94. </li>
  95. <li>
  96. <a href="./styling/jqueryui.html">jQuery UI</a>
  97. </li>
  98. </ul>
  99. </div>
  100. </div>
  101. <div class="epilogue">
  102. <p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
  103. Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
  104. "http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
  105. <p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
  106. DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
  107. </div>
  108. </div>
  109. </div>
  110. </section>
  111. </body>
  112. </html>