How to display multiple tables dynamically using one button click using ajax

Question

Hi i want to display multiple table and the table data will be dynamically brought by consuming json data on single button click using ajax & javascript,jquery . For single table i can generate table using this below procedure.

$.ajax({
    type: 'GET',
    url: xxx.xxx.xxx.xxx,
    data: "Id=" + clO + "&Location=" + clOp +"",

    success: function (resp) {          
        var Location = resp;
        var tr;          
        for (var i = 0; i < Location.length; i++) {

            tr = tr + "<td style='height:20px' align='left'>" + Location[i].name + "</td>";
            tr = tr + "<td style='height:20px' align='right'>" + Location[i].QTY + "</td>";
            tr = tr + "<td style='height:20px' align='right'>" + Location[i].AMT + "</td>";
            tr = tr + "</tr>";

        };
        document.getElementById('p_w').style.display = "block";
        document.getElementById('Wise').innerHTML = "<table id='rt1' >" + "<thead ><tr><th style='height:20px'>Name</th>" + "<th style='height:20px'>Qty</th>" + "<th style='height:20px'>Amnt</th>"+ "</tr></thead>"
            + tr +
            "<tr><td style='height:20px'></td></tr>" +
            "</table>";
        document.getElementById('Wise').childNodes[0].nodeValue = null;

    },
    error: function (e) {
        SpinnerPlugin.activityStop();
        window.plugins.toast.showLongBottom("Please Enable your Internet 
        SpinnerPlugin.activityStop();

    }
});

But for generating the multiple tables using on single click using ajax how can we generate and i want to generate multiple tables in below format

table, th, td {
    border: 1px solid black;
}

<body>
<p> Table 1</p>
<table style="width:100%">

  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<p> Table 2</p>
<table style="width:100%">

  <tr>
    <th>Subject</th>
    <th>Marks</th> 
    
  </tr>
  <tr>
    <td>Science</td>
    <td>70</td>
   
  </tr>
  <tr>
    <td>Computers</td>
    <td>80</td>
    
  </tr>
  <tr>
    <td>Art</td>
    <td>70</td>
    
  </tr>
</table>
<p>Table 3</p>
<table style="width:100%">

  <tr>
    <th>Laptop</th>
    <th>Price</th> 
    
  </tr>
  <tr>
    <td>Dell</td>
    <td>$350</td>
   
  </tr>
  <tr>
    <td>Lenovo</td>
    <td>$450</td>
    
  </tr>
  <tr>
    <td>Asus</td>
    <td>$200</td>
    
  </tr>
</table>
</body>

@ Faisal Mehmood Awan yeah using ajax with in another ajax but it is not working out — Madpop
– Madpop, Commented Aug 18, 2017 at 9:25
Do you want to make multiple calls and add the html ? At first set document.getElementById('Wise').innerHTML = ''; Then inside each ajax call document.getElementById('Wise').innerHTML += '<p>Table X</p><table> you html goes here </table>'. etc so it will get added up. — gjijo
– gjijo, Commented Aug 18, 2017 at 10:14
@gijjo can we create 3 tables in single ajax or button click — Madpop
– Madpop, Commented Aug 18, 2017 at 10:15
Mentioned ajax is returning 'Location' with fields name, QTY, AMT. So from where will you get student and mark list that need to be filled in next two tables? If It comes along with this ajax response, please expain the json structure. — gjijo
– gjijo, Commented Aug 18, 2017 at 10:27

gjijo · Accepted Answer · 2017-08-18 10:40:07Z

/* Sample response expected as Ajax  */
var data = {
  Student: [{
    name: 'abc',
    age: '20'
  }, {
    name: 'xyz',
    age: '30'
  }],
  MarkList: [{
    subject: 'English',
    mark: '50'
  }, {
    subject: 'Arabic',
    mark: '75'
  }],
  Products: [{
    company: "Dell",
    Amount: '50'
  }, {
    company: "HP",
    Amount: '100'
  }]
};

/* Called on Ajax success  */
fnAjaxSuccess(data);

function fnAjaxSuccess(data) {
  document.getElementById('main').innerHTML = '';
  FillStudentList(data.Student, 1);
  FillMarkList(data.MarkList, 2)
  FillProductList(data.Products, 3);
}

/* Creating 1st table  */
function FillStudentList(Student, tableIndex) {
  var html = "<p> Table " + tableIndex + "</p><table>";
  for (var i = 0; i < Student.length; i++) {
    html += "<tr><td>" + Student[i].name + "</td><td>" + Student[i].age + "</td></tr>"
  }
  document.getElementById('main').innerHTML += (html + "</table>");
}

/* Creating 2nd table  */
function FillMarkList(MarkList, tableIndex) {
  var html = "<p> Table " + tableIndex + "</p><table>";
  for (var i = 0; i < MarkList.length; i++) {
    html += "<tr><td>" + MarkList[i].subject + "</td><td>" + MarkList[i].mark + "</td></tr>"
  }
  document.getElementById('main').innerHTML += (html + "</table>");
}

/* Creating 3rd table  */
function FillProductList(Products, tableIndex) {
  var html = "<p> Table " + tableIndex + "</p><table>";
  for (var i = 0; i < Products.length; i++) {
    html += "<tr><td>" + Products[i].company + "</td><td>" + Products[i].Amount + "</td></tr>"
  }
  document.getElementById('main').innerHTML += (html + "</table>");
}

table, th, td {
    border: 1px solid black;
}

<div id='main'></div>

Here it's assumed that, Your ajax response will have enough data for filling 3 tables.

You can write this as

$(document).on('click', '#id-of-button', function(){
    $.ajax({
        type: 'GET',
        url: xxx.xxx.xxx.xxx,
        data: "Id=" + clO + "&Location=" + clOp +"",

        success: function (resp) {
            fnAjaxSuccess(resp);
        },
        error: function (e) {
            SpinnerPlugin.activityStop();
            window.plugins.toast.showLongBottom("Please Enable your Internet 
            SpinnerPlugin.activityStop();
        }
    });
});

Collectives™ on Stack Overflow

How to display multiple tables dynamically using one button click using ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related