Блог

У меня возникли проблемы с разработкой таблицы начальной загрузки нажатием кнопки. Моя цель — добавить функцию сортировки для каждого столбца в таблице. Итак, в моем пользовательском случае, когда пользователь нажимает на кнопку, он вызывает ajax для извлечения данных из базы данных и отправляет обратно результат (это работает, так что не беспокойтесь об этом). Итак, мне нужно отобразить результаты в виде таблицы начальной загрузки, чтобы я мог использовать функцию сортировки для каждого столбца. Кроме того, я использую pagination.js которая использует массив объектов json и таблицу для отображения результата. Когда я разрабатываю таблицу и добавляю ее в div, я не вижу функции сортировки по каждому столбцу.

Это работает, когда я создаю простую HTML-таблицу с жестким кодом с атрибутами начальной загрузки, такими как функция сортировки (data-sortable = «true»). Я полагаю, что при загрузке страницы bootstrap обнаруживает the и его атрибуты, которые находятся в теле 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-таблицу. Не используется bootstrap-таблица. Я пытаюсь добавить функцию, при которой пользователь может щелкнуть заголовок столбца для сортировки.

Надеюсь, этот код сможет вам помочь, что он делает: 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() != '' amp;amp; $('#tab_logic tbody tr:nth-last-child(2) td:nth-last-child(3) input').val() != "" amp;amp; $('#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));
                    }