如何在引导模板中编辑设计？答案

【问题标题】：How to edit design in a bootstrap template?如何在引导模板中编辑设计？
【发布时间】：2017-01-20 02:06:07
【问题描述】：

如何编辑隐藏在此代码中某处的设计？目前这有一个有效的搜索，我想在文本框旁边放置一个添加按钮。但我什至无法在下面显示的这段代码中找到搜索。我在 youtube 上找到了这个数据表模板引导程序。

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Survey Settings</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <?php
      require_once("/dao/CategoryDAO.php");
      require_once("/dao/TopicDAO.php");
      $category = new CategoryDAO();
      $topic = new TopicDAO();
      $allCategories_arr = $category->getAllCategories();
      $allTopics_arr = $topic->getAllTopicTitles();

    ?>
    <div class="container">
      <div class="row">
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
          <thead>
            <tr>
              <td>Category ID</td>
              <td>Category Name</td>
              <td >Action</td>
            </tr>
          </thead>
          <tbody>
            <?php
              foreach($allCategories_arr as $ar) {

                echo "<tr>";
                echo "<td>" . $ar['category_id'] . "</td>";
                echo "<td>" . $ar['categoryname'] . "</td>";
                echo "<td><a class='btn btn-default' href='viewsubcategory.php?catid=" . $ar['category_id'] . "' >More Info</a>";
                echo "</tr>";
              }
            ?>
          </tbody>
        </table>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#example').DataTable();    
      });
   </script>
 </body>

我发现这段代码触发了整个设计。因此，无论如何我可以在这个脚本中显示“隐藏”代码吗？我只想在搜索旁边添加一个添加按钮和一个文本框。

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').DataTable();
    });
</script>

【问题讨论】：

所以，基本上有一个search 函数，你想在它旁边添加一个按钮吗？好吧，你是否意识到你的 js 中有一个有趣的部分——DataTable？
因为您使用的是数据表，所以我假设文本框您正在谈论工具栏中的搜索框。要添加到工具栏，请查看datatables.net/examples/advanced_init/dom_toolbar.html
是的，我只想在它旁边添加一个添加按钮和添加框，以将我的数据添加到表格中。我对这种先进的设计不是很熟悉，因此我很难使用它
你想让这个“添加”按钮做什么？
这可能是一个可能的实现。我经常使用这个来在我的数据表中显示子类别或嵌套表。 datatables.net/examples/api/row_details.html

标签： php jquery html twitter-bootstrap datatable

【解决方案1】：

好的，我不确定我是否完全理解您的要求，但从您的原始帖子开始，它说搜索框旁边有一个添加按钮，可让您将行插入数据表。下面的解决方案在工具栏中添加了一个内联表单。然后 onclick 事件将该行添加到数据表中。

function category(id, name, action) {
  var self = this;
  this.id = id;
  this.name = name;
  this.action = action;
}

function model() {
  var self = this;
  this.categories = [];
}

var mymodel = new model();

$(document).ready(function() {
  mymodel.categories.push(new category('1', 'Cat1', 'Post'));
  mymodel.categories.push(new category('2', 'Cat2', 'Get'));
  mymodel.categories.push(new category('3', 'Cat3', 'Put'));
  var table = $('#mytable').DataTable({
    data: mymodel.categories,
    columns: [{
        data: 'id'
      }, {
        data: 'name'
      }, {
        data: 'action'
      }

    ],
    dom: '<"toolbar">frtip'

  });

  $("div.toolbar").html(
    '<form class="form-inline">\
  <div class="form-group">\
    <input type="text" class="form-control" id="rowid" placeholder="id">\
  </div>\
  <div class="form-group">\
    <input type="text" class="form-control" id="name" placeholder="name">\
  </div>\
    <div class="form-group">\
    <input type="text" class="form-control" id="action" placeholder="action">\
  </div>\
  <input type="button" class="btn btn-danger" id="add" value="add"></input>\
</form>'
  );


  $('#add').click(function(event) {
    table.row.add({
      'id': $('#rowid').val(),
      'name': $('#name').val(),
      'action': $('#action').val()
    }).draw(false);
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mytable">
  <thead>
    <tr>
      <th>Category Id</th>
      <th>Category Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

【讨论】：