File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DataTables Test Buttons</title>
​
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />
​
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <h3>DataTables Test Buttons</h3>
            <table id="dttest" class="table-condensed table-striped table-bordered compact dataTable" cellspacing="0">
            <thead></thead>
            </table>
        </div>
        <div class="col-md-3"></div>
        </div>
</body>
</html>
​
JavaScriptSaved
 
    var table;
​
    $(document).ready(function () {
​
        setHeader();
        table = $('#dttest').DataTable({
            data: dataset,
            "lengthMenu": [10, 50, 100],
            "scrollCollapse": true,
            "order": [[0, 'asc']],
            "orderClasses": false,
            "colReorder": true,
            "processing": true,
            columns: [
                { data: "ID" },
                { data: "Flag" },
                { data: "Zone", "render": input_field, "defaultContent": "" },
                { data: "Class", "render": input_field, "defaultContent": "" },
                { data: "Units" },
                { data: "Value" },
                { data: "Year" }
            ],
            "columnDefs": [
                { "orderDataType": "dom-input", "targets": [2, 3], "type": "string" }
            ],
            "buttons": [
                $.extend(true, {}, buttonCommon, {
                    extend: 'copy',
                    exportOptions: { columns: ':visible' }
                }),
                $.extend(true, {}, buttonCommon, {
                    extend: 'csv',
                    exportOptions: { columns: ':visible' }
                }),
                $.extend(true, {}, buttonCommon, {
                    extend: 'print',
                    exportOptions: { columns: ':visible' }
                }),
            ]
        });
​
​
    table.buttons().container()
    .insertAfter('#dttest_length');
​
​
    });  // end document ready
​
    function setHeader() {
        $tr = $('<tr>');
        $tr.append($('<th>').text("ID"));
        $tr.append($('<th>').text("Flag"));
        $tr.append($('<th>').text("Zone"));
        $tr.append($('<th>').text("Class"));
        $tr.append($('<th>').text("Units"));
        $tr.append($('<th>').text("Value"));
        $tr.append($('<th>').text("Year"));
        $tr.appendTo('#dttest thead');
    }
​
    var buttonCommon = {
        exportOptions: {
            format: {
                body: function (data, column, row) {
                        // something else here to handle non-input cells with special characters
                    return $(data).val();
                }
            }
        }
    };
​
    var input_field = function (data, type, full, meta) {
        data = $.trim(data);
        var row = meta.row;
        var col = meta.col;
        var colName = meta.settings.aoColumns[col].data;
        return '<input class="form-control input-xs input-width-sm" maxlength="4" id="' + colName + '" name="EditItems[' + row + '].' + colName + '" value="' + data + '" type="text"/>';
    };
​
    // custom ordering for input columns in dataTable
    $.fn.dataTable.ext.order['dom-input'] = function (settings, col) {
        return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
            return $('input', td).val();
        });
    };
​
    var dataset = [{
        "ID": 4,
        "Flag": "#A=ST",
        "Zone": null,
        "Class": "N100",
        "Units": 1.00,
        "Value": 610759.0,
        "Year": 2011
    }, {
        "ID": 5,
        "Flag": "#C",
        "Zone": null,
        "Class": "N101",
        "Units": 1.00,
        "Value": 62707.0,
        "Year": 2011
    }, {
        "ID": 6,
        "Flag": "B&G",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 610759.0,
        "Year": 2011
    }, {
        "ID": 7,
        "Flag": "#D",
        "Zone": null,
        "Class": null,
        "Units": 1.00,
        "Value": 1308000.0,
        "Year": 2011
    }, {
        "ID": 8,
        "Flag": "#A",
        "Zone": null,
        "Class": null,
        "Units": 1.00,
        "Value": 109879.0,
        "Year": 2011
    }, {
        "ID": 9,
        "Flag": "#C",
        "Zone": null,
        "Class": "R800",
        "Units": 0.00,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 10,
        "Flag": "B&G",
        "Zone": null,
        "Class": "R800",
        "Units": 1.50,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 11,
        "Flag": "B&G",
        "Zone": null,
        "Class": "R800",
        "Units": 0.00,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 12,
        "Flag": "#A=ST",
        "Zone": null,
        "Class": "R800",
        "Units": 2.00,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 13,
        "Flag": "#A",
        "Zone": null,
        "Class": "R800",
        "Units": 0.00,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 14,
        "Flag": "#A",
        "Zone": null,
        "Class": "R800",
        "Units": 0.00,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 15,
        "Flag": "#D",
        "Zone": null,
        "Class": "C128",
        "Units": 0.00,
        "Value": 274505.0,
        "Year": 2011
    }, {
        "ID": 16,
        "Flag": "#A",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 289859.0,
        "Year": 2011
    }, {
        "ID": 17,
        "Flag": "#C",
        "Zone": null,
        "Class": "C100",
        "Units": 0.00,
        "Value": 10862019.0,
        "Year": 2011
    }, {
        "ID": 18,
        "Flag": "#D",
        "Zone": null,
        "Class": "C113",
        "Units": 0.00,
        "Value": 76859.0,
        "Year": 2011
    }, {
        "ID": 19,
        "Flag": "#C",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 1380008.0,
        "Year": 2011
    }, {
        "ID": 20,
        "Flag": "#A",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 249750.0,
        "Year": 2011
    }, {
        "ID": 21,
        "Flag": "B&G",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 253900.0,
        "Year": 2011
    }, {
        "ID": 22,
        "Flag": "#D",
        "Zone": null,
        "Class": "R800",
        "Units": 0.00,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 23,
        "Flag": "#A",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 677320.0,
        "Year": 2011
    }, {
        "ID": 24,
        "Flag": "#A",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 538028.0,
        "Year": 2011
    }, {
        "ID": 25,
        "Flag": "#A",
        "Zone": null,
        "Class": null,
        "Units": 0.00,
        "Value": 75603.0,
        "Year": 2011
    }, {
        "ID": 26,
        "Flag": "#C",
        "Zone": null,
        "Class": "R800",
        "Units": 0.00,
        "Value": null,
        "Year": 2011
    }, {
        "ID": 27,
        "Flag": "#C",
        "Zone": null,
        "Class": "R100",
        "Units": 0.00,
        "Value": 325970.0,
        "Year": 2011
    }, {
        "ID": 28,
        "Flag": "#A",
        "Zone": null,
        "Class": "R200",
        "Units": 0.00,
        "Value": 250000.0,
        "Year": 2011
    }
    ];
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers