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 name="description" content="Standard with Buttons">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Table with Bu</title>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/> 
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css"/> 
    
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
    <table class="display" id="example1">
        
    </table>
    <tr>
        <th>First</th>
        <th>Last</th>
        <th>Position</th>
        <th>Office</th>
        <th>Start</th>
        <th>Salary</th>
        <th>Changed</th>
        
    </tr>
    <table class="display" id="example2">
        
    </table>
​
</body>
</html>
 
       $(document).ready(function () {
         sel2Data = [
{ "text": "1 (highest)", "id": "1" },
{ "text": "2", "id": "2" },
{ "text": "3", "id": "3" },
{ "text": "4", "id": "4" },
{ "text": "5 (lowest)", "id": "5" }
];
           
           
          var fakeUpdate =         {
            "first_name": "Angelica",
            "last_name": "Ramos",
            "position": "Vice Executive Officer (VCEO)",
            "office": null,
            "start_date": "6th Jun 75",
            "salary": "$900,000"
        };
​
var col =        [
    {data:"first_name", title:"first"},
    {data:"last_name"},
    {data:"position"},
    {data:"office"},
    {data:"start_date"},
    {data:"salary"},
    {data:null, render:function(){return "<select></select> ";}}
        ];
           
           
 var thistable  = $('#example1').DataTable( {
       data:dataSet,
       select:{style:'single'},
        columns:col,
        dom: 'frtip',
​
         initComplete: function(){
             $("#example1 select").select2({data:sel2Data, width:"150px"})
             
         }
​
 } );
           
        });
​
​
​
        // DataTable data set used
        var dataSet = [
        {
            "first_name": "Airi",
            "last_name": "Satou",
            "position": "Accountant",
            "office": "Tokyo",
            "start_date": "28th Nov 08",
            "salary": "$162,700"
        },
        {
            "first_name": "Angelica",
            "last_name": "Ramos",
            "position": "Chief Executive Officer (CEO)",
            "office": "London",
            "start_date": "9th Oct 09",
            "salary": "$1,200,000"
        },
        {
            "first_name": "Ashton",
            "last_name": "Cox",
            "position": "Junior Technical Author",
            "office": "San Francisco",
            "start_date": "12th Jan 09",
            "salary": "$86,000"
        },
        {
            "first_name": "Bradley",
            "last_name": "Greer",
            "position": "Software Engineer",
            "office": "London",
            "start_date": "13th Oct 12",
            "salary": "$132,000"
        },
        {
            "first_name": "Brenden",
            "last_name": "Wagner",
            "position": "Software Engineer",
            "office": "San Francisco",
            "start_date": "7th Jun 11",
            "salary": "$206,850"
        },
        {
            "first_name": "Brielle",
            "last_name": "Williamson",
            "position": "Integration Specialist",
            "office": "New York",
            "start_date": "2nd Dec 12",
            "salary": "$372,000"
        },
        {
            "first_name": "Bruno",
            "last_name": "Nash",
            "position": "Software Engineer",
            "office": "London",
            "start_date": "3rd May 11",
            "salary": "$163,500"
        },
        {
            "first_name": "Caesar",
            "last_name": "Vance",
            "position": "Pre-Sales Support",
            "office": "New York",
            "start_date": "12th Dec 11",
            "salary": "$106,450"
        },
        {
            "first_name": "Cara",
            "last_name": "Stevens",
            "position": "Sales Assistant",
            "office": "New York",
            "start_date": "6th Dec 11",
            "salary": "$145,600"
        },
        {
            "first_name": "Cedric",
            "last_name": "Kelly",
            "position": "Senior Javascript Developer",
            "office": "Edinburgh",
            "start_date": "29th Mar 12",
            "salary": "$433,060"
        }
        ]
Output

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

Dismiss x
public
Bin info
bindridpro
0viewers