File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/b-print-1.5.6/sl-1.3.0/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/b-print-1.5.6/sl-1.3.0/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
​
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
​
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
            <script src="https://cdn.datatables.net/plug-ins/1.10.19/dataRender/datetime.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
    <body>
    <div class="container">
 
      <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Name1</th>
            <th>Position1</th>
            <th>Office1</th>
            <th>Age1</th>
            <th>Start date1</th>
            <th>Salary1</th>
            <th>Name2</th>
            <th>Position2</th>
            <th>Office2</th>
            <th>Age2</th>
            <th>Start date2</th>
            <th>Salary2</th>
            <th>Name3</th>
            <th>Position3</th>
            <th>Office3</th>
            <th>Age3</th>
            <th>Start date3</th>
            <th>Salary3</th>
            <th>Name4</th>
            <th>Position4</th>
            <th>Office4</th>
            <th>Age4</th>
            <th>Start date4</th>
            <th>Salary4</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
​
    </tbody>
</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
 
/*! Bootstrap integration for DataTables' Editor
 * ©2015 SpryMedia Ltd - datatables.net/license
 */
​
(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables.net-bs', 'datatables.net-editor'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                root = window;
            }
​
            if ( ! $ || ! $.fn.dataTable ) {
                $ = require('datatables.net-bs')(root, $).$;
            }
​
            if ( ! $.fn.dataTable.Editor ) {
                require('datatables.net-editor')(root, $);
            }
​
            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}(function( $, window, document, undefined ) {
'use strict';
var DataTable = $.fn.dataTable;
​
/*
 * Set the default display controller to be our bootstrap control 
 */
DataTable.Editor.defaults.display = "bootstrap";
​
​
/*
 * Alter the buttons that Editor adds to TableTools so they are suitable for bootstrap
 */
var i18nDefaults = DataTable.Editor.defaults.i18n;
i18nDefaults.create.title = "<h3>"+i18nDefaults.create.title+"</h3>";
i18nDefaults.edit.title = "<h3>"+i18nDefaults.edit.title+"</h3>";
i18nDefaults.remove.title = "<h3>"+i18nDefaults.remove.title+"</h3>";
​
var tt = DataTable.TableTools;
if ( tt ) {
    tt.BUTTONS.editor_create.formButtons[0].className = "btn btn-primary";
    tt.BUTTONS.editor_edit.formButtons[0].className = "btn btn-primary";
    tt.BUTTONS.editor_remove.formButtons[0].className = "btn btn-danger";
}
​
​
/*
 * Change the default classes from Editor to be classes for Bootstrap
 */
$.extend( true, $.fn.dataTable.Editor.classes, {
    "header": {
        "wrapper": "DTE_Header modal-header"
    },
    "body": {
        "wrapper": "DTE_Body modal-body"
    },
    "footer": {
        "wrapper": "DTE_Footer modal-footer"
    },
    "form": {
        "tag": "form-horizontal",
        "button": "btn btn-default",
        "buttonInternal": "btn btn-default"
    },
    "field": {
        "wrapper": "DTE_Field",
        "label":   "col-lg-4 control-label",
        "input":   "col-lg-8 controls",
        "error":   "error has-error",
        "msg-labelInfo": "help-block",
        "msg-info":      "help-block",
        "msg-message":   "help-block",
        "msg-error":     "help-block",
        "multiValue":    "well well-sm multi-value",
        "multiInfo":     "small",
        "multiRestore":  "well well-sm multi-restore"
    }
} );
​
$.extend( true, DataTable.ext.buttons, {
    create: {
        formButtons: {
            className: 'btn-primary'
        }
    },
    edit: {
        formButtons: {
            className: 'btn-primary'
        }
    },
    remove: {
        formButtons: {
            className: 'btn-danger'
        }
    }
} );
​
​
console.log('bellas');
​
/*
 * Bootstrap display controller - this is effectively a proxy to the Bootstrap
 * modal control.
 */
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
    "init": function ( dte ) {
        var content = $(
            '<div class="modal fade DTED">'+
                '<div class="modal-dialog">'+
                    '<div class="modal-content"/>'+
                '</div>'+
            '</div>'
        );
        var conf = {
            content: content,
            close: $('<button class="close">&times;</div>')
                .on('click', function () {
                    dte.close('icon');
                }),
            modalContent: content.find('div.modal-content'),
            shown: false
        };
​
        $(document).on('click', 'div.modal', function (e) {
            if ( $(e.target).hasClass('modal') && conf.shown ) {
                dte.background();
            }
        } );
​
        // Add `form-control` to required elements
        dte.on( 'displayOrder.dtebs', function ( e, display, action, form ) {
            $.each( dte.s.fields, function ( key, field ) {
                $('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
                    .addClass( 'form-control' );
            } );
        } );
​
        dte._bootstrapDisplay = conf;
​
        return DataTable.Editor.display.bootstrap;
    },
​
    "open": function ( dte, append, callback ) {
        var conf = dte._bootstrapDisplay;
​
        if ( conf.shown ) {
            if ( callback ) {
                callback();
            }
            return;
        }
​
        conf.shown = true;
​
        var content = conf.modalContent;
        content.children().detach();
        content.append( append );
​
        $('div.modal-header', append).prepend( conf.close );
​
        $(conf.content)
            .one('shown.bs.modal', function () {
                // Can only give elements focus when shown
                if ( dte.s.setFocus ) {
                    dte.s.setFocus.focus();
                }
​
                if ( callback ) {
                    callback();
                }
            })
            .one('hidden', function () {
                conf.shown = false;
            })
            .appendTo( 'body' )
            .modal( {
                backdrop: "static",
                keyboard: false
            } );
    },
​
    "close": function ( dte, callback ) {
        var conf = dte._bootstrapDisplay;
​
        if ( !conf.shown ) {
            if ( callback ) {
                callback();
            }
            return;
        }
​
        $(conf.content)
            .one( 'hidden.bs.modal', function () {
                $(this).detach();
            } )
            .modal('hide');
​
        conf.shown = false;
​
        if ( callback ) {
            callback();
        }
    },
​
    node: function ( dte ) {
        return dte._bootstrapDisplay.content[0];
    }
} );
​
return DataTable.Editor;
}));
​
​
​
var editor;
​
// Display an Editor form that allows the user to pick the CSV data to apply to each column
function selectColumns ( editor, csv, header ) {
    var selectEditor = new $.fn.dataTable.Editor();
    var fields = editor.order();
 
    for ( var i=0 ; i<fields.length ; i++ ) {
        var field = editor.field( fields[i] );
 
        selectEditor.add( {
            label: field.label(),
            name: field.name(),
            type: 'select',
            options: header,
            def: header[i]
        } );
    }
 
    selectEditor.create({
        title: 'Map CSV fields',
        buttons: 'Import '+csv.length+' records',
        message: 'Select the CSV column you want to use the data from for each field.'
    });
 
    selectEditor.on('submitComplete', function (e, json, data, action) {
        // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
        editor.create( csv.length, {
            title: 'Confirm import',
            buttons: 'Submit',
            message: 'Click the <i>Submit</i> button to confirm the import of '+csv.length+' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
        } );
 
        for ( var i=0 ; i<fields.length ; i++ ) {
            var field = editor.field( fields[i] );
            var mapped = data[ field.name() ];
 
            for ( var j=0 ; j<csv.length ; j++ ) {
                field.multiSet( j, csv[j][mapped] );
            }
        }
    } );
}
​
$(document).ready(function() {
   
  //$.fn.dataTable.render.moment("M/D/YYYY");
  editor = new $.fn.dataTable.Editor({
    table: "#example",
    fields: [
            {
                label: 'Name:',
                name: 'name'
            },
            {
                label: 'Position:',
                name: 'position'
            },
            {
                label: 'Office:',
                name: 'office'
            },
            {
                label: 'Age:',
                name: 'age'
            },
            {
                label: 'Start date:',
                name: 'start_date',
                type: 'datetime',
                format: 'YYYY/M/D'
            },
            {
                label: 'Salary:',
                name: 'salary'
            },
            {
                label: 'Name:',
                name: 'name1'
            },
            {
                label: 'Position:',
                name: 'position1'
            },
            {
                label: 'Office:',
                name: 'office1'
            },
            {
                label: 'Age:',
                name: 'age1'
            },
            {
                label: 'Start date:',
                name: 'start_date1',
                type: 'datetime',
                format: 'YYYY/M/D'
            },
            {
                label: 'Salary:',
                name: 'salary1'
            },
            {
                label: 'Name:',
                name: 'name2'
            },
            {
                label: 'Position:',
                name: 'position2'
            },
            {
                label: 'Office:',
                name: 'office2'
            },
            {
                label: 'Age:',
                name: 'age2'
            },
            {
                label: 'Start date:',
                name: 'start_date2',
                type: 'datetime',
                format: 'YYYY/M/D'
            },
            {
                label: 'Salary:',
                name: 'salary2'
            },
            {
                label: 'Name:',
                name: 'name3'
            },
            {
                label: 'Position:',
                name: 'position3'
            },
            {
                label: 'Office:',
                name: 'office3'
            },
            {
                label: 'Age:',
                name: 'age3'
            },
            {
                label: 'Start date:',
                name: 'start_date3',
                type: 'datetime',
                format: 'YYYY/M/D'
            },
            {
                label: 'Salary:',
                name: 'salary3'
            },
            {
                label: 'Name:',
                name: 'name4'
            },
            {
                label: 'Position:',
                name: 'position4'
            },
            {
                label: 'Office:',
                name: 'office4'
            },
            {
                label: 'Age:',
                name: 'age4'
            },
            {
                label: 'Start date:',
                name: 'start_date4',
                type: 'datetime',
                format: 'YYYY/M/D'
            },
            {
                label: 'Salary:',
                name: 'salary4'
            }
    ]
  });
​
    // Upload Editor - triggered from the import button. Used only for uploading a file to the browser
    var uploadEditor = new $.fn.dataTable.Editor( {
        fields: [ {
            label: 'CSV file:',
            name: 'csv',
            type: 'upload',
            ajax: function ( files ) {
                // Ajax override of the upload so we can handle the file locally. Here we use Papa
                // to parse the CSV.
                Papa.parse(files[0], {
                    header: true,
                    skipEmptyLines: true,
                    complete: function (results) {
                        if ( results.errors.length ) {
                            console.log( results );
                            uploadEditor.field('csv').error( 'CSV parsing error: '+ results.errors[0].message );
                        }
                        else {
                            uploadEditor.close();
                            selectColumns( editor, results.data, results.meta.fields );
                        }
                    }
                });
            }
        } ]
    } );
 
  $("#example").DataTable({
    dom: "Bfrtip",
    columns: [
            { data: 'name' },
            { data: 'position' },
            { data: 'office' },
            { data: 'age' },
            { data: 'start_date' },
            { data: 'salary' },
            { data: 'name1' },
            { data: 'position1' },
            { data: 'office1' },
            { data: 'age1' },
            { data: 'start_date1' },
            { data: 'salary1' },
            { data: 'name2' },
            { data: 'position2' },
            { data: 'office2' },
            { data: 'age2' },
            { data: 'start_date2' },
            { data: 'salary2' },
            { data: 'name3' },
            { data: 'position3' },
            { data: 'office3' },
            { data: 'age3' },
            { data: 'start_date3' },
            { data: 'salary3' },
            { data: 'name4' },
            { data: 'position4' },
            { data: 'office4' },
            { data: 'age4' },
            { data: 'start_date4' },
            { data: 'salary4' },
    ],
    select: true,
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit", editor: editor },
      { extend: "remove", editor: editor },
            {
                text: 'Import CSV',
                action: function () {
                    uploadEditor.create( {
                        title: 'CSV file import'
                    } );
                }
            },
    ]
  });
  
​
});
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers