Элемент StickyX без поплавка

Question

Я пытаюсь сделать UL.pagination находящимся в центре области просмотра родителя без использования float, поскольку это прервет мой стиль. Возможно ли это?

Я еще не знаком с SO, но я хотел бы вызвать scrollLeft родителя .pagination, чтобы сохранить разбиение на страницы в центре его родителя.

Это моя попытка на jsFiddle

/* my goal is to make pagination in the center of the view-area */ 
 
$.fn.StickyX = function() { 
 
    // alert(this.parentNode.clientWidth); 
 
    // \t alert($(this).parent().innerWidth()); 
 
    return this.css({ 
 
    'margin-left': ($(this).parent().innerWidth()/2) - ($(this).width()/2) + 'px', 
 
    'position': 'inline' 
 
    }); 
 
}; 
 
$('.pagination').StickyX();

#dataTable .pagination { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" id="wrapper"> 
 
    <div id="header"> 
 
    Header 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-9 contents"> 
 

 
     <div class="table-responsive"> 
 
     <table class="table table-bordered table-hover table-striped table-condensed" id="dataTable"> 
 
      <thead class="text-primary"> 
 
      <tr> 
 
       <th role="group" aria-label=""> 
 
       <button type="button" class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus"></i> 
 
       </button> 
 
       <button type="button" class="btn btn-default btn-refresh"><i class="glyphicon glyphicon-refresh"></i> 
 
       </button> 
 
       </th> 
 
       <th>id</th> 
 
       <th>User name</th> 
 
       <th>password</th> 
 
       <th>Full name</th> 
 
       <th>Email</th> 
 
       <th>URL</th> 
 
       <th>Join date</th> 
 
       <th>activation_key</th> 
 
       <th>lastupdate</th> 
 
       <th>status</th> 
 
       <th>groupID</th> 
 
       <th>title</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr id="row-1"> 
 
       <td class="btn-group" role="group" aria-label=""> 
 
       <button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i> 
 
       </button> 
 
       <button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i> 
 
       </button> 
 
       </td> 
 
       <td>1</td> 
 
       <td>admin.admin</td> 
 
       <td>**********</td> 
 
       <td>&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
       <td>2015-12-07 02:37:47</td> 
 
       <td>&nbsp;</td> 
 
       <td>2015-12-06 18:37:47</td> 
 
       <td>isActive</td> 
 
       <td>isSuperAdmin</td> 
 
       <td>Super Admin</td> 
 
      </tr> 
 
      <tr id="row-2"> 
 
       <td class="btn-group" role="group" aria-label=""> 
 
       <button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i> 
 
       </button> 
 
       <button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i> 
 
       </button> 
 
       </td> 
 
       <td>2</td> 
 
       <td>demo.demo</td> 
 
       <td>***********</td> 
 
       <td>&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
       <td>&nbsp;</td> 
 
       <td>0000-00-00 00:00:00</td> 
 
       <td>&nbsp;</td> 
 
       <td>2016-01-05 12:45:32</td> 
 
       <td>isActive</td> 
 
       <td>isSuperAdmin</td> 
 
       <td>demo</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="page-control" colspan="13"> 
 
       <ul class="pagination"> 
 
        <li class="disabled"> 
 
        <a href="#Prv" aria-label="Previous"> 
 
         <span aria-hidden="true">&laquo;</span> 
 
        </a> 
 
        </li> 
 
        <li class="active"><a href="#page1">1<span class="sr-only">(current)</span></a> 
 
        </li> 
 
        <li><a href="#page2">2</a> 
 
        </li> 
 
        <li><a href="#page3">3</a> 
 
        </li> 
 
        <li><a href="#page4">4</a> 
 
        </li> 
 
        <li><a href="#page5">5</a> 
 
        </li> 
 
        <li> 
 
        <a href="#Nxt" aria-label="Next"> 
 
         <span aria-hidden="true">&raquo;</span> 
 
        </a> 
 
        </li> 
 
       </ul> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
      <tfoot></tfoot> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     [Menu] 
 
    </div> 
 
    </div> 
 
    <div> 
 
    Footer 
 
    </div> 
 
</div>

Я сделал некоторые модификации JS, который некоторые, как решить эту проблему, но все-таки нужна больше помощи. jsfiddle

(function($) { // forked from http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible 
     $.fn.hasScrollBar = function() { 
     var e = this.get(0); 
     return { 
      vertical: e.scrollHeight > e.clientHeight, 
      horizontal: e.scrollWidth > e.clientWidth 
     }; 
     } 
    })(jQuery); 

    $.fn.StickyX = function() { 
     var parentWithScroll = $(this).parents().filter(function() {return $(this).hasScrollBar().horizontal;}).first(); 
     if(parentWithScroll) { 
     var e = $(this); 
     parentWithScroll.scroll(function() { 
     e.css('margin-left', ($(this).width()/2) - (e.width()/2) + $(this).scrollLeft() + 'px'); 
     }) 
     return this.css('margin-left', (parentWithScroll.width()/2) - ($(this).width()/2) + parentWithScroll.scrollLeft() + 'px'); 
     } else { 
     return this.css('margin-left', 'auto;'); 
     } 
    }; 

    $('.pagination').StickyX(); 

Answer 1

для достижения этой цели вам нужно только CSS и HTML. Попробуйте это:

td.page-control { text-align:center; } 
ul.pagination { margin:0 auto; } 

Адаптировать код, чтобы убедиться, что это не переопределены существующих стилей.

и отключить JavaScript, что добавляет маржу к ул

https://jsfiddle.net/ksqzpfm9/1/

Вы можете использовать тот же метод горизонтально-центр и другие элементы