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


hi want display multiple table , table data dynamically brought consuming json data on single button click using ajax & javascript,jquery . single table can generate table using below procedure.

$.ajax({     type: 'get',     url: xxx.xxx.xxx.xxx,     data: "id=" + clo + "&location=" + clop +"",      success: function (resp) {                   var location = resp;         var tr;                   (var = 0; < 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 internet          spinnerplugin.activitystop();      } });

but generating multiple tables using on single click using ajax how can generate , want 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>

/* sample response expected 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>";    (var = 0; < 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>";    (var = 0; < 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>";    (var = 0; < 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, ajax response have enough data filling 3 tables.

you can write 

$(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 internet              spinnerplugin.activitystop();         }     }); });

Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more