File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
​
​
    <script src="https://code.jquery.com/jquery-3.1.0.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>
 
​
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/js/froala_editor.pkgd.min.js"></script>
    
        <style>
        div.DTED_Lightbox_Wrapper {
          margin-left: -500px;
          width: 1000px;
        }
        div.DTE_Body div.DTE_Body_Content div.DTE_Field>label {
            width: 10%;
        }
        div.DTE_Body div.DTE_Body_Content div.DTE_Field>div.DTE_Field_Input {
            width: 90%;
        }
        div.DTE_Body div.DTE_Body_Content div.DTE_Field {
            padding: 5px 20px;
        }
    </style>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
​
      
      </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
 
​
​
(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables', 'datatables-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
'use strict';
​
​
if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}
​
var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;
​
​
_fieldTypes.froala = {
    create: function ( conf ) {
        var that = this;
        var id = DataTable.Editor.safeId( conf.id );
​
        conf._input = $('<div><textarea id="'+id+'"></textarea></div>');
​
        // froala needs to be initialised on each open call
        this.on( 'open.froalaEditInit-'+id, function () {
            if ( $('#'+id).length ) {
                conf._editor = $('#'+id).froalaEditor(conf.opts);
​
                if ( conf._initSetVal ) {
                    conf._editor.froalaEditor('html.set', conf._initSetVal );
                    conf._initSetVal = null;
                }
                else {
                    conf._editor.froalaEditor('html.set', '');
                }
            }
        } );
​
        // And destroyed on each close, so it can be re-initialised on reopen
        this.on( 'preClose.froalaEditInit-'+id, function () {
            if ( conf._editor ) {
                conf._editor.froalaEditor('destroy');
                conf._editor = null;
            }
        } );
​
        return conf._input;
    },
​
    get: function ( conf ) {
        if ( ! conf._editor ) {
            return conf._initSetVal;
        }
​
        return conf._editor.froalaEditor('html.get');
    },
​
    set: function ( conf, val ) {
        var id = DataTable.Editor.safeId( conf.id );
​
        // If not ready, then store the value to use when the onOpen event fires
        if ( ! conf._editor || ! $('#'+id).length ) {
            conf._initSetVal = val;
            return;
        }
        conf._editor.froalaEditor('html.set', val );
    },
​
    enable: function ( conf ) {
        conf._editor.froalaEditor('edit.on');
    },
​
    disable: function ( conf ) {
        conf._editor.froalaEditor('edit.off');
    },
​
    destroy: function ( conf ) {
        var id = DataTable.Editor.safeId( conf.id );
​
        this.off( 'open.froalaEditInit-'+id );
        this.off( 'preClose.froalaEditInit-'+id );
    }
};
​
​
}));
​
​
​
var editor;
​
$(document).ready( function () {
  
  
  
      editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: "/foo/create",
            edit:   "/foo/_id_/edit",
            remove: "/foo/_id_/delete"
        },
        table: "#example",
        idSrc:  'name',
        fields: [
            {
                label: "Name:",
                name: "name"
            },
            {
                label: "Content:",
                name: "position",
                type: "froala",
                opts: {
                    inlineMode: false, 
                    fileAllowedTypes: [],
                    paragraphy: false,
                    spellcheck: true,
                    imageDeleteConfirmation: false,
                    defaultImageAlignment: "left",
                    height: 200
                }
            }
        ]
    } );
  
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "http://live.datatables.net/examples/ajax/data/objects.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
  
} );
​
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers