CODEWITHSUNDEEP
twitter-bootstrapdatatables
Dennis
Dennis

Reputation: 728

Bootstrap DataTables - Configure Top Search and Bottom Pager

UPDATE: I made an error - the text-right should be on the label.

I am trying to do two things:

  1. Slide the top search box to the right (just add class to the 6-column right div of "text-right")
  2. Add a class to the cells in the row containing the pager text as well as the pager itself (looks like col-sm-5 for left and col-sm-7 for the right) so that I can control the margins better on mobile from my current style sheet.

The tricky part is there are no ID's or classes now for me to find those spots in the DOM. This is the code that seems to be generated by datatables:

1)

<div class="row">
    <div class="col-sm-6">
        <div id="ReportTable_length" class="dataTables_length">
            <label">Show <select class="form-control input-sm" aria-controls="ReportTable" name="ReportTable_length"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="-1">All</option></select> entries</label>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables_filter" id="ReportTable_filter">
            <label **(ADD class="text-right" HERE)**>Search:<input aria-controls="ReportTable" placeholder="" class="form-control input-sm" type="search"></label>
        </div>
    </div>
</div>

2)

<div class="row">
    <div class="col-sm-5 **NEED-CLASS-HERE**">
      <div aria-live="polite" role="status" id="ReportTable_info" class="dataTables_info">Showing 1 to 6 of 6 entries</div>
   </div>
   <div class="col-sm-7 **NEED-CLASS-HERE**">
      <div id="ReportTable_paginate" class="dataTables_paginate paging_simple_numbers"><ul class="pagination"><li id="ReportTable_previous" class="paginate_button previous disabled"><a tabindex="0" data-dt-idx="0" aria-controls="ReportTable" href="#">Previous</a></li><li class="paginate_button active"><a tabindex="0" data-dt-idx="1" aria-controls="ReportTable" href="#">1</a></li><li id="ReportTable_next" class="paginate_button next disabled"><a tabindex="0" data-dt-idx="2" aria-controls="ReportTable" href="#">Next</a></li></ul></div>
   </div>
</div>

Thanks for the help!

Dennis

Upvotes: 0

Views: 927

Answers (2)

Dennis
Dennis

Reputation: 728

This was the solution. Make sure you call these AFTER the datatables declaration! lol.

$("#ReportTable_filter").find('label').css("text-align", "right");
$("#ReportTable_info").parent().addClass('MyClass');
$("#ReportTable_paginate").parent().addClass('MyClass')

Upvotes: 1

CMedina
CMedina

Reputation: 4222

if you have Id's, you can get the parent and addClass or modify... for example:

1)

$("#ReportTable_filter").find('label').css("text-align","right");// for example

2)

$("#ReportTable_info").parent().addClass('MyClass');//Change by your class
$("#ReportTable_paginate").parent().addClass('MyClass');//Change by your Class

Example: https://jsfiddle.net/cmedina/7kfmyw6x/14/

Upvotes: 3

Related Questions