Как редактировать дизайн в шаблоне начальной загрузки?
Как мне отредактировать дизайн, спрятанный где-то в этом коде? В настоящее время здесь работает поиск, и я хочу поместить кнопку «Добавить» рядом с текстовым полем. Но я даже не могу найти поиск в этом коде, который я показываю ниже. Я нашел этот шаблонный загрузочный шаблон на 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>
Решение
Хорошо, не уверен, что я полностью понимаю ваши требования, но, исходя из вашего исходного поста, там написано кнопка добавления рядом с полем поиска, которая позволяет вставлять строки в таблицу данных. решение ниже добавляет встроенную форму на панели инструментов. затем событие 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>Другие решения
Других решений пока нет …
detector