如何动态创建引导表？

Question

我无法通过单击按钮来开发引导表。我的目标是为表中的每一列添加排序功能。因此，对于我的用户案例，当用户单击按钮时，它会调用 ajax 从数据库中获取数据并发送回结果（它可以正常工作，所以不用担心）。所以我需要将结果显示为引导表，这样我就可以对每一列使用排序功能。另外，我正在使用 pagination.js，它使用 json 对象和表的数组来显示结果。 当我开发表格并将其附加到 div 中时，我看不到每一列的排序功能。

当我创建一个带有引导表属性的简单硬编码 HTML 表时，它可以工作，例如排序功能 (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 表格。不使用引导表。我正在尝试添加一个功能，用户可以单击列标题进行排序。

Answer 1

 $(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));
                    }

Answer 2

希望这段代码可以帮助你，它的作用是 1.显示一个文本框，我用户可以在其中输入一个db表名 2. 后端（在我的例子中是 Python）从 db_name_table 获取信息 3.数据在bootstrap-table中动态显示

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 }}, 
                    });
                }
            })
        })
    });