Question

如何编辑隐藏在此代码中某处的设计？目前这有一个功能正常的搜索，我想在文本框旁边添加一个添加按钮。但我甚至无法在下面的代码中找到搜索。我在youtube上找到了这个数据表模板bootstrap。

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

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

如何在引导程序模板中编辑设计？

1 个答案: