Я работаю с этим примером из DataTables и когда я копирую их пример в свой проект (со всеми внешними файлами css, js и т. Д. c), это работает отлично.
Но когда я пытаюсь изменить его, по моей собственной информации, это терпит неудачу.
Единственное различие между ними и мной, это то, что они имеют всю информацию таблицы объявленный в файле html
, мы можем сказать, что это информация о состоянии c. И в моем случае информация может измениться, и я должен использовать javascript, чтобы объявить ее.
Ниже вы можете увидеть изображение того, как выглядит их таблица, но мой номер нет.
Ниже я показываю свой код,
Html:
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static '/css/jquery.dataTables.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/data.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/tables.css' %}">
<!-- JS -->
<script src="{% static '/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static '/js/data.js' %}"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table id="example" class="display nowrap">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
<td>8196</td>
<td>j.alexander@datatables.net</td>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Shad</td>
<td>Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
<td>6373</td>
<td>s.decker@datatables.net</td>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Michael</td>
<td>Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
<td>5384</td>
<td>m.bruce@datatables.net</td>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
<td>4226</td>
<td>d.snider@datatables.net</td>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>********************************</p>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table id="example" class="display nowrap">
<thead>
<tr id="cols_table"></tr>
</thead>
<tbody id="body_table">
</tbody>
</table>
</div>
</div>
</div>
Css:
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
JQuery:
function showData(){
var csrftoken = $("[name=csrfmiddlewaretoken]").val();
var select = 1;
$.ajax({
url: '/../../../data_app/show_data/',
type: 'POST',
headers:{"X-CSRFToken": csrftoken},
data: {
'Select': select,
},
dataType: "json",
cache: true,
success: function(response) {
cols = response.Cols;
data = response.Data;
printColsTable(cols);
printDataTable(data);
}
});
}
function printColsTable(cols){
console.log('Imprimo columnas');
for (let i = 0; i < cols.length; i++) {
$("#cols_table").append('<th scope="col">'+cols[i]+'</th>');
}
}
function printDataTable(data){
console.log('Imprimo datos');
for (let i = 0; i < data.length; i++) {
var id_tr = "dataRow" + String(i);
$("#body_table").append('<tr id="'+id_tr+'"></tr>');
for (let j = 0; j < data[i].length; j++) {
//console.log(data[i][j]);
$("#"+id_tr).append('<td>'+data[i][j]+'</td>');
}
}
}
function tablas(){
$('#example').DataTable( {
scrollY: '30vh',
scrollX: true,
paging: true,
info: true
} );
}
// MAIN
$(document).ready(function(){
showData();
tablas()
});
Как видите, единственными изменениями являются:
Я удалил все их данные c info.
Я добавил идентификаторы cols_table
и body_table
, просто для работы с моим js
.
Дайте мне ощущение, что проблема в том, что мне нужно перезагрузить его зависимости снова. Для этого я попытался загрузить их разные файлы в конце, а не в начале, но видимых изменений нет.
Может кто-нибудь мне помочь? Большое спасибо!