Question

我正在使用Bootstrap 3＆amp;使用表格排序和搜索的DataTables和页面部分不在正确的位置。我试图改变位置和显示但没有成功。

Pagination Vertical instead of Horizontal

我的HTML代码是：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Statistics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
    <script type="text/javascript" src="js/clientSide.js"></script>
    <script type="text/javascript" src="js/jssor.slider.mini.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <link href="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" />

</head>

<script>
$(document).ready(function() {
  $('#tableSort').dataTable();
});    
</script>

<body ng-controller="ToDoCtrl">
<header>
   <div class="headerGallery">

       <script>
            jQuery(document).ready(function ($) {
            var options = { $AutoPlay: false };
            var jssor_slider1 = new $JssorSlider$('slider1_container', options);
            });
        </script>

    <div id="slider1_container">
        <div id="slider1" u="slides" div u="slides">
            <div><img src="images/headerIMG1.jpg"/></div>
            <div><img src="images/headerIMG2.jpg"/></div>
        </div>
            <div class="nav">
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="shop.html">SHOP</a></li>
                <li><a href="#">FAVOURITES</a></li>
                <li><a href="articles.html">ARTICLES</a></li>
                <li><a href="about.html">ABOUT</a></li>
              </ul>
            </div>
    </div>
</header>

<div id="articleWrapper">
    <section id="logo1"></section>
        <section class="aboutTitle1">
        <h3>STATISTICS</h3>
        </section>   
        <br>
        <section id="search">
                <div class="col-md-3">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="input-group form">
                           <input type="text" class="form-control" placeholder="Search...">
                           <span class="input-group-btn">
                             <button class="btn btn-primary" type="button">Search</button>
                           </span>
                      </div>
                    </div>
                  </div>
               </div>
       </section>
        <h3>Name: <strong>Here we need to bring the user name.</strong></h3>
          <h2>Product Likes</h2>
          <p>In this part you can see how many likes each and every item of yours got.</p>
        <div class="container-fluid">
         <div class="tableStatistics">
          <table class="table table-hover" id="tableSort" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>Product Name</th>
                <th>Category</th>
                <th>Amount of Likes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>
</div>    


<div class="openfooterblack" id="openfooter" ng-show="footer==1">

    <section id="footerPanel">
        <section id="emptyPanel"></section>
        <section class ="loginPanel">
        <form name="login" action="index_submit" method="get">
             <ul>
             <input class="inputLogin" type="email" name="usermail" ng-model="usermail" required></li>
                <li><label for="usermail">User Name:</label></li>            
                <div class="clear"></div>
                <input class="inputLogin" type="password" name="password" ng-model="password" required></li>
                <li><label for="password">Password:</label></li>
            </ul>
            <div class="clear"></div>
            <a class="forgotPassBtm" href="#">Forgot your Password</a>
            <a class="registrationBtm" href="#">Registration</a>
            <div class="clear"></div>
            <input type="reset" class="resetbtn" value="">
          <input type="submit" class="submitbtn" ng-click="addLogin(usermail, password)" value="">
            </form>
        </section>
        <section class ="categoryPanel">
            <label id="categoryLabel">CATEGORY</label>

                  <div ng-repeat="category in todo.categories | orderBy:'name'">
                    <section class="categoryName"><a href="#">{{category.name}}</a>
                    </section>
                  </div>

        </section>
    </section>

</div>

<footer>
    <div id="login">
        <section class="loginbtnfooter">
        <a ng-click="footer=!footer" href="#"></a>
        </section>
        <section class="logoutbtnfooter">
        <a href="login.html"></a>
        </section>
    </div>
</footer>

</body>
</html>

CSS：

.tableStatistics {
    width: 100%;
    height: auto;
}

.tableStatistics > a,p,thead,tbody,tr,h2 {
    color: #ffffff;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #CCC;
}

div.dataTables_length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    color: #ffffff;
}

div.dataTables_info {
    padding-top: 8px;
    white-space: nowrap;
    color: #ffffff;
}

div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

使用Bootstrap 3＆amp; DataTables的分页对齐垂直而不是水平

0 个答案: