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://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"></script>
    <link href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.js"></script>
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
</head>
​
<body>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </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 editor = new $.fn.dataTable.Editor({
        table: '#example',
        fields: [{
                name: "first_name",
                label: "First Name"
            },
            {
                name: "last_name",
                label: "Last Name"
            },
            {
                name: "position",
                label: "Position"
            },
            {
                name: "office",
                label: "Office"
            },
            {
                name: "start_date",
                label: "Start Date"
            },
            {
                name: "salary",
                label: "Salary"
            }
        ]
    });
    var table = $('#example').DataTable({
        processing: true,
        serverSide: true,
        ajax: "/ssp/ids-objects.php",
        columns: [{
                data: "first_name"
            },
            {
                data: "last_name"
            },
            {
                data: "position"
            },
            {
                data: "office"
            },
            {
                data: "start_date"
            },
            {
                data: "salary"
            }
        ],
        select: 'multi',
        buttons: [{
                text: '1 - selection from rows().indexes()',
                action: function(e, dt, node, config) {
                    editor.edit(dt.rows({
                        selected: true
                    }).indexes());
                }
            },
            {
                text: '2 - selection from rows()',
                action: function(e, dt, node, config) {
                    editor.edit(dt.rows({
                        selected: true
                    }));
                }
            },
            {
                text: '3 - selection from selector-modifier',
                action: function(e, dt, node, config) {
                    editor.edit({
                        selected: true
                    });
                }
            }
        ],
        dom: "Bfrtip",
    });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers