2016-03-12 4 views
0

Между <head> теги:DataTables fixedColumns не работает

<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> 

Сценарий:

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

Table (она имеет более 2-х строк):

<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; 
} 

Таблица работает, но таблица не имеет фиксированных столбцов. Часть FixedColumns не работает. Что не так с моим кодом? Как я могу это исправить?

-Это говорит, что похоже, что ваш пост - это в основном код; пожалуйста, добавьте несколько деталей, поэтому я печатаю это, чтобы отправить этот вопрос:

ответ

4

Проблема в том, что библиотеки не в правильном порядке. Ваши скрипты и т.д., должны быть такими:

<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> 

Так в основном вы просто должны убедиться, что для загрузки главного DataTables JS файла перед fixedcolumns :)

Смежные вопросы