Добрый день. Есть палагин DataTables для работы с таблицами.
Вот сайт палагина https://www.datatables.net/.
Я установил его на свой сайт и таблица заработала.
Таблица создается в JS файле функцией table_of_goods();
Данные таблицы выводятся в столбцы: Товар 1, Цена с помощью цикла, который забирает информацию из массива test[];
Изначально я прописал в массиве следующие значения test[1, 2, 3]; И эти значения выводятся в поле Товар. Все работает.
Перестает все работать, когда я добавляю значение в массив из формы. Стили и jQuery сразу отключаются. При этом все добавляется, но без стилей и примочек типа поиска по таблице, которые добавляет палагин. Подскажите, в чем проблема? Ниже коды HTML и JS файла.
<!DOCTYPE html>
<html lang="en">
<title>Goods</title>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<style>
.bloc {background-color: #ffffff; padding: 20px;}
.head_add {text-align: right;}
.tab {margin-top: 50px;}
</style>
</head>
<body>
<div class="container bloc">
<div class="row">
<!-- 1 -->
<div class="col-sm-6 col-md-6 col-lg-6">
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="What are you looking for ?">
<button type="submit" class="btn btn-primary">Search</button>
</form></div>
<div class="col-sm-6 col-md-6 col-lg-6 head_add"><button type="button" class="btn btn-primary">Add New</button></div>
<div class="col-sm-12 col-md-12 col-lg-12 tab">
<div id="table"></div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 tab">
<form id="add_form" class="form-inline" onsubmit="return table_of_goods()">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="good" placeholder="Good">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Count">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="price" placeholder="Price">
<input id="add_update" class="btn btn-primary" type="submit" value="Add">
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
main.js
var test = [1,2,3];
function table_of_goods () {
var good = '';
var price;
good = document.getElementById("good").value;
var check = good.length;
price = document.getElementById("price").value;
if (check > 0) {
test.push([[good],[price]]);
};
var elem = document.getElementById('table');
var table = '<table id=main_table class=display cellspacing=0 width=100%><thead><tr><th>Name</th><th>Price, $</th><th>Actions</th></tr><tfoot><tr><th>Name</th><th>Price</th><th>Actions</th></tfoot><tbody>';
for (var i = 0; i < test.length; i++){
table += '<tr><td>' + test[i] + '</td><td>495</td><td>Действия</td></tr>';
}
table += '</tbody></table>';
el.value = '';
el2.value = '';
el3.value = 'Add';
$(document).ready(function() {
$('#main_table').DataTable();
} );
elem.innerHTML = table;
return false;
}
table_of_goods();