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="tabbing">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Table with Bu</title>
     <link rel="stylesheet" type="text/css" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css"/>
 <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"/> 
    
    
<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>
</head>
<body><i class='fa fa-search' aria-hidden='true'></i>
    <table class="display" id="example1">
        
  <thead>
    <tr>
        <th><i class='fa fa-search' aria-hidden='true'></i>First</th>
        <th><i class='fa fa-search' aria-hidden='true'></i>Last</th>
        <th><i class='fa fa-search' aria-hidden='true'></i>Position</th>
        <th><i class='fa fa-search' aria-hidden='true'></i>Office</th>
        <th><i class='fa fa-search' aria-hidden='true'></i>Start</th>
        <th><i class='fa fa-search' aria-hidden='true'></i>Salary</th>
        <th><i class='fa fa-search' aria-hidden='true'></i>Changed</th>
        
    </tr>
        </thead>
        <tbody></tbody>
 
​
</body>
</html>
 
       $(document).ready(function () {
           
           
 
var col =        [
    {data:"first_name","width":"100px"},
    {data:"last_name"},
    {data:"position"},
    {data:"office"},
    {data:"start_date"},
    {data:"salary"},
    {data:null, render:function(){return "<input type='checkbox'/>";}}
        ];
           
           
            var total = dataSet.length;
            var thistable = $('#example1').DataTable({
                
                // this is the line that causes the tabbing
                
                columnDefs: [{ targets: "_all", render: function (a, b, c, d) { var g = (total * d.col + d.row) + 1; return "<input type='text' tabindex='" + g +"' value='" +  a + "'>"; }}],
       data:dataSet,
       select:{style:'single'},
        columns:col,
        dom: 'Bfrtip',
        buttons: [
           'excelHtml5',
           'csvHtml5',
           'pdfHtml5',
           {"text":"Update Row", "className":"remove", 
                action:function(){
    
                   thistable.row(".selected").data(fakeUpdate).invalidate().draw();
               
​
                }
           }
]
} );
           
         $('#example1 th').off();
   
        $('#example1').on("click", "th", function(evtObj){
            if(evtObj.target.nodeName == "SPAN") {
                alert("search")
            }
            else {
                alert("sorting")
            }
            console.log(evtObj.target)
            evtObj.stopPropagation();
            evtObj.preventDefault();
            return false;
        })
       })
​
​
​
        // 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