bootstrap searchbox and pagination are in the middle. I want them at the right

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>

This is my code it displays the search bar and pagination at the middle. I would like them to be at the right. any ideas? Here is a picture:

I would simply love to see my search box under add a new supplier. thanks

Adding the three scripts at the end shows the search box, entries and pagination. well, I have the button in a main page:

<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

I can't import your bower components but i can give you some idea of how things should be arranged.

The basic idea is that you need to place all of your 3 components and also the table in their appropriate boxes. And this boxes are separated in groups. Start simple in a separate file - fake static data.. After you have the bare bones css+html working, then you simply place it inside php and do rendering with real dynamic data..

This is the code:

<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>

Instead my styles - you can create your own classes, tweak them as you like, and instead of text, you can place the script tags you have, and they will load appropriately in that box. Chrome Developer Tools will help you. Here is a preview:

Learn about Bootstrap clases and Bootstrap positioning here. and you can find this code as a live example here: JsBin Link