CODEWITHSUNDEEP
csstwitter-bootstrapdatatables
kevin_marcus
kevin_marcus

Reputation: 277

Data Tables Move "Previous" & "Next" into the left

I am using the DataTables with Bootstrap for my website. I dig into the code of the datatables.css but I cannot find how to move the previous and next buttons into the left.

I have tried to make it float:left but nothing changed.

Upvotes: 0

Views: 3440

Answers (2)

Vishal
Vishal

Reputation: 103

You need to select pagination div properly in CSS:

.dataTables_wrapper .dataTables_paginate {
    float: left;
}

See JSFiddle for demonstration.

Upvotes: 4

Hitesh Vala Ahir
Hitesh Vala Ahir

Reputation: 793

HTML code of button

<div class="btns">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</div>

Apply css

.btn.btn-primary {background: #444 none repeat scroll 0 0;border-color: #333333;}
.btn {border-radius: 3px;border-width: 0 0 3px;}
.sr-only {border: 0 none;clip: rect(0px, 0px, 0px, 0px);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}

Upvotes: 0

Related Questions