javascript - dataTables fixedColumns part is not working

Between <head> tags:

<script src=".9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href=".10.11/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href=".2.1/css/fixedColumns.dataTables.min.css"/>
<script type="text/javascript" src=".2.1/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src=".10.11/js/jquery.dataTables.min.js"></script>

Script:

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

Table (it has more than 2 rows):

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

Table is working but table has no fixed columns. FixedColumns part is not working.

Between <head> tags:

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

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

Table (it has more than 2 rows):

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

Table is working but table has no fixed columns. FixedColumns part is not working.

Share Improve this question edited Nov 22, 2018 at 14:27 Cœur 38.7k26 gold badges202 silver badges277 bronze badges asked Mar 12, 2016 at 12:44 Yusuf Devranlı 1591 gold badge2 silver badges8 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 19

The issue is the libraries are not in right order. Your scripts etc should be like this:

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

So basically you just need to make sure to load the main datatables js file before fixedcolumns :)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - dataTables fixedColumns part is not working - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)