CODEWITHSUNDEEP
jquerytwitter-bootstrapdatatables
Mike
Mike

Reputation: 2559

Cannot get dataTable responsive extension to work

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

Upvotes: 0

Views: 1998

Answers (2)

Hamid Afarineshfar
Hamid Afarineshfar

Reputation: 58

You can use bootstrap with datatable responsive. See this example.

As datatable documentation you need to load responsive plugin files, and add nowarp class to your HTML code:

So your code should be like this:

<table id="member-details" class="nowrap table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" cellspacing="0" aria-describedby="member-details_info">

Also see responsive example

Upvotes: 0

plonknimbuzz
plonknimbuzz

Reputation: 2664

can datatables + bootstrap be responsive? the answer is can. You can find example in datatables documentation

are you doing something wrong? maybe. Because i saw your file include order is wrong.

the answer is only : include file in the right order.

  1. jquery
  2. bootstrap
  3. datatables

your script is totally works, even i didnt change your HTML. i just change the include file order

CSS:

  • bootstrap css
  • boostrap theme css //optional
  • datatables boostrap css //dont use jquery datatables css if you use bootstrap
  • datatables responsive css
  • another css

HTML:

  • <table class="table another_class" width="100%"> ... </table

JS:

  • jquery js
  • jquery datatables js
  • datatables boostrap js
  • datatables responsive js
  • another js

demo: http://jsbin.com/cohilayesa/edit?html,output

Upvotes: 0

Related Questions