javascript - Combining a sortable table with a checkbox sum output -
my current code has checkbox sum function takes values database.
i trying apply javascript code table allows me sort data in rows.
for example, after sorting rows display 5 acer assets on top. want tick checkboxes of top 5 displayed acer assets , sum them.
this current code:
<?php include('connect1.php'); $retrieve = $db->prepare("select count(*) asset"); $retrieve->execute(); $fetchrow = $retrieve->fetch(pdo::fetch_num); $calculated=$fetchrow[0]; ?> <script type="text/javascript"> function updatecost() { var sum = 0; var gn, elem; (i=0; i<<?php echo $calculated ?>; i++) { gn = 'sum_m_'+i; elem = document.getelementbyid(gn); if (elem.checked == true) { sum += number(elem.value); } } document.getelementbyid('totalcost' ).value = sum.tofixed(0); } window.onload=updatecost </script> <link rel="stylesheet" href="style.css" /> total cost : <input type="text" name="sen" id="totalcost" value="" /> <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"> <thead> <tr> <th><h3>asset id</h3></th> <th><h3>vendor</h3></th> <th><h3>hardware </h3></th> <th><h3>cost</h3></th> <th><h3>date of purchase</h3></th> <th><h3>select values</h3></th> </tr> </thead> <tbody> <?php // include('connect1.php'); included file $result = $db->prepare("select * asset"); $result->bindparam(':userid', $res); $result->execute(); for($i=0; $row = $result->fetch(); $i++){ ?> <tr> <td><?php echo $row['asset_id']; ?></td> <td><?php echo $row['vendor_name']; ?></td> <td><?php echo $row['hardware_id']; ?></td> <td><?php echo $row['asset_cost']; ?></td> <td><?php echo $row['dateofpurchase']; ?></td> <th><h3><input type="checkbox" name="items[]" value="<?php echo $row['asset_cost'] ?>" id="sum_m_<?php echo $i ?>" onclick="updatecost()"></h3></th> </tr> <?php } ?> </tbody> </table> <br /> <div id="controls"> <div id="perpage"> <select onchange="sorter.size(this.value)"> <option value="5">5</option> <option value="10" selected="selected">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> <span>entries per page</span> </div> <div id="navigation"> <img src="images/first.gif" width="16" height="16" alt="first page" onclick="sorter.move(-1,true)" /> <img src="images/previous.gif" width="16" height="16" alt="first page" onclick="sorter.move(-1)" /> <img src="images/next.gif" width="16" height="16" alt="first page" onclick="sorter.move(1)" /> <img src="images/last.gif" width="16" height="16" alt="last page" onclick="sorter.move(1,true)" /> </div> <div id="text">displaying page <span id="currentpage"></span> of <span id="pagelimit"></span></div> </div> this javascript :
var tiny={}; function t$(i){return document.getelementbyid(i)} function t$$(e,p){return p.getelementsbytagname(e)} tiny.table=function(){ function sorter(n){this.n=n; this.pagesize=20; this.paginate=0} sorter.prototype.init=function(e,f){ var t=ge(e), i=0; this.e=e; this.l=t.r.length; t.a=[]; t.h=t$$('thead',t$(e))[0].rows[0]; t.w=t.h.cells.length; for(i;i<t.w;i++){ var c=t.h.cells[i]; if(c.classname!='nosort'){ c.classname=this.head; c.onclick=new function(this.n+'.wk(this.cellindex)') } } for(i=0;i<this.l;i++){t.a[i]={}} if(f!=null){var a=new function(this.n+'.wk('+f+')'); a()} if(this.paginate){this.g=1; this.pages()} }; sorter.prototype.wk=function(y){ var t=ge(this.e), x=t.h.cells[y], i=0; for(i;i<this.l;i++){ t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display=''; while(v.haschildnodes()){v=v.firstchild} t.a[i].v=v.nodevalue?v.nodevalue:'' } for(i=0;i<t.w;i++){var c=t.h.cells[i]; if(c.classname!='nosort'){c.classname=this.head}} if(t.p==y){t.a.reverse(); x.classname=t.d?this.asc:this.desc; t.d=t.d?0:1} else{t.p=y; t.a.sort(cp); t.d=0; x.classname=this.asc} var n=document.createelement('tbody'); for(i=0;i<this.l;i++){ var r=t.r[t.a[i].o].clonenode(true); n.appendchild(r); r.classname=i%2==0?this.even:this.odd; var cells=t$$('td',r); for(var z=0;z<t.w;z++){cells[z].classname=y==z?i%2==0?this.evensel:this.oddsel:''} } t.replacechild(n,t.b); if(this.paginate){this.size(this.pagesize)} }; sorter.prototype.page=function(s){ var t=ge(this.e), i=0, l=s+parseint(this.pagesize); if(this.currentid&&this.limitid){t$(this.currentid).innerhtml=this.g} for(i;i<this.l;i++){t.r[i].style.display=i>=s&&i<l?'':'none'} }; sorter.prototype.move=function(d,m){ var s=d==1?(m?this.d:this.g+1):(m?1:this.g-1); if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.pagesize)} }; sorter.prototype.size=function(s){ this.pagesize=s; this.g=1; this.pages(); this.page(0); if(this.currentid&&this.limitid){t$(this.limitid).innerhtml=this.d} }; sorter.prototype.pages=function(){this.d=math.ceil(this.l/this.pagesize)}; function ge(e){var t=t$(e); t.b=t$$('tbody',t)[0]; t.r=t.b.rows; return t}; function cp(f,c){ var g,h; f=g=f.v.tolowercase(), c=h=c.v.tolowercase(); var i=parsefloat(f.replace(/(\$|\,)/g,'')), n=parsefloat(c.replace(/(\$|\,)/g,'')); if(!isnan(i)&&!isnan(n)){g=i,h=n} i=date.parse(f); n=date.parse(c); if(!isnan(i)&&!isnan(n)){g=i; h=n} return g>h?1:(g<h?-1:0) }; return{sorter:sorter} }(); this actual working sortable table:
<?php include('connect1.php'); $retrieve = $db->prepare("select count(*) asset"); $retrieve->execute(); $fetchrow = $retrieve->fetch(pdo::fetch_num); $calculated=$fetchrow[0]; ?> <script type="text/javascript"> function updatecost() { var sum = 0; var gn, elem; (i=0; i<<?php echo $calculated ?>; i++) { gn = 'sum_m_'+i; elem = document.getelementbyid(gn); if (elem.checked == true) { sum += number(elem.value); } } document.getelementbyid('totalcost' ).value = sum.tofixed(0); } window.onload=updatecost </script> <input type="button" value="search" onclick="window.location.href='http://mp04.bit-mp.biz/ashvin/searchacost.php'" /> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>costing</title> <link rel="stylesheet" href="style.css" /> </head> <body> <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"> <thead> <tr> <th><h3>asset id</h3></th> <th><h3>vendor</h3></th> <th><h3>hardware </h3></th> <th><h3>cost</h3></th> <th><h3><input type="checkbox" name="items[]" value="<?php echo $row['asset_cost'] ?>" id="sum_m_<?php echo $i ?>" onclick="updatecost()"></h3></th> </tr> </thead> <tbody> <?php mysql_connect("localhost","user","pass"); mysql_select_db("db"); $result = mysql_query("select * asset"); while($row = mysql_fetch_array($result)) for($i=0; $row = $result->fetch(); $i++){ { echo "<tr>"; echo "<td>" . $row['asset_id'] . "</td>"; echo "<td>" . $row['vendor_name'] . "</td>"; echo "<td>" . $row['hardware_id'] . "</td>"; echo "<td>" . $row['asset_cost'] . "</td>"; echo "</tr>"; } } echo "</table>"; ?> </tbody> </table> <div id="controls"> <div id="perpage"> <select onchange="sorter.size(this.value)"> <option value="5">5</option> <option value="10" selected="selected">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> <span>entries per page</span> </div> <div id="navigation"> <img src="images/first.gif" width="16" height="16" alt="first page" onclick="sorter.move(-1,true)" /> <img src="images/previous.gif" width="16" height="16" alt="first page" onclick="sorter.move(-1)" /> <img src="images/next.gif" width="16" height="16" alt="first page" onclick="sorter.move(1)" /> <img src="images/last.gif" width="16" height="16" alt="last page" onclick="sorter.move(1,true)" /> </div> <div id="text">displaying page <span id="currentpage"></span> of <span id="pagelimit"></span></div> </div> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> var sorter = new tiny.table.sorter("sorter"); sorter.head = "head"; sorter.asc = "asc"; sorter.desc = "desc"; sorter.even = "evenrow"; sorter.odd = "oddrow"; sorter.evensel = "evenselected"; sorter.oddsel = "oddselected"; sorter.paginate = true; sorter.currentid = "currentpage"; sorter.limitid = "pagelimit"; sorter.init("table",1); </script> </body> </html>
Comments
Post a Comment