Fixed column only freeze the header and not the column with ajax

reiki

<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.2/fc-4.2.1/datatables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.2/fc-4.2.1/datatables.min.css"/>

I use this script and iam using laravel with bootstrap

my ajax data table :

$('.tableCustom4').DataTable().destroy();
      var columns = [];
      columns.push(
          { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
          { data: 'karyawan', name: 'karyawan' },
      );
      for(var count = 0; count < 31; count++){
          columns.push(
            { data: count, name: count}
            );
      };
      columns.push(
        { data: 'score', name: 'score' }
      );
      $('.tableCustom4').DataTable({
        deferRender : true,
        scrollX: true,
        scrollY: 700,
        scrollCollapse: true,
        paging: false,
        fixedColumns: true,
        fixedColumns:   {
            left: 0,
            right: 1
        },
        processing: true,
        serverSide: true,
        paginate: false,
        ajax: {
          url: "{{ route('scoreboard.index') }}",
          type: "GET",
          data: {
            tgl: tgl,
            tglA: tglA,
            tglB: tglB,
            departemenId: departemenId,
            group: group,
            barangId: barangId,
            kodeMerk: kodeMerk,
            seperate: seperate,
            tglKaryawan: tglKaryawan,
            allKaryawan: allKaryawan,
          }
        },
        columns: columns,

      });

And this is my table :

<div class="card-body table-dinamis4">
          <div class="table-responsive">
            <table class="table table-bordered tableCustom4 order-column" style="width:100%">
              <thead>
                <tr>
                  <th width="5%">No</th>
                  <th>Nama Karyawan</th>
                    <?php for ($count = 1; $count <= 31; $count++) { ?>
                    <th>Day <?php echo $count; ?></th>
                    <?php }; ?>
                  <th>Total Score</th>
                </tr>
              </thead>
            
            </table>
          </div>
        </div>

kthorngren

One problem is you are loading datatables.js twice in these lines:

<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.2/fc-4.2.1/datatables.min.js"></script>

Remove the first line. Loading datatables.js multiple times will cause Datatables to not function properly and might be the cause of your error.

Also you have this:

        fixedColumns: true,
        fixedColumns:   {
            left: 0,
            right: 1
        },

Only one of these will be used. Remove the config you don't want.

Kevin

reiki

Thanks for the answer kevin, i already tried what you suggest using only one of them and still the same issue

and now i only used the :

fixedColumns:   {
    left: 0,
    right: 1
},

still only the header got freeze

kthorngren

Did you remove this line?

<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>

Kevin

reiki

Yes i did remove that line Kevin,

i solved the problem i am not using the online ver iam downloading the package from bower and install manually to my laravel and it works now, idk whats the problem with it