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>

这是我的代码，它在中间显示搜索栏和分页。我希望他们在右边。有任何想法吗？这是一张图片：

我只想在添加新供应商的情况下看到我的搜索框。感谢

在末尾添加三个脚本会显示搜索框，条目和分页。好吧，我在主页面上有一个按钮：

<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开发者工具将为您提供帮助。这是一个预览：

了解Bootstrap clases和Bootstrap定位here。您可以在此处找到此代码作为实例：JsBin Link

bootstrap搜索框和分页在中间。我想要他们在右边

1 个答案: