我需要修复左列，如下例所示：
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
答案 0 :(得分：1)
在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>
答案 1 :(得分：0)
就我而言，我需要修复前3列，因此我使用：
<script>
$(document).ready(function () {
$('#Grid').DataTable({
"scrollX": true,
"fixedColumns": {
leftColumns: 3
}
});
});
</script>
它运行完美。
当然，您需要正确的jquery.datatable.js /.css文件。您可以在这里jQuery.DataTable download page
下载这些文件