javascript - jQuery Datatables - Table with Subtable or Expandable Rows -
my code works in big data lack of usability... table should work 500-600 rows (updated in every 5 seconds)... therefore want make similar: http://i.stack.imgur.com/npktu.png //buttons added via photoshop.
i can't find functionality @jquery.
so want group data under 20/25 group header. each ip has 60-70 row. 2 column: ip , fps same each group.
this how recent application looks like: http://www11.pic-upload.de/03.06.14/rv6w1tboi1ip.png
so main question is: how add expand/collapse functionality group of rows under 1 main table.
and main part of js code:
//მაგიდის ახლიდან დახატვა function redrawtable(){ "use strict"; $("table#content").datatable({ "destroy" : true, "ajax": "/json", "tabletools": true, "columndefs": [ { "render": function (data) { var labeltype, labeltitle; if (data === 1) { labeltitle = "ჩართულია"; labeltype = " alert-success"; } else { labeltitle = "გათიშულია"; labeltype = " alert-danger"; } return "<span class='label " + labeltype + "'>" + labeltitle + "</span>"; }, "targets": 3 } ] }); } //მთავარი ფუნქცია $(document).ready(function() { //lastupdate-ში ინახება ინფორმაციის განახლების დრო. var table = $("table#content").datatable(), lastupdate; //პირველი გაშვება $.getjson("/json", function(data){ "use strict"; if (data.hasownproperty("data") === false) { console.log("url-ზე მონაცემები ცარიელია"); } else { console.log("პირველი პროცესი"); lastupdate = data.lastupdate; redrawtable(); calculatebar(data); search(); } }); //ყოველ 5 წამში ერთხელ ეშვება. setinterval(function() { "use strict"; $.getjson("/json", function(data){ "use strict"; if (lastupdate === data.lastupdate) { console.log("ახალი მონაცემები არ მოიძებნა"); } else if (data.hasownproperty("data") === false) { $("table#content").datatable({ "destroy" : true }); console.log("მონაცემები არ იქნა მოწოდებული"); document.getelementbyid("success").style.width = 0 + "%"; document.getelementbyid("danger").style.width = 0 + "%"; } else { redrawtable(); search(); calculatebar(data); lastupdate = data.lastupdate; } }); }, 5000); } );
solution:
moved ext js 5(new beautiful ui crisp). enterprise js framework.
Comments
Post a Comment