Как динамически создать загрузочную таблицу? - PullRequest
Новая
       9

Как динамически создать загрузочную таблицу?

0 голосов
/ 25 марта 2019

У меня проблемы с созданием загрузочной таблицы при нажатии кнопки. Моя цель - добавить функцию сортировки для каждого столбца таблицы. Так что для моего пользовательского случая, когда пользователь нажимает на кнопку, он вызывает 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-таблицу. Не использует загрузочную таблицу. Я пытаюсь добавить функцию, где пользователь может щелкнуть заголовок столбца для сортировки.

1 Ответ

0 голосов
/ 12 июня 2019

Надеюсь, что этот код может помочь вам, что он делает: 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 }}, 
                    });
                }
            })
        })
    });
...