CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
user1157751
user1157751

Reputation: 2457

jQuery DataTables - Inside an Bootstrap 3 Panel will cause the Search Box and Page Numbers in the Wrong Position

I'm having an issue where I'm putting jQuery DataTable in an bootstrap 3 panel will cause the search box and page numbers to go off.

Here is the design:

enter image description here

I have a webpage, and will have multiple jQuery DataTable, however, with a large number of columns, it will make the webpage scrollable horizontally.

Hence my idea is to use the bootstrap 3 panel feature, and put the datatable inside, hence it will now only scroll the panel, but not the whole webpage.

enter image description here

Hence, the final result is a nice looking table inside the panel.

enter image description here

However, when the panel starts to scroll horizontally, the search and page tabs are not placed to the far right side, but in the middle, which it will look like this after it scrolls.

enter image description here

Can anyone point me to the right direction on how I could put the search and page tabs to the far right?

Upvotes: 1

Views: 2465

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

The best way to keep your search bar at the end of your table AND keep a scrollable table is to use scrollX in the DataTable attributes. ScrollX

Upvotes: 2

Artur Filipiak
Artur Filipiak

Reputation: 9157

Simple workaround - disable default search field, make a custom input field for datatables search and place it in bootstrap panel.

var oTable = $('#datatable').dataTable({
    // ... options ...    
});

$('.custom-input-field').keyup(function(e){
   oTable.search($(this).val());
   oTable.draw();
});

setTimeout would be a good idea in this case:

var searchTimer;

$('.custom-input-field').keyup(function(e){
   clearTimeout(searchTimer);
   var keyword = $(this).val();
   searchTimer = setTimeout(searchTable, 1000, keyword);
});

function searchTable(keyword){
   oTable.search(keyword);
   oTable.draw();
}

Upvotes: 1

Related Questions