Question

<?php 
    // include Database connection file 
    include("connectionfile.php"); 
    // Design initial table header 
    $data = '<table class="table table-bordered table-striped table-hover" id="supplierTable" style="max-width: 1000px"> 
        <thead> 
         <tr> 
          <th>No</th> 
          <th>Sym</th> 
          <th>Name</th> 
          <th>Tax</th> 
          <th>Address</th> 
          <th>Phone</th> 
          <th>Email</th> 
          <th>Products</th> 
          <th>Update</th> 
          <th>Delete</th> 
         </tr> 
        </thead>'; 


    $query = "SELECT * FROM suppliers"; 
    $result=mysqli_query($con,$query); 
    // $row=mysqli_fetch_array($result); 
    if (!$result) { 
     exit(mysqli_error()); 
    } 

    // if query results contains rows then featch those rows 
    if(mysqli_num_rows($result) > 0) 
    { 
     $number = 1; 
     while($row = mysqli_fetch_array($result)) 
     { 

      $data .= '<tr> 
       <td align="right"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.$number.'</td> 
       <td align="center">'.$row['symbol'].'</td> 
       <td align="center">'.$row['companyname'].'</td> 
       <td align="center">'.$row['taxnumber'].'</td> 
       <td align="center">'.$row['address'].'</td> 
       <td align="center"> +'.$row['phone'].'</td> 
       <td align="center">'.$row['email'].'</td> 
       <td> 
        <button onclick="GetSupplierProducts('.$row['id'].')" class="btn btn-success text-center">All Products</button> 
       </td> 
       <td> 
        <button onclick="GetSupplierDetails('.$row['id'].')" class="btn btn-warning text-center">Update</button> 
       </td> 
       <td> 
        <button onclick="DeleteSupplier('.$row['id'].')" class="btn btn-danger text-center">Delete</button> 
       </td> 
      </tr>'; 
      $number++; 
     } 
    } 
    else 
    { 
     // records now found 
     $data .= '<tr><td colspan="6">Records not found!</td></tr>'; 
    } 

    $data .= '</table>'; 

    echo $data; 

?> 
    <script> 
     $(document).ready(function() { 
      $('#supplierTable').DataTable({ 
        bJQueryUI: true, 
      sPaginationType: "full_numbers" 
      }); 
     }); 
    </script> 
    <script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script> 
    <script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script> 
    <script src="../dist/js/sb-admin-2.js"></script> 

Это мой код, на котором отображается строка поиска и разбивка на страницы посередине. Я бы хотел, чтобы они были справа. есть идеи? Вот картинка:

Я просто люблю, чтобы увидеть окно поиска при добавлении нового поставщика. thanks

Добавление трех сценариев в конце показывает окно поиска, записи и разбиение на страницы. ну, у меня есть кнопка на главной странице:

<div class="pull-right"> 
    <button class="btn btn-success" data-toggle="modal" data-target="#add_new_supplier_modal">Add A New Supplier</button> 
</div> 

Answer 1

Я не могу импортировать компоненты Бауэра, но я могу дать вам некоторое представление о том, как все должно быть устроено.

Основная идея состоит в том, что вам необходимо разместить все ваши 3 компонента, а также таблицу в соответствующих ячейках. И эти поля разделяются группами. Начните с простого в отдельном файле - поддельные статические данные .. После того, как у вас есть голые кости CSS + HTML работает, то вы просто поместите его в PHP и сделать рендеринг с реальными динамическими данными ..

Это код:

<div class="parent_div" style="margin-top: 20px;"> ///everything goes in here including the table 

<!--only the 3 components in here--> 
    <div class="the_3_components_you_have"> 

    <!-- the button is first component, "text-right" is a bootstrap class you need to align stuff to right. Doesn't work on the button directly so we wrap it in a div --> 
    <div class="text-right" style="margin-right:50px;"> 
     <button class="btn btn-success" >Add a New Suplier</button> 
    </div> 

    <!-- Display on the same row the pagination and search component. But again text-right only works on display:block so we need position relative on the pagination element--> 
    <div> 
     <div style="position: relative; top: 23px; left: 20px; ">Show pagination Component.</div> 
     <div class="text-right" style="margin-right: 50px; ">Search stuff: <input style="margin: 0px;" type="text"></div> 
    </div> 

    </div> 



    <!-- the table separately goes in here --> 
    <div> 
     Table goes here. 
    </div> 
    </div> 

Вместо этого мои стили - вы можете создавать свои собственные классы, настраивать их по своему усмотрению, а вместо текста вы можете поместить теги сценария, которые у вас есть, и они будут загружаться соответствующим образом в этом поле. Инструменты Chrome Developer помогут вам. Вот предварительный просмотр:

Узнайте о блоках Bootstrap и позиционировании Bootstrap here. и вы можете найти этот код как живой пример здесь: JsBin Link