JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-dt/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-bs/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/editor/css/editor.bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-buttons-bs/css/buttons.bootstrap.css">
<script src="https://webinsert.pl/bug_test/lib/jQuery/dist/jquery.min.js"></script>
<script src="https://webinsert.pl/bug_test/lib/jquery-ui/jquery-ui.js"></script>
<script src="https://webinsert.pl/bug_test/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net/js/jquery.dataTables.js"></script>
<script src="https://webinsert.pl/bug_test/lib/editor/js/dataTables.editor.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-buttons-bs/js/buttons.bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-select/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1>Editor and summernote</h1>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
...
JavaScript
$(document).ready(function () {
var ajax_data = {
"data": [
{
"DT_RowId": "1",
"first_name": "Tiger",
"last_name": "Nixon",
"position": "System Architect",
"offices": "Tokyo",
},
{
"DT_RowId": "2",
"first_name": "Cedric",
"last_name": "Kelly",
"position": "Senior Javascript Developer",
"offices": "London, Tokyo",
},
{
"DT_RowId": "3",
"first_name": "Ashton",
"last_name": "Cox",
"position": "Junior Technical Author",
"offices": "London, Tokyo",
}
]
};
var editor;
/*! 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...