javascript - How to create a bootstrap-table dynamically? - Stack Overflow

admin管理员组

文章数量:1023018

I'm having trouble developing a bootstrap-table by clicking a button. My goal is to add a sort feature for each columns on a table. So for my user case, when a user clicks on the button, it calls an ajax to grab a data from Database and sends back a result (it works so no worries on it). So i need to display the results as a bootstrap-table so i can use the sort feature for each column. Plus, I'm using pagination.js which uses Array of json objects and table to display the result. When I develop the table and append it into a div, I dont see the sort feature on each columns.

It works when I create a simple hard code HTML table with Bootstrap-table attributes such as sort feature (data-sortable="true"). I believe when the page loads bootstrap detects the and its attributs that is on the html body. But when I dynamically create a bootstrap-table, the HTML table is there but not the bootstrap-table feature.

Please help. Here is my code below of how i develop the table using javascript function.

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

when using this approach, it just display the html table. Not using bootstrap-table. I'm trying to add a feature where a user can click on the column header to sort.

I'm having trouble developing a bootstrap-table by clicking a button. My goal is to add a sort feature for each columns on a table. So for my user case, when a user clicks on the button, it calls an ajax to grab a data from Database and sends back a result (it works so no worries on it). So i need to display the results as a bootstrap-table so i can use the sort feature for each column. Plus, I'm using pagination.js which uses Array of json objects and table to display the result. When I develop the table and append it into a div, I dont see the sort feature on each columns.

It works when I create a simple hard code HTML table with Bootstrap-table attributes such as sort feature (data-sortable="true"). I believe when the page loads bootstrap detects the and its attributs that is on the html body. But when I dynamically create a bootstrap-table, the HTML table is there but not the bootstrap-table feature.

Please help. Here is my code below of how i develop the table using javascript function.

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

when using this approach, it just display the html table. Not using bootstrap-table. I'm trying to add a feature where a user can click on the column header to sort.

• javascript
• jquery
• html
• pagination
• bootstrap-table

Share Improve this question Follow asked Mar 25, 2019 at 16:27 timJIN520timJIN520 30911 gold badge33 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

Hope this code could help you, what it does is 1. display a textBox, where I user can enter a db table name 2. The backend ( in my case Python) get information from db_name_table 3. The data is displayed dinamically in the 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 }}, 
                    });
                }
            })
        })
    });

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

I'm having trouble developing a bootstrap-table by clicking a button. My goal is to add a sort feature for each columns on a table. So for my user case, when a user clicks on the button, it calls an ajax to grab a data from Database and sends back a result (it works so no worries on it). So i need to display the results as a bootstrap-table so i can use the sort feature for each column. Plus, I'm using pagination.js which uses Array of json objects and table to display the result. When I develop the table and append it into a div, I dont see the sort feature on each columns.

It works when I create a simple hard code HTML table with Bootstrap-table attributes such as sort feature (data-sortable="true"). I believe when the page loads bootstrap detects the and its attributs that is on the html body. But when I dynamically create a bootstrap-table, the HTML table is there but not the bootstrap-table feature.

Please help. Here is my code below of how i develop the table using javascript function.

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

when using this approach, it just display the html table. Not using bootstrap-table. I'm trying to add a feature where a user can click on the column header to sort.

I'm having trouble developing a bootstrap-table by clicking a button. My goal is to add a sort feature for each columns on a table. So for my user case, when a user clicks on the button, it calls an ajax to grab a data from Database and sends back a result (it works so no worries on it). So i need to display the results as a bootstrap-table so i can use the sort feature for each column. Plus, I'm using pagination.js which uses Array of json objects and table to display the result. When I develop the table and append it into a div, I dont see the sort feature on each columns.

It works when I create a simple hard code HTML table with Bootstrap-table attributes such as sort feature (data-sortable="true"). I believe when the page loads bootstrap detects the and its attributs that is on the html body. But when I dynamically create a bootstrap-table, the HTML table is there but not the bootstrap-table feature.

Please help. Here is my code below of how i develop the table using javascript function.

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

when using this approach, it just display the html table. Not using bootstrap-table. I'm trying to add a feature where a user can click on the column header to sort.

• javascript
• jquery
• html
• pagination
• bootstrap-table

Share Improve this question Follow asked Mar 25, 2019 at 16:27 timJIN520timJIN520 30911 gold badge33 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

Hope this code could help you, what it does is 1. display a textBox, where I user can enter a db table name 2. The backend ( in my case Python) get information from db_name_table 3. The data is displayed dinamically in the 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 }}, 
                    });
                }
            })
        })
    });

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

本文标签： javascriptHow to create a bootstraptable dynamicallyStack Overflow