File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table class="table table-bordered table-responsive table-hover" id="example">
        <tr>
          <th>CustomerID</th>
          <th>CompanyName</th>
          <th>ContactName</th>
          <th>PhoneNumber</th>
          <th>Fax</th>
          <th>StatusID</th>
        </tr>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
      var cdata = [{
            "CustomerID": "ALFKI",
            "CompanyName": "Alfreds Futterkiste",
            "ContactName": "Maria Anders",
            "Phone": "030-0074321",
            "Fax": "030-0076545",
            "StatusID": 3
        },
        {
            "CustomerID": "ANATR",
            "CompanyName": "Ana Trujillo Emparedados y helados",
            "ContactName": "Ana Trujillo",
            "Phone": "(5) 555-4729",
            "Fax": "(5) 555-3745",
            "StatusID": 3
        },
        {
            "CustomerID": "ANTON",
            "CompanyName": "Antonio Moreno Taquería",
            "ContactName": "Antonio Moreno",
            "Phone": "(5) 555-3932",
            "Fax": "",
            "StatusID": 4
        },
        {
            "CustomerID": "AROUT",
            "CompanyName": "Around the Horn",
            "ContactName": "Thomas Hardy",
            "Phone": "(171) 555-7788",
            "Fax": "(171) 555-6750",
            "StatusID": 4
        },
        {
            "CustomerID": "BERGS",
            "CompanyName": "Berglunds snabbköp",
            "ContactName": "Christina Berglund",
            "Phone": "0921-12 34 65",
            "Fax": "0921-12 34 67",
            "StatusID": 3
        },
        {
            "CustomerID": "BLAUS",
            "CompanyName": "Blauer See Delikatessen",
            "ContactName": "Hanna Moos",
            "Phone": "0621-08460",
            "Fax": "0621-08924",
            "StatusID": 5
        },
        {
            "CustomerID": "BLONP",
            "CompanyName": "Blondesddsl père et fils",
            "ContactName": "Frédérique Citeaux",
            "Phone": "88.60.15.31",
            "Fax": "88.60.15.32",
            "StatusID": 5
        },
        {
            "CustomerID": "BOLID",
            "CompanyName": "Bólido Comidas preparadas",
            "ContactName": "Martín Sommer",
            "Phone": "(91) 555 22 82",
            "Fax": "(91) 555 91 99",
            "StatusID": 4
        },
        {
            "CustomerID": "BONAP",
            "CompanyName": "Bon app'",
            "ContactName": "Laurence Lebihan",
            "Phone": "91.24.45.40",
            "Fax": "91.24.45.41",
            "StatusID": 1
        },
        {
            "CustomerID": "BOTTM",
            "CompanyName": "Bottom-Dollar Markets",
            "ContactName": "Elizabeth Lincoln",
            "Phone": "(604) 555-4729",
            "Fax": "(604) 555-3745",
            "StatusID": 2
        }
     ];
  
     var statusData = [{
            "StatusID": 1,
            "StatusDescription": "Excellant"
        },
        {
            "StatusID": 2,
            "StatusDescription": "Good"
        },
        {
            "StatusID": 3,
            "StatusDescription": "Average"
        },
        {
            "StatusID": 4,
            "StatusDescription": "Poor"
        },
        {
            "StatusID": 5,
            "StatusDescription": "Do Not Call"
        }
    ];
  
  statusOptions = $('<select class="form-control input-sm" id="ddlStatuses"/>');
  $.each(statusData, function () {
    statusOptions.append($('<option />').val(this.StatusID).text(this.StatusDescription));
  });
​
  var table = $('#example').DataTable({
    data: cdata,
      columns: [{
                data: "CustomerID",
                title: "Customer ID"
            },
            {
                data: "CompanyName",
                title: "Company Name"
            },
            {
                data: "ContactName",
                title: "Contact Name"
            },
            {
                data: "Phone",
                title: "Phone Number",
                orderDataType: "dom-text",
                type: "string"
            },
            {
                data: "Fax",
                title: "Fax Number",
                orderDataType: "dom-text",
                type: "string"
            },
            {
                data: "StatusID",
                title: "Status",
                orderDataType: "dom-select",
                type: "string"
            }
        ],
     
    columnDefs: [
      {
        targets: [1,2,3,4],
        visible: false
      },
      {
        targets: [5],
        render: function (data, type, row, display) {
          var selectedStatus = $(statusOptions).clone();
          
          if (type === 'display') {
            $(selectedStatus).find("option[value=" + data + "]").attr("selected", "selected");
            return $(selectedStatus).prop("outerHTML");
          }
          if (type === 'filter') {
            return $(selectedStatus).find("option[value=" + data + "]").text();
          }
          return data;
        }
      }
    ],
    initComplete: function () {
      var api = this.api();
      
      // Find selected options in each row
      $('select option', api.column(5).nodes()).each(function( index ) {
        if ($(this).prop('selected')) {
          console.log( $(this).text());
        }
      });
    }
  });
  
  
  $('#example').on('change', 'td select', function () {
    
    // Get the cell of the changed select
    var cell = table.cell($(this).closest('td'));
    
    // Get the changed value
    var val = $(this).val();
    
    // Set the cell data to the new value and draw - run render.
    cell.data( val ).draw();
    
  });
  
} );
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers