如何动态创建Bootstrap表格？

Question

我在开发一个bootstrap表格时遇到了问题。我的目标是为每一列添加排序功能。对于我的用户案例，当用户单击按钮时，它会调用ajax从数据库中获取数据并返回结果（它可以工作，所以不用担心）。因此，我需要将结果显示为bootstrap表格，以便我可以使用每个列的排序功能。此外，我正在使用pagination.js，它使用json对象数组和表格来显示结果。

当我开发表格并将其附加到div中时，我看不到每个列的排序功能。当我创建一个简单的硬编码HTML表格，其中包含Bootstrap-table属性，如排序功能（data-sortable =“true”）时，它可以正常工作。我相信当页面加载时，Bootstrap会检测html主体上的表格及其属性。但是，当我动态创建bootstrap表格时，虽然HTML表格存在，但没有Bootstrap表格功能。

请帮帮我。以下是我使用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-table。我正在尝试添加一个功能，使用户可以单击列标题进行排序。最初的回答：使用bootstrap-table插件来实现这一功能。

- timJIN520

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

- Bishwas

---

请不要只发布代码作为答案，还请提供关于代码的解释，以及它是如何解决问题的。附带解释的答案通常更有帮助和质量更高，并且更有可能获得赞同。 - undefined

Answer 2

希望这段代码能对你有所帮助，它的功能如下： 1. 显示一个文本框，用户可以输入数据库表名 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 }}, 
                    });
                }
            })
        })
    });

- Diego Quirós

---

语法错误和bootstrapTable()是什么？这样是行不通的。而且你在HTML中也没有#datatable。 - undefined