ブートストラップテンプレートのデザインを編集するには？

このコードのどこかに隠れたデザインを編集するにはどうすればよいですか？現在、これは機能している検索があり、テキストボックスの横に[追加]ボタンを追加したいと思います。しかし、私は下に示しているこのコードで検索を見つけることさえできません。私はこのdatatableテンプレートのブートストラップを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>

私は、このコードは、全体のデザインをトリガーすることを発見しました。したがって、私はこのスクリプトに「隠れた」コードを表示することができますか？私はちょうど追加ボタンと検索の隣にテキストボックスをpudしたい。

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

出典

2017-01-20 ranger

ので、基本的には 'search'機能があり、あなたはそれの横にあるボタンを追加したいですか？まあ、あなたはあなたのjsのinteresing部分 - それは['DataTable']（https://datatables.net/）を実現しましたか？ –

あなたがデータテーブルを使用しているので、私はあなたがツールバーの検索ボックスについて話しているテキストボックスを前提としています。ツールバーに追加するにはこれをチェックしてくださいhttps://datatables.net/examples/advanced_init/dom_toolbar.html –

ええ、テーブルの上にデータを追加するには、AddボタンとAddboxを追加したいだけです。私はこの先進的なデザインに精通していないので、私はそれで遊ぶのが非常に難しいです – ranger

[OK]を、私は完全にあなたの要件を理解しておくが、あなたのオリジナルのポストから行っていない、それはあなたがデータテーブルに行を挿入することができます検索ボックスにより、追加ボタンを言います。以下のソリューションは、ツールバーにインラインフォームを追加します。 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

ブートストラップテンプレートのデザインを編集するには？

答えて

関連する問題