Responsive bootstrap4 doesn't load?

sunny_s

I want my table to be responsive and I use these cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.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.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>

but my table is not responsive

but from "network" I can see the scripts are here

kthorngren

It could simply be you are missing a couple CSS files. I took what you had above and created a test case for you:
http://live.datatables.net/yafazivu/1/edit

I added these two CSS includes:
https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css
https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css

It seems to work and look correct now.

Kevin

sunny_s

Thank you for pointing out the missing css files.

my table still not responsive.

I am using row group, fixed header, these two work. And I need responsive as well

<!-- DataTable -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.0.3/css/rowGroup.bootstrap4.min.css">


<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.0.3/js/dataTables.rowGroup.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap4.min.css">
  <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>

By the way, my row group is customize, it allows me to manually expand or collapse the rows. I'm sure if my js prevents my table from being responsive.

My js:

$(function () {
  /* ---- DataTable for ITMES PAGE --- */

  /* group items by department name
  http://live.datatables.net/beyapupu/1/edit */
  let itemExpandedGroups = {};
  let departmentNameIndex = 2;
  let itemTable = $('#items-table').DataTable({
    'columnDefs': [
      {
        //hide the department name
        'targets': [ departmentNameIndex ],
        // 'visible': false,
      }
    ],
    'paging':   false,
    'pageLength': 1,
    //use department name as the default order
    orderFixed: [[departmentNameIndex, 'asc']],
    rowGroup: {
      dataSrc: departmentNameIndex,
      startRender: function (rows, group) {
        let expanded = !!itemExpandedGroups[group];
        rows.nodes().each(function (r) {
          //collapsed by default
          // r.style.display = 'none';
          // if (expanded) {
          //   r.style.display = '';
          // }
          //expanded by default
        r.style.display = expanded ? 'none' : '';
        });
        // Add category name to the <tr>. NOTE: Hardcoded colspan
        return $('<tr/>')
          .append('<td colspan="10" class="to-be-edited">' + group + ' (' + rows.count() + ')<i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>')
          .attr('data-name', group)
          .css('cursor', 'pointer')
          .toggleClass('expanded', expanded);
      }
    },
    fixedHeader: {
      header: true
    }
  });

  $('#items-table tbody').on('click', 'tr.group-start', function () {
    let name = $(this).data('name');
    itemExpandedGroups[name] = !itemExpandedGroups[name];
    itemTable.draw(false);
  });


  /* following function is for editable (not fully functional yet) */

  // $('#items-table tbody').on('click', 'tr.group-start i', function (e) {
  //   console.log('ka')
  //   e.stopPropagation();
  //   let toBeEdited = $(this).closest('tr').find('.to-be-edited');
  //   $(toBeEdited).editable('toggle');
  // });

})

kthorngren

I might be missing it but it doesn't look like you are enabling responsive. Here are some examples of the different ways it can be enabled:
https://datatables.net/extensions/responsive/examples/initialisation/index.html

Kevin

sunny_s

silly me. I added
responsive: true to my js file and I can see the table is responsive now.

There's some layout issue with my table though. From the example I can see that the th and td have enough spacing in between.

But my table, however, no spacing between the th and the td

kthorngren

I suspect that is a CSS config. Can you update my example with your environment to show the issue? Or maybe a link to your page.

Kevin

sunny_s

item_dataTable.js

$(function () {
  /* ---- DataTable for ITMES PAGE --- */
  //a regular dataTable
  /* $('#items-table').DataTable({
    orderFixed: [[1, 'asc']]
  }); */

  /* group items by department name
  http://live.datatables.net/beyapupu/1/edit */
  let itemExpandedGroups = {};
  let departmentNameIndex = 2;
  let itemTable = $('#items-table').DataTable({
    'columnDefs': [
      {
        //hide the department name
        'targets': [ departmentNameIndex ],
        // 'visible': false,
      }
    ],
    'paging':   false,
    'pageLength': 1,
    //use department name as the default order
    orderFixed: [[departmentNameIndex, 'asc']],
    rowGroup: {
      dataSrc: departmentNameIndex,
      startRender: function (rows, group) {
        let expanded = !!itemExpandedGroups[group];
        rows.nodes().each(function (r) {
          //collapsed by default
          // r.style.display = 'none';
          // if (expanded) {
          //   r.style.display = '';
          // }
          //expanded by default
        r.style.display = expanded ? 'none' : '';
        });
        // Add category name to the <tr>. NOTE: Hardcoded colspan
        return $('<tr/>')
          .append('<td colspan="10" class="to-be-edited">' + group + ' (' + rows.count() + ')<i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>')
          .attr('data-name', group)
          .css('cursor', 'pointer')
          .toggleClass('expanded', expanded);
      }
    },
    fixedHeader: {
      header: true
    },
    responsive: true
  });

  $('#items-table tbody').on('click', 'tr.group-start', function () {
    let name = $(this).data('name');
    itemExpandedGroups[name] = !itemExpandedGroups[name];
    itemTable.draw(false);
  });


  /* following function is for editable (not fully functional yet) */

  // $('#items-table tbody').on('click', 'tr.group-start i', function (e) {
  //   console.log('ka')
  //   e.stopPropagation();
  //   let toBeEdited = $(this).closest('tr').find('.to-be-edited');
  //   $(toBeEdited).editable('toggle');
  // });

})

cdn

<!-- bootstrap 4 css and JS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<%-- css for bootstrap4 rowGroup --%>
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.0.3/css/rowGroup.bootstrap4.min.css">
<%-- css for bootstrap4 responsive --%>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">

<%-- js for dataTable  --%>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<%-- js for rowGroup --%>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.0.3/js/dataTables.rowGroup.min.js"></script>

<%-- js for responsive --%>
<%-- currently only the table in item enable this feature. To enable, go to dataTable.js, add `responsive: true` --%>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap4.min.css">
  <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>

My js file comes after all the cdn

  <script src="js/item_dataTable.js"></script>

sunny_s

Although not exactly the same but you can see that when the table become responsive, there's not enough spacing between th and td

http://live.datatables.net/beyapupu/5/edit