Bootstrap Datatable Example - Export into CSV | Web Technology Experts Notes

Bootstrap DataTables integration provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled consistently by Bootstrap. It also provide sorting and searching. It enable to download the data as csv.

HTML Part

<table cellspacing="0" class="display nowrap" id="example" style="width: 100%px;">
            <thead>
<tr>
                    <th>Employee Name</th>
                    <th>Designation</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Date</th>
                    <th>Salary</th>
                </tr>
</thead>
            
            <tbody>
<tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>320,800</td>
                </tr>
<tr>
                    <td>Fiona Green</td>
                    <td>Chief Operating Officer (COO)</td>
                    <td>San Francisco</td>
                    <td>48</td>
                    <td>2010/03/11</td>
                    <td>850,000</td>
                </tr>
<tr>
                    <td>Shou Itou</td>
                    <td>Regional Marketing</td>
                    <td>Tokyo</td>
                    <td>20</td>
                    <td>2011/08/14</td>
                    <td>163,000</td>
                </tr>
<tr>
                    <td>Michelle House</td>
                    <td>Integration Specialist</td>
                    <td>Sidney</td>
                    <td>37</td>
                    <td>2011/06/02</td>
                    <td>95,400</td>
                </tr>
<tr>
                    <td>Serge Baldwin</td>
                    <td>Data Coordinator</td>
                    <td>Singapore</td>
                    <td>64</td>
                    <td>2017/04/09</td>
                    <td>138,575</td>
                </tr>
<tr>
                    <td>Zenaida Frank</td>
                    <td>Software Engineer</td>
                    <td>New York</td>
                    <td>63</td>
                    <td>2010/01/04</td>
                    <td>125,250</td>
                </tr>
<tr>
                    <td>Zorita Serrano</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>56</td>
                    <td>2017/06/01</td>
                    <td>115,000</td>
                </tr>
<tr>
                    <td>Jennifer Acosta</td>
                    <td>Junior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>43</td>
                    <td>2013/02/01</td>
                    <td>75,650</td>
                </tr>
<tr>
                    <td>Cara Stevens</td>
                    <td>Sales Assistant</td>
                    <td>New York</td>
                    <td>46</td>
                    <td>2011/12/06</td>
                    <td>145,600</td>
                </tr>
<tr>
                    <td>Hermione Butler</td>
                    <td>Regional Director</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2011/03/21</td>
                    <td>356,250</td>
                </tr>
<tr>
                    <td>Lael Greer</td>
                    <td>Systems Administrator</td>
                    <td>London</td>
                    <td>21</td>
                    <td>2009/02/27</td>
                    <td>103,600</td>
                </tr>
<tr>
                    <td>Jonas Alexander</td>
                    <td>Developer</td>
                    <td>San Francisco</td>
                    <td>30</td>
                    <td>2010/07/14</td>
                    <td>86,600</td>
                </tr>
<tr>
                    <td>Shad Decker</td>
                    <td>Regional Director</td>
                    <td>Edinburgh</td>
                    <td>51</td>
                    <td>2008/11/13</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Michael Bruce</td>
                    <td>Javascript Developer</td>
                    <td>Singapore</td>
                    <td>29</td>
                    <td>2011/06/27</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Donna Snider</td>
                    <td>Customer Support</td>
                    <td>New York</td>
                    <td>27</td>
                    <td>2011/01/25</td>
                    <td>112,000</td>
                </tr>
</tbody>
        </table>

CSS Part


<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"></link>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"></link>

JavaScript Part


<script language="javascript" src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js" type="text/javascript"></script>         
<script language="javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js" type="text/javascript"></script>

    $(document).ready(function() {
        $('#example').DataTable({
            "order": [[0, "asc"]]/* First column in ascending order */,
            dom: 'Bfrtip',
            "pageLength": 5, /* Number of records */
            buttons: [
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
            ]
        });
    });

Monday 17 April 2017

Bootstrap Datatable Example - Export into CSV

Best Related Posts are Following: