File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!--@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")-->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
​
    <!-- jQuery -->
​
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
​
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
​
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
</head>
<body>
  <table name="item" id="item" style=" border-style: ridge" class="test" width="100%" cellspacing="0">
            <thead>
                <tr style="border-style: none !important">
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr class="firstLine">
                    <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>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                </tr>
            </tbody>
​
  </table>
  <hr/>
  <div id="myButtons"></div>
     <div class="footer">
        <p>Footer</p>
    </div>
  </body>
CSS
 
  input:focus::placeholder {
            color: transparent;
        }
        tr td{
            border-bottom: 1px solid #D3D3D3;
        }
        tfoot {
            display: table-header-group;
            
        }
​
        
        tr{
            border: none;
        }
        th {
            position: relative;
            width: auto;
       
            background: #f5f5f5 !important;
            color: #4771b0;
            font-weight: 700;
            padding: 6px 5px 4px !important;
        }
​
        .test {
               border: 1px solid #c1c1c1;
            text-align: left;
        }
  .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: red;
            color: white;
            text-align: center;
        }
  .dt-button.red {
            color: red;
            background: black;
            position: relative;
            display: inline-block;
        }
JavaScript
 
$(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#item tfoot th').each(function () {
​
                $(this).html('<input type="text" style="color: black" placeholder="(All)" />');
            });
​
            // DataTable
            var otable = $('#item').DataTable({
                "orderCellsTop": true,
                "paging": false,
                //"dom": 'lrtip',
                "bInfo": false,
                "bLengthChange": false,
                "pageLength": 200,
                "fixedHeader": true,
                "language": {
                    "emptyTable": "No data available in table"
                },
                dom: 'rtip',
​
                buttons: {
​
                    buttons: [
​
                        {
                            extend: 'excel',
                            text: 'Export',
                            className: 'red',
                            titleAttr: "Export to excel"
                        }
                    ]
                }
​
            });
            otable.buttons().container().appendTo( $('#myButtons') );
​
            // Apply the search
            otable.columns().every(function () {
​
                var that = this;
                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });
​
​
3 errors
Line 1: Unmatched '{'.
Line 51: Expected ')' and instead saw ''.
Line 51: Missing semicolon.
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers