Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <link rel="stylesheet" href="//cdn.datatables.net/2.0.7/css/dataTables.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.7.1/css/searchBuilder.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.min.css">
</head>
<body>
  
  <table id="example" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ayyıldız Yılmaz</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Yıldız Yılmaz</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Can Ayyıldız</td>
            <td>Junior Developer</td>
            <td>New York</td>
            <td>25</td>
            <td>2019-05-17</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Mehmet Yılmaz</td>
            <td>Marketing Manager</td>
            <td>Paris</td>
            <td>45</td>
            <td>2004-10-10</td>
            <td>$129,900</td>
        </tr>
        <tr>
            <td>Şeyma Yıldız</td>
            <td>HR Specialist</td>
            <td>London</td>
            <td>30</td>
            <td>2015-09-03</td>
            <td>$89,500</td>
        </tr>
        <tr>
            <td>Allan YILMAZ</td>
            <td>HR Specialist</td>
            <td>London</td>
            <td>30</td>
            <td>2015-09-03</td>
            <td>$89,500</td>
        </tr>
​
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
​
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
​
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
    <script src="https://cdn.datatables.net/2.0.7/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/searchbuilder/1.7.1/js/dataTables.searchBuilder.min.js"></script>
    <script src="https://cdn.datatables.net/searchbuilder/1.7.1/js/searchBuilder.dataTables.js"></script>
    <script src="https://cdn.datatables.net/datetime/1.5.2/js/dataTables.dateTime.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/2.0.7/sorting/datetime-moment.js"></script>
    <script src="//cdn.datatables.net/plug-ins/2.0.7/filtering/type-based/accent-neutralise.js"></script>
  
  <script>
    $(document).ready(function() {
           
            var table = $('#example').DataTable({              
              dom:"Qf",
                search: {
                    caseInsensitive: true
                },
              
            });
});
    
</script>
​
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
aycanozarpacipro
0viewers