How do I get first and last buttons styled with bootstrap

ehlovader

I have been trying to get first and last buttons in my pagination but they always end up styled wrong in one way or another.

Using the jowin datatables-bootstrap3 package with bs_full I am getting
http://live.datatables.net/jodaxuxe/1/

When I use full_numbers I am getting
http://live.datatables.net/koyuxebe/1/

When I leave it alone and don't change anything about the paging I get closest of all but still no first and last
http://live.datatables.net/jixogamo/1/

Has anyone successfully done this? All the posts are either from prior to 1.10, not showing because the forum is busted, or contain link text injected for legacy purposes.

EDIT: added examples. Way better than screenshots for viewing the problem.

allan

Thanks for the link to the broken forum page - I wasn't aware of that issue and will look into it shortly.

The issue you are seeing is that the bs_full paging type is being added but the Jowin DataTables file. Looking at the file there are a few different options:

• bs_normal
• bs_two_button
• bs_four_button
• bs_full

If you want to use the styles provided by that plug-in, then those are the options available.

The built in options for DataTables, should work okay with Bootstrap's native pagination control, as shown in this example. There all of the built in options for pagingType, including full_numbers should work as expected (although will be styled using the native Bootstrap options, rather than the styling of the Jowin styles - if you want them, you would need to integrate them).

Allan

ehlovader

Thank you allan for the response. I think you missed the points of my post. I did notice that the built in option would work with pagination fine. But I didn't see it working for full_numbers as seen in my example linked above.

Even though it did render correctly with UL and LI elements in the default scenario seen in the last example I linked above.

I am not sure if the examples work still though, they show that the preview time has expired.

allan

It works okay if you include the DataTables / Bootstrap integration code (documentation) and remove the Jowin file:

http://live.datatables.net/koyuxebe/2/edit

Allan

ehlovader

That was it.

Sorry I think I had found that searching through here for a solution. So Bootstrap is supported in 1.10 going forward?

ehlovader

Got this figured out, it is replacing the css. I added overrides to my bower.json to fix this for wiredep purposes.

Here is a slimmed down copy of my bower.json for anyone who needs the same thing.

{
  "dependencies": {
    "bootstrap-sass-official": "~3.2.0",
    "modernizr": "~2.6.2",
    "jquery": "~2.1.0",
    "datatables": "~1.10",
    "datatables-bootstrap3-plugin": "~0.4.0"
  },
  "overrides": {
    "datatables-bootstrap3-plugin": {
      "main": [
        "media/css/datatables-bootstrap3.css",
        "media/js/datatables-bootstrap3.js"
      ]
    },
    "datatables": {
      "main": [
        "media/js/jquery.dataTables.js"
      ]
    }
  }
}

allan

So Bootstrap is supported in 1.10 going forward?

Not built in - but with a plug-in that is developed in parallel with the core software, yes. I see it as a key feature.

Allan