如何編輯引導模板中的設計？

如何編輯隱藏在此代碼中某處的設計？目前這有一個運作的搜索，我想在文本框旁邊添加一個添加按鈕。但我甚至無法在下面顯示的代碼中找到搜索。我在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>

來源

2017-01-20 ranger

所以，基本上有一個'search'函數，並希望下一次添加一個按鈕呢？那麼，你有沒有意識到你的js的一個互動部分 - ['DataTable']（https://datatables.net/）？ –

因爲您正在使用數據表我假設你正在談論工具欄中的搜索框的文本框。添加到工具欄檢查了這一點https://datatables.net/examples/advanced_init/dom_toolbar.html –

是的，我只是想添加一個添加按鈕和addbox旁邊添加我的數據在表上。我對這個先進的設計並不是很熟悉，因此我很難玩到它。 – ranger

好了不知道我完全理解你的要求，但是從你原來的職位去它說通過搜索框，可以讓你行插入到數據表中的添加按鈕。下面的解決方案在工具欄中添加一個內聯表單。那麼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>

來源

2017-01-20 03:39:21

如何編輯引導模板中的設計？

回答

相關問題