Wie Design in einer Bootstrap-Vorlage bearbeiten?

Wie bearbeite ich das Design irgendwo in diesem Code versteckt? Zur Zeit hat dies eine funktionierende Suche und ich möchte eine Schaltfläche Hinzufügen neben einem Textfeld setzen. Aber ich kann nicht einmal die Suche in diesem Code finden, den ich unten zeige. Ich habe diese Bootvorlage für die Datatable-Vorlage auf youtube gefunden.Wie Design in einer Bootstrap-Vorlage bearbeiten?

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

entdeckte ich, dass dieser Code das gesamte Design wurde ausgelöst wird. Kann ich also in diesem Skript den 'versteckten' Code zeigen? Ich möchte nur einen Add-Button und ein Textfeld neben der Suche pudeln.

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

Quelle

2017-01-20 ranger

so, im Grunde gibt es eine 'search' Funktion und Sie wollen neben ihm eine Schaltfläche hinzu? Naja, hast du ein interessantes Teil auf deiner js - das ['DataTable'] (https://datatables.net/) realisiert? –

Da Sie Datentabelle verwenden, gehe ich davon aus, dass Sie über das Suchfeld in der Symbolleiste sprechen. Um zur Toolbar hinzuzufügen, überprüfe das https://datatables.net/examples/advanced_init/dom_toolbar.html –

Ja, ich möchte nur einen Add-Button und ein Add-Box daneben hinzufügen, um meine Daten in der Tabelle hinzuzufügen. Ich bin nicht wirklich vertraut mit diesem fortschrittlichen Design, daher ist es sehr schwierig für mich, damit zu spielen. – ranger

Ok nicht sicher, ob ich total Ihre Anforderungen verstehen, aber von Ihrer ursprünglichen Post ging es sagt, eine Add-Taste durch das Suchfeld, die Sie Zeilen in die Datentabelle einfügen kann. Die folgende Lösung fügt ein Inline-Formular in der Symbolleiste hinzu. Dann fügt das onclick-Ereignis die Zeile der Datentabelle hinzu.

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>

Quelle

2017-01-20 03:39:21

Wie Design in einer Bootstrap-Vorlage bearbeiten?

Antwort

Verwandte Themen