Как динамически создать загрузочную таблицу?
У меня возникли проблемы с разработкой таблицы начальной загрузки, нажав кнопку. Моя цель — добавить функцию сортировки для каждого столбца в таблице. Итак, для моего пользовательского случая, когда пользователь нажимает кнопку, он вызывает ajax для получения данных из базы данных и отправляет результат (это работает, так что не беспокойтесь об этом). Поэтому мне нужно отобразить результаты в виде таблицы начальной загрузки, чтобы я мог использовать функцию сортировки для каждого столбца. Кроме того, я использую pagination.js, который использует массив объектов json и таблицу для отображения результата. Когда я разрабатываю таблицу и добавляю ее в div, я не вижу функцию сортировки для каждого столбца.
Это работает, когда я создаю простую HTML-таблицу жесткого кода с атрибутами таблицы Bootstrap, такими как функция сортировки (data-sortable="true"). Я считаю, что когда страница загружается, начальная загрузка обнаруживает и ее атрибуты, которые находятся в теле html. Но когда я динамически создаю таблицу начальной загрузки, таблица HTML присутствует, но не имеет функции таблицы начальной загрузки.
Пожалуйста помоги. Вот мой код ниже того, как я разрабатываю таблицу с помощью функции javascript.
// result is a large string of result when ajax is sending a response.
function displayResult(result) {
//convert the result into Array of JSON
var splitResult = result.split("*split*");
var getLast = splitResult.length - 1;
for(var i = 0; i < splitResult.length; i++){
if (i != getLast) {
splitResult[i] = JSON.parse(splitResult[i]);
} else {
splitResult.splice(i,1);
}
}
// the .pagination is a function that is use in pagination.js
// the #page is a DIV
$('#page').pagination({
dataSource: splitResult,
pageSize: 8,
callback: function(data, pagination) {
// template method
var html = template(data);
// grab the html String and append it into the #demo DIV
$("#demo").append(html);
}
})
}
function template(data) {
// table tag with bootstrap-table attributes
var html = '<table data-toggle = "table" style = "width: 100%;">';
// create the table headers
html = html + '<thead><tr><th data-field = "IDCODE" data-sortable = "true">ID</th><th scope = "col" data-sortable = "true">ZIP 11</th><th scope = "col" data-sortable = "true">Date</th></tr></thead>'
+ '<tbody>';
// input the results of the data
if (data[0].IDCODE) {
$.each(data, function(index, item) {
html += '<trid = "tr-id-2" class = "tr-class-2"><td>'
+ item.IDCODE+'</td>'
+ '<td>' + item.ZIP11_ID + '</td>'
+ '<td>' + item.DEL01_TS + '</td></tr>';
});
} else {
$.each(data, function(index, item) {
html += '<tr><td>'+ item +'</td></tr>';
});
}
html += '</tbody></table>';
return html;
}
при использовании этого подхода он просто отображает таблицу html. Не использовать загрузочную таблицу. Я пытаюсь добавить функцию, в которой пользователь может щелкнуть заголовок столбца для сортировки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Надеюсь, этот код поможет вам, что он делает 1. отобразить текстовое поле, где пользователь может ввести имя таблицы БД 2. Бэкенд (в моем случае Python) получает информацию из db_name_table 3. Данные динамически отображаются в загрузочной таблице.
HTML
<form method = "GET" id = "id1" action = "{% url 'request_page' %}">
<input type = "text" value = "db_name_table" name = "mytextbox" id='mytextbox' size = "1"/>
<input type = "submit" class = "btn" value = "Click" name = "mybtn">
</form>
Javascript:
$(document).ready( function(){
$('#id1').submit( function(e){
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success:function( value ){
$('#datatable').bootstrapTable({
striped: true,
pagination: true,
showColumns: true,
showToggle: true,
showExport: true,
sortable: true,
paginationVAlign: 'both',
pageSize: 25,
pageList: [10, 25, 50, 100, 'ALL'],
columns: {{ columns|safe }},
data: {{ data|safe }},
});
}
})
})
});
$(document).ready(function() {
var i = 1;
$('#tab_logic').on('focusout', 'tbody tr:nth-last-child(2) td:nth-last-child(2) input', function() {
if ($(this).val() != '' && $('#tab_logic tbody tr:nth-last-child(2) td:nth-last-child(3) input').val() != "" && $('#tab_logic tbody tr:nth-last-child(2) .product').val() != '') {
b = i - 1;
$('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
$('#tab_logic').append('<tr id = "addr' + (i + 1) + '"></tr>');
$(this).focus().select();
i++;
}
});
$('body').on('click', '#delete_row', function() {
if (i > 1) {
var id = i;
$('#tab_logic tbody tr:nth-last-child(2)').remove();
$('#tab_logic tbody tr:last').attr("id", "addr" + (id - 1));
i--;
}
calc();
});
$('#tab_logic tbody').on('keyup change', function() {
calc();
});
$('#tax').on('focusout', function() {
var total = parseInt($('#sub_total').val());
var tax_sum = eval(total / 100 * $('#tax').val());
$('#tax_amount').val(tax_sum.toFixed(2));
$('#total_amount').val((tax_sum+total).toFixed(2));
});
});
function calc() {
$('#tab_logic tbody tr').each(function(i, element) {
var html = $(this).html();
if (html != '') {
var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
$(this).find('.total').val(qty * price);
calc_total();
}
});
}
function calc_total() {
total = 0;
$('.total').each(function() {
total += parseInt($(this).val());
});
$('#sub_total').val(total.toFixed(2));
tax_sum = total / 100 * $('#tax').val();
$('#tax_amount').val(tax_sum.toFixed(2));
$('#total_amount').val((tax_sum + total).toFixed(2));
}
Пожалуйста, не публикуйте только код в качестве ответа, но также предоставьте объяснение того, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением, как правило, более полезны и качественны, и с большей вероятностью привлекут положительные голоса.
Синтаксические ошибки и что такое bootstrapTable()? Это не может работать. Кроме того, у вас нет #datatable в HTML.