fixedColumns plugin
fixedColumns plugin
I have problem with dataTables.fixedColumns.min.js plugin , don't work, First column is not fixed.
This is error
TypeError: a[h][l] is undefined
My HTML
<div class="box">
<div class="box-header">
<h3 class="box-title">Raport</h3>
</div>
<div class="box-body">
<div class="table-responsive">
<table id="unknown_driver_table" class="table table-bordered table-striped" width="100%">
<thead>
<tr>
<tr>
<th>Login</th>
<th>Name</th>
<th>Surname</th>
<th>Incom IBN</th>
<th>Cash IBN</th>
<th>Pay IBN</th>
<th>Incom WRM</th>
<th>Cash WRM</th>
<th>Pay WRM</th>
<th>Incom CDY</th>
<th>Cash CDY</th>
<th>Pay CDY</th>
<th>Incom AHN</th>
<th>Cash AHN</th>
<th>Pay AHN</th>
<th>Pay FTR</th>
<th>Cash</th>
<th>Minus</th>
<th>Desc</th>
<th>Attach</th>
<th>Wypłata</th>
<th>City</th>
<th>Agr</th>
<th>Data start</th>
<th>Data end</th>
</tr>
</tr>
</thead>
</table>
</div>
</div>
</div> <!-- /.box-body -->
Java Script
$(document).ready( function () {
var tabela_unknown = $('#unknown_person_table').DataTable({
scrollY: "500px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true,
"searching": true,
"sAjaxSource": "/upload/adm/getcurrentcalc",
"sAjaxDataProp": "",
"order": [[ 0, "asc" ]],
"aoColumns": [
{ "mData": "id_opus"},
{ "mData": "name_drv" },
{ "mData": "surname_drv" },
{ "mData": "ubra_income" },
{ "mData": "ubra_cash" },
{ "mData": "bert_income" },
{ "mData": "bert_cash" },
{ "mData": "eaasd_income" },
{ "mData": "kubra_income" },
{ "mData": "kussd_income" },
{ "mData": "mrtw_cash" },
{ "mData": "vat_sum" },
{ "mData": "c_fee" },
{ "mData": "invoice_vat" },
{ "mData": "calc_invoice" },
{ "mData": "agreement_fee" },
{ "mData": "cash_fee" },
{ "mData": "minus" },
{ "mData": "minus_description" },
{ "mData": "sum_calculation" },
{ "mData": "payment_sum"},
{ "mData": "city"},
{ "mData": "agree" },
{ "mData": "start_d" },
{ "mData": "end_d" }
],
"language": {
"sUrl": '/bower_components/datatables.net/pl.json'
}
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.bootstrap.min.css">
I noticed than when I use sAjaxSource don't work but when i use defined table with defined data this work. Example of defined table:
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</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>t.nixon@datatables.net</td>
</tr>
</body>
Answers
This example also don't work. First column sometimes is freezed and sometimes not.
https://datatables.net/extensions/scroller/examples/initialisation/fixedColumns.html
Hi @wiol ,
That example is behaving for me - when do you see it failing? Can you give steps on how to reproduce, please.
Cheers,
Colin
That i see in my browser
https://www.youtube.com/watch?v=P3oDgTNOV5s&feature=youtu.be
Ah, got it, it seems when you scroll beyond row 80 or so it seems to go wobbly. Thanks for the video, that helped.
I've raised it internally (DD-668 for my reference) and we'll report back here when there's an update.
Cheers,
Colin
This as well . Also, as I said recently, the first column is not always a "fixed column", it should be frozen. At the beginning of the movie, the first column moves with the rest of the columns.
My mistake double <tr> <tr> in HTML code
Just to note this has been addressed. See Allan's comment on this thread.
Colin