我需要修复左列，如下例所示:
https://datatables.net/release-datatables/extensions/FixedColumns/examples/simple.html
我有的是:
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charser="utf8" src="//cdn.datatables.net/fixedcolumns/3.0.3/js/dataTables.fixedColumns.min.js"></script>
<script>
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sScrollY": "500px",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"bPaginate": false
} );
new FixedColumns( oTable, {
"iLeftColumns": 1,
"sHeightMatch" : "auto"
} );
} );
</script>
和 HTML(大列的示例，我将其设置为 64，现在有 20 个):
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>Colum1</th>
<th>Colum2</th>
<th>Colum3</th>
<th>Colum4</th>
<th>Colum5</th>
<th>Colum6</th>
<th>Colum7</th>
<th>Colum8</th>
<th>Colum9</th>
<th>Colum10</th>
<th>Colum11</th>
<th>Colum12</th>
<th>Colum13</th>
<th>Colum14</th>
<th>Colum15</th>
<th>Colum16</th>
<th>Colum17</th>
<th>Colum18</th>
<th>Colum19</th>
<th>Colum20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
</tr>
<?php for($i=0;$i<50;$i++){ ?>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
</tr>
<?php }?>
</tbody>
</table>
然后我添加示例要我添加的 CSS:
<style>
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 1024px;
margin: 0 auto;
}
</style>
所以除了修复左第一列的部分外，一切都工作正常，我已经花了几个小时试图得到它，但我无法让它工作。
P.S:这是我从控制台得到的错误:
Uncaught ReferenceError: FixedColumns is not definedinformation.php:33 (anonymous function)jquery-latest.min.js:2 m.Callbacks.jjquery-latest.min.js:2 m.Callbacks.k.fireWithjquery-latest.min.js:2 m.extend.readyjquery-latest.min.js:2 J
最佳答案
在 jQuery 中试试这个片段..
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
} );
new $.fn.dataTable.FixedColumns( table );
} ); th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 1024px;
margin: 0 auto;
}<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charser="utf8" src="http://cdn.datatables.net/fixedcolumns/3.0.3/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>Colum1</th>
<th>Colum2</th>
<th>Colum3</th>
<th>Colum4</th>
<th>Colum5</th>
<th>Colum6</th>
<th>Colum7</th>
<th>Colum8</th>
<th>Colum9</th>
<th>Colum10</th>
<th>Colum11</th>
<th>Colum12</th>
<th>Colum13</th>
<th>Colum14</th>
<th>Colum15</th>
<th>Colum16</th>
<th>Colum17</th>
<th>Colum18</th>
<th>Colum19</th>
<th>Colum20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
<td>fdf</td>
</tr>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
<td>t.d.net</td>
</tr>
</tbody>
</table>关于jquery - 如何修复左列数据表，如示例所示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28985170/