<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
<link href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />        
      
  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>
<body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
                                                        </tr>
      </table>
    </div>
</body>
</html>
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
 
const dataExample = [{'name': 'Pepe',
                'position': 'System Architect'},  
                {'name': 'Garrett',
                'position': 'Director'}];
const columnsExample = [{
        data: "name",
        title: "Name",
        render: function(data, type, full, meta) {
          if (type === 'display') {
            return '<input id="id' + data  + '" value="'  + data + '"/>';          
          } 
          
          return data;
        }
    },
    {
        data: "position",
        title: "Position"
    }
    ];
var table = new DataTable('#example', {
  paginate:true,
  data: dataExample,
  columns: columnsExample});
table.on('input', 'td input', function () {
  let row = table.row(this.closest('tr')).data();
  
  console.log('Input value', this.value);
  console.log('Row data', row);
});
3 warnings
Line 3: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 8: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 34: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers