Bootstrap Snippet Export table data to excel in csv format. using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<container>
    <a href="#" class="export"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-download-alt"></span> Export Table data into Excel
    </button></a>
    </container>
    <div id="dvData">
    <table class="table table-condensed datatable table-bordered">
  <thead>
        <tr>
            <th>Action</th>
            <th>ID</th>
            <th>AD Category</th>
            <th>AD Type</th>
             <th>AD Status</th>
              <th>Brand Name</th>
               <th>Model</th>
                <th>Sim Capacity</th>
                 <th>Operating System</th>
                  <th>Display</th>
                   <th>Camera</th>
                    <th>Camera Pixel</th>
                     <th>Network</th>
                      <th>Connectivity</th>
                       <th>Memory-Internal</th>
                        <th>Memory-Exterl</th>
                         <th>Keypad Type</th>
                          <th>Mobile_Processor</th>
                           <th>Mobile_Radio</th>
                            <th>Price</th>
                             <th>City</th>
                             
                               <th>Description</th>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
table {
  font-family: 'Arial';
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid #00cccc;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
table th, table td {
  color: #999;
  border: 1px solid #eee;
  padding: 12px 35px;
  border-collapse: collapse;
}
table th {
  background: #00cccc;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}
table th.last {
  border-right: none;
}
body{
  font-family: 'Vollkorn', serif;
color:#ccc;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
$(document).ready(function () {
    function exportTableToCSV($table, filename) {
        var $rows = $table.find('tr:has(td)'),
            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character
            // actual delimiter characters for CSV format
            colDelim = '","',
            rowDelim = '"\r\n"',
            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),
                    $cols = $row.find('td');
                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();
                    return text.replace('"', '""'); // escape double quotes
                }).get().join(tmpColDelim);
            }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"',
            // Data URI
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
        $(this)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Export table data to excel in csv format."
Bootstrap 3.2.0 Snippet by vikaschauhan

Related: See More

Questions / Comments:

"Export table data to excel in csv format." Bootstrap 3.2.0 Snippet by vikaschauhan

Related: See More

Questions / Comments:

"Export table data to excel in csv format."
Bootstrap 3.2.0 Snippet by vikaschauhan