jquerycsvtotable + tablesorter: hold the display untill everything is loaded? -
i use tablesorter in combination jquerycsvtotable. works fine, but... there's lag between moment when table loaded , moment when tablesorter shown makes data appear without formatting on screen. time varies on amount of data, between 2 , 5 seconds.
is there way show "loading" gif or nothing untill process completed avoid showing ugly data?
thanks!
ps: don't mean time tablesorter takes re-order rows when click on header cell, know arranged optional processing gifs shown header...
edit: please find below code.
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script> <script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script> <script type="text/javascript" src="/js/csv/js/jquery.csvtotable.js"></script> <script> $(function() { var mytable = $('#tabla1') .csvtotable('/est/data/cli_30_0000.txt',{ loadingimage: '/js/csv/images/loading.gif', separator: ";" }) .bind("loadcomplete",function(){ var footer = mytable.find('tr:last'); mytable .find('thead').after( footer.wrap('<tfoot/>').parent() ).end() .tablesorter({ sortlist: [[5,0]], widthfixed : true, widgets: ["zebra", "filter", "stickyheaders"], widgetoptions: {filter_hidefilters : true} }); }); }); </script> </head> <body> <p> <a href=../../>home</a> <a href=../>30</a> <a href=./>0000</a><br> 2013-04-15 12:45:17 </p> <div> <table id="tabla1" class="tablesorter"> </div> </table> </body> </html>
i wonder if solution easy adding "tablesorter" class name table. if using theme other default, theme name should included:
var mytable = $('#tabla1') .csvtotable('/est/data/cli_30_0000.txt',{ tableclass: 'tablesorter tablesorter-default', // adjust theme name here loadingimage: '/js/csv/images/loading.gif', separator: ";" })
Comments
Post a Comment