Cannot get responsive to work

mikepoole

I have a table that is being created with the responsive property of true

It is adding the dtr-inline class to my table but the table is not breaking on the breakpoints and no matter the screensize, the rows are not becoming children of the parent rows and the collapse class is notbeing added. I am ending up with this HTML for my table...

<table id="member-details" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" cellspacing="0" aria-describedby="member-details_info"><thead><tr role="row"><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Pay No: activate to sort column ascending">Pay No</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Name</th><th class="sorting_asc" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Ni.No: activate to sort column descending">Ni.No</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="DOB: activate to sort column ascending">DOB</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Dept: activate to sort column ascending">Dept</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Location: activate to sort column ascending">Location</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Pay point: activate to sort column ascending">Pay point</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Scheme: activate to sort column ascending">Scheme</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Category: activate to sort column ascending">Category</th><th class="details-control sorting_disabled" rowspan="1" colspan="1" style="width: 10%;" aria-label="Options">Options</th></tr></thead><tbody>...</tbody></table>

My table also uses bootstrap and I am loading the JS and CSS in this order

      "Scripts/vendor/jquery-1.12.4.js",
      "Scripts/vendor/datatables-1.10.15.js",
      "Scripts/vendor/dataTables.responsive.js",
      "Scripts/vendor/datatables-select-1.2.2.js",
      "Scripts/vendor/less-1.5.1.min.js",
      "Scripts/vendor/bootstrap.min.js",
      "Scripts/vendor/dataTables.bootstrap.min.js",

      "Content/bootstrap.min.css",
      "Content/font-awesome.min.css",
      "Content/jquery.dataTables.min.css",
      "Content/responsive.dataTables.css",
            "Content/responsive.bootstrap.css",

and initiating the table as follows

   !$.fn.DataTable.isDataTable("#" + domElement) ?
                      $("#" + domElement).DataTable({
                          responsive: true,
                          language: { 
                              "emptyTable": "No records found",
                              "processing": eq.api.spinner()
                          },
                          processing: true,
                          serverSide: true,
                          info: true,
                          stateSave: true,
                          bFilter: false,
                          bAutoWidth: false,
                          lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
                          columns: columns,
                          ajax: ajaxPart,

Am I doing something wrong? Can responsive not be used with bootstrap?

I am loading the responsive resources first

Mike

allan

That looks like it should work. Here is an example of Bootstrap and Responsive together.

Can you link to your page so I can take a look please?

Thanks,
Allan

mikepoole

Allan, my apologies. I have now got it to work

Having the table within a Razor @HtmlBeginForm was the cause