javascript - phần fixedColumns của dataTables không hoạt động

Giữa các thẻ <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

Kịch bản :

<script>
$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        fixedColumns:   {
            leftColumns: 2
        }
    } );
} );
</script>

Bảng (nó có nhiều hơn 2 hàng):

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

CSS :

/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
}

Bảng đang hoạt động nhưng bảng không có cột cố định. Phần FixedColumns không hoạt động.

Câu trả lời #1

Vấn đề là các thư viện không theo đúng thứ tự. Các script của bạn, v.v., nên như sau:

<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>

Vì vậy về cơ bản bạn chỉ cần đảm bảo tải tệp js datatables chính trước fixedcolumns :)