Tutorial JQuary Table Export
1. Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Export Plugin | Bootstrap 4</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.core.min.js"></script>
<script src="http://nicesnippets.com/demo/tableexport.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-12">
<h1>Table Export Plugin</h1>
<table class="table table-bordered table-hover" data-name="cool-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Birth Date</th>
<th>Gender</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael Alexander</td>
<td>26/10/1997</td>
<td>Male</td>
<td>Chicago</td>
</tr>
<tr>
<td>2</td>
<td>Johny Munro</td>
<td>19/12/1995</td>
<td>Male</td>
<td>San Francisco</td>
</tr>
<tr>
<td>3</td>
<td>Maria Holdwin</td>
<td>11/12/2003</td>
<td>Female</td>
<td>Canada</td>
</tr>
<tr>
<td>4</td>
<td>Justin Jenner</td>
<td>25/10/1997</td>
<td>Male</td>
<td>America</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
2. Css Code
body{
font-family: 'Ropa Sans', sans-serif;
margin-top: 100px;
}
.tableexport-caption button{
margin-right: 5px;
border-radius: 0px;
}
.xlsx:before, .xls:before, .csv:before, .txt:before {
margin-right: 10px;
font-family: "FontAwesome";
content: "\f019";
}
3. Javascript Code
$("table").tableExport({
formats: ["xlsx","xls", "csv", "txt"]
});
Silahkan tempatkan kode javascript nya di bawah body, kalian dapat menjalankan script diatas secara online.
Tutorial Bootstrap Table JQuery Export Xlsx Xls Csv Txt
Reviewed by kilhem
on
8/01/2018 07:27:00 pm
Rating:
Reviewed by kilhem
on
8/01/2018 07:27:00 pm
Rating:
No comments:
Jangan malu untuk berkomentar