У меня есть два массива, которые я уже успешно использовал для создания таблицы в JavaScript. Теперь я хотел бы сделать таблицу jQuery DataTable из-за ее особенностей пользовательского интерфейса. Я думал, что у меня был правильный способ его создания, но я получаю сообщение об ошибке.
Это также в приложении Flask, если это имеет значение
Код
<body>
<!-- Load jQuery -->
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin = "anonymous"></script>
<!-- jQuery dataTables script-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- If that fails, we have a backup in our directory-->
<script type = text/javascript src = "{{
url_for('static', filename = 'jquery.js') }}"></script>
<script type = text/javascript src = "{{
url_for('static', filename = 'jQuery.dataTables.min.js') }}"></script>
<!-- Form for submitting our NBA Data-->
<form id = "nameForm" role = "form">
<!-- Input box so we can search by player name -->
<input name = "text" type = "text" id = "searchBox">
<!-- Button that we will use to make the actual ajax call -->
<button id = "searchBtn"> Search </button>
</form>
<!-- Container that we will add our data table to later -->
<table id = "myTable" class = "display" width = "25%"></table>
<!-- Script for the button click action -->
<script type = text/javascript>
//Root stuff
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
var dataList;
var titles;
var dtColumns;
//Root so we can get the data from our form
$('button#searchBtn').click(function(e) {
//Prevent our form from submitting, which is its default action/purpose
e.preventDefault();
//Get the data from our function in the Flask App
$.getJSON($SCRIPT_ROOT + '/_get_data', {
//Our searchName variable will be the one from our HTML input box
searchName: $('input[name = "text"]').val(),
}, function(data) {
dataList = data.dataList;
titles = data.headers;
dtColumns = [];
for (var i = 0; i < titles.length; i++) {
dtColumns.push({ title : titles[i] });
}
});
});
//When our page is fully loaded, convert the table to a jQuery data table
$(document).ready(function () {
$('#myTable').DataTable( {
data: dataList,
columns: dtColumns
});
})
</script>
</body>
РЕДАКТИРОВАТЬ: Массивы, с которыми я работаю, и новейшие ошибки dtColums это
["Player", "Pos", "Age", "Tm", "G", "GS", "MP", "FG", "FGA", "FG%", "3P", "3PA", "3P%", "2P", "2PA", "2P%", "eFG%", "FT", "FTA", "FT%", "ORB", "DRB", "TRB", "AST", "STL", "BLK", "TOV", "PF", "PTS"]
И dataList это
["James Harden", "SG", "30", "HOU", "7", "7", "35.3", "9.1", "24.0", ".381", "3.4", "13.6", ".253", "5.7", "10.4", ".548", ".452", "14.9", "16.1", ".920", "1.4", "3.7", "5.1", "7.4", "1.0", "0.4", "5.7", "3.6", "36.6"]
Текущие ошибки, которые возвращаются в предупреждении в моемокно браузера:
Предупреждение DataTables: идентификатор таблицы = myTable - запрошенный неизвестный параметр '12' для строки 0, столбец 12. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/4 Предупреждение DataTables: идентификатор таблицы= myTable - запрошенный неизвестный параметр '1' для строки 4, столбца 1. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/4