123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338 |
- <div class="row">
- <div class="col-md-12">
- <!-- start: EXPORT BASIC TABLE PANEL -->
- <div class="panel panel-white">
- <div class="panel-heading">
- <h4 class="panel-title">Export <span class="text-bold">Basic</span> Table</h4>
- <div class="panel-tools">
- <div class="dropdown">
- <a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
- <i class="fa fa-cog"></i>
- </a>
- <ul class="dropdown-menu dropdown-light pull-right" role="menu">
- <li>
- <a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
- </li>
- <li>
- <a class="panel-refresh" href="#">
- <i class="fa fa-refresh"></i> <span>Refresh</span>
- </a>
- </li>
- <li>
- <a class="panel-config" href="#panel-config" data-toggle="modal">
- <i class="fa fa-wrench"></i> <span>Configurations</span>
- </a>
- </li>
- <li>
- <a class="panel-expand" href="#">
- <i class="fa fa-expand"></i> <span>Fullscreen</span>
- </a>
- </li>
- </ul>
- </div>
- <a class="btn btn-xs btn-link panel-close" href="#">
- <i class="fa fa-times"></i>
- </a>
- </div>
- </div>
- <div class="panel-body">
- <p>
- Export HTML Table to JSON, XML, PNG, CSV, TXT, SQL, MS-Word, Ms-Excel, Ms-Powerpoint and PDF. You can easily set the font size, separator, export type, margin and etc..
- </p>
- <div class="row">
- <div class="col-md-12 space20">
- <div class="btn-group pull-right">
- <button data-toggle="dropdown" class="btn btn-green dropdown-toggle">
- Export <i class="fa fa-angle-down"></i>
- </button>
- <ul class="dropdown-menu dropdown-light pull-right">
- <li>
- <a href="#" class="export-pdf" data-table="#sample-table-1">
- Save as PDF
- </a>
- </li>
- <li>
- <a href="#" class="export-png" data-table="#sample-table-1">
- Save as PNG
- </a>
- </li>
- <li>
- <a href="#" class="export-csv" data-table="#sample-table-1">
- Save as CSV
- </a>
- </li>
- <li>
- <a href="#" class="export-txt" data-table="#sample-table-1">
- Save as TXT
- </a>
- </li>
- <li>
- <a href="#" class="export-xml" data-table="#sample-table-1">
- Save as XML
- </a>
- </li>
- <li>
- <a href="#" class="export-sql" data-table="#sample-table-1">
- Save as SQL
- </a>
- </li>
- <li>
- <a href="#" class="export-json" data-table="#sample-table-1">
- Save as JSON
- </a>
- </li>
- <li>
- <a href="#" class="export-excel" data-table="#sample-table-1">
- Export to Excel
- </a>
- </li>
- <li>
- <a href="#" class="export-doc" data-table="#sample-table-1">
- Export to Word
- </a>
- </li>
- <li>
- <a href="#" class="export-powerpoint" data-table="#sample-table-1">
- Export to PowerPoint
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="table-responsive">
- <table class="table table-hover" id="sample-table-1">
- <thead>
- <tr>
- <th>Country</th>
- <th>Population</th>
- <th>Date</th>
- <th>%ge</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Chinna</td>
- <td>1,363,480,000</td>
- <td>March 24, 2014</td>
- <td>19.1</td>
- </tr>
- <tr>
- <td>India</td>
- <td>1,241,900,000</td>
- <td>March 24, 2014</td>
- <td>17.4</td>
- </tr>
- <tr>
- <td>United States</td>
- <td>317,746,000</td>
- <td>March 24, 2014</td>
- <td>4.44</td>
- </tr>
- <tr>
- <td>Indonesia</td>
- <td>249,866,000</td>
- <td>July 1, 2013</td>
- <td>3.49</td>
- </tr>
- <tr>
- <td>Brazil</td>
- <td>201,032,714</td>
- <td>July 1, 2013</td>
- <td>2.81</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- <!-- end: EXPORT BASIC TABLE PANEL -->
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <!-- start: EXPORT DATA TABLE PANEL -->
- <div class="panel panel-white">
- <div class="panel-heading">
- <h4 class="panel-title">Export <span class="text-bold">Data</span> Table</h4>
- <div class="panel-tools">
- <div class="dropdown">
- <a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
- <i class="fa fa-cog"></i>
- </a>
- <ul class="dropdown-menu dropdown-light pull-right" role="menu">
- <li>
- <a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
- </li>
- <li>
- <a class="panel-refresh" href="#">
- <i class="fa fa-refresh"></i> <span>Refresh</span>
- </a>
- </li>
- <li>
- <a class="panel-config" href="#panel-config" data-toggle="modal">
- <i class="fa fa-wrench"></i> <span>Configurations</span>
- </a>
- </li>
- <li>
- <a class="panel-expand" href="#">
- <i class="fa fa-expand"></i> <span>Fullscreen</span>
- </a>
- </li>
- </ul>
- </div>
- <a class="btn btn-xs btn-link panel-close" href="#">
- <i class="fa fa-times"></i>
- </a>
- </div>
- </div>
- <div class="panel-body">
- <div class="row">
- <div class="col-md-12 space20">
- <button class="btn btn-orange add-row">
- Add New <i class="fa fa-plus"></i>
- </button>
- <div class="btn-group pull-right">
- <button data-toggle="dropdown" class="btn btn-green dropdown-toggle">
- Export <i class="fa fa-angle-down"></i>
- </button>
- <ul class="dropdown-menu dropdown-light pull-right">
- <li>
- <a href="#" class="export-pdf" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Save as PDF
- </a>
- </li>
- <li>
- <a href="#" class="export-png" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Save as PNG
- </a>
- </li>
- <li>
- <a href="#" class="export-csv" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Save as CSV
- </a>
- </li>
- <li>
- <a href="#" class="export-txt" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Save as TXT
- </a>
- </li>
- <li>
- <a href="#" class="export-xml" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Save as XML
- </a>
- </li>
- <li>
- <a href="#" class="export-sql" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Save as SQL
- </a>
- </li>
- <li>
- <a href="#" class="export-json" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Save as JSON
- </a>
- </li>
- <li>
- <a href="#" class="export-excel" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Export to Excel
- </a>
- </li>
- <li>
- <a href="#" class="export-doc" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Export to Word
- </a>
- </li>
- <li>
- <a href="#" class="export-powerpoint" data-table="#sample-table-2" data-ignoreColumn ="3,4">
- Export to PowerPoint
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="table-responsive">
- <table class="table table-striped table-hover" id="sample-table-2">
- <thead>
- <tr>
- <th>Full Name</th>
- <th>Role</th>
- <th>Phone</th>
- <th>Edit</th>
- <th>Delete</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Peter Clark</td>
- <td>UI Designer</td>
- <td>(641)-734-4763</td>
- <td>
- <a href="#" class="edit-row">
- Edit
- </a></td>
- <td>
- <a href="#" class="delete-row">
- Delete
- </a></td>
- </tr>
- <tr>
- <td>Nicole Bell</td>
- <td>Content Designer</td>
- <td>(741)-034-4573</td>
- <td>
- <a href="#" class="edit-row">
- Edit
- </a></td>
- <td>
- <a href="#" class="delete-row">
- Delete
- </a></td>
- </tr>
- <tr>
- <td>Steven Thompson</td>
- <td>Visual Designer</td>
- <td>(471)-543-4073</td>
- <td>
- <a href="#" class="edit-row">
- Edit
- </a></td>
- <td>
- <a href="#" class="delete-row">
- Delete
- </a></td>
- </tr>
- <tr>
- <td>Ella Patterson</td>
- <td>Web Editor</td>
- <td>(799)-994-9999</td>
- <td>
- <a href="#" class="edit-row">
- Edit
- </a></td>
- <td>
- <a href="#" class="delete-row">
- Delete
- </a></td>
- </tr>
- <tr>
- <td>Kenneth Ross</td>
- <td>Senior Designer</td>
- <td>(111)-114-1173</td>
- <td>
- <a href="#" class="edit-row">
- Edit
- </a></td>
- <td>
- <a href="#" class="delete-row">
- Delete
- </a></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- <!-- end: EXPORT DATA TABLE PANEL -->
- </div>
- </div>
|