javascript 如何动态创建引导表？

a64a0gku 于 2023-03-06 发布在 Java

关注(0)|答案(2)|浏览(131)

我在通过单击按钮开发引导表时遇到了麻烦，我的目标是为表中的每一列添加排序特性，因此对于我的用户案例，当用户单击按钮时，它调用 AJAX 从Database获取数据并返回结果（它工作，所以不用担心它）.所以我需要显示结果作为一个引导表，这样我就可以使用排序功能的每一列.另外，我使用pagination.js，它使用json对象数组和表来显示结果，当我开发表并将其添加到div中时，我没有看到每列的排序功能。
当我创建一个简单的硬代码HTML表，带有引导表属性，如排序功能（data-sortable=“true”）时，它就可以工作。我相信当页面加载时， Bootstrap 会检测到html主体上的 Bootstrap 及其属性。但是当我动态创建一个引导表时，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-table。我正在尝试添加一个特性，用户可以点击列标题进行排序。

JavaScript

来源：https://stackoverflow.com/questions/55342343/how-to-create-a-bootstrap-table-dynamically

2条答案

按热度按时间

oxalkeyp1#

希望这段代码能对您有所帮助，它的作用是1.显示一个textBox，用户可以在其中输入一个db表名2.后端（在我的例子中是Python）从db_name_table获取信息3.数据以动态方式显示在bootstrap-table中
超文本标记语言

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

赞(0）回复(0）举报 2023-03-06

e3bfsja22#

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

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 如何动态创建引导表？

2条答案

相关问题

热门标签

最新问答