datatables-responsive not working with Bootstrap 3

[comanche]

datatables-responsive not working with Bootstrap 3

[murtaza110786]

Hi,

We tried your plugin with Bootstrap 3 and it is not working. Please someone provide the resolution as this is very annoying. We are not able to use the latest upgraded Bootstrap 3 with this plugin ultimately the only option left for us is to drop either one of them in our application. Really appreciate your quick response.

[comanche]

I'll look into this.

[comanche]

The responsive helper should work with any CSS framework. I've checked in a Bootstrap 3.x example. Check out ajax-bootstrap3.html.

[MrHubble]

@comanche Thanks for the great gem. I am using it with jquery-datatables-rails and Bootstrap 3. It seems to be working correctly however an error is throw in the console. This does not seem to affect functionality but thought it was worth reporting.

UPDATE:
Actually this does affect the functionality of other js plugins I have on the page.

[comanche]

The underscore _ refers to Lo-Dash. Did you include lodash.min.js?

[MrHubble]

Thanks for getting back to me.

Because I am using jquery-datatables-rails I included gem 'lodash-rails' in my gem file.

I just checked in bundle and it says it's installed:
Using lodash-rails (2.4.0)

[MrHubble]

I added lodash.min directly in my Rails asset pipeline and it works well without any errors. I guess the problem was with the lodash-rails.

My datatable seems to break the boundary of its container and is no longer responsive when my browser width is dragged below about 800px. Is this expected behaviour? I have tried playing with the settings as below with no noticeable changes:

 responsiveHelper = undefined
  breakpointDefinition =
    tablet: 1400
    phone: 280

[comanche]

I have not noticed the behavior you mentioned. I tried your breakbpoint definition in the Bootstrap 3 example it worked as expected.

[MrHubble]

Interesting stuff. Is there a jsfiddle example that you were playing with. Sometimes it's a bit hard to separate everything in a rails app and I'm not sure what you have included (what other js libraries you are using) in your test to get it working.

[comanche]

If you download the files from repo, there's a an example\ajax-bootstrap3.html file you may start with.

[MrHubble]

Thanks for pointing out the excellent example which works well in my local development environment.

I now see that the problem with my project is that the datatable is responsive to the point where it should remove columns dynamically, which is doesn't do and the container is broken.

I copied your js from _ajax-bootstrap3.js_* and removed the code regarding ajax and aaColumnDefs, and updated the table name to match my table name. I also copied all of the js files you are using to my project so I could ensure we are using the same versions.

After these changes my table is still not dynamically removing columns. Could you please point me to which file and which section of code is responsive for this so I can try to track it down?

Thanks.

[comanche]

First, make sure there's no conflict with other JavaScript code. datatables.responsive.js makes use of the $.

If you have everything configure properly, ResponsiveDatatablesHelper.prototype.respond (line 255) should be called when you resize your window.

ResponsiveDatatablesHelper.prototype.showHideColumns (line 327) actually shows or hides the columns.

Hopefully that'll help get you started.