datatables editor template

datatables-editor-template.markdown

datatables editor template

A Pen by Lou King on CodePen.

License.

index.html

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.js"></script>
<link href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<link href="https://sandbox.scoretility.com/static/js/Editor-1.8.1/css/editor.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://sandbox.scoretility.com/static/js/Editor-1.8.1/js/dataTables.editor.js"></script>
  <link rel=stylesheet type=text/css href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<!--
  <link rel=stylesheet type=text/css href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.structure.css">
  <link rel=stylesheet type=text/css href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.theme.css">
   -->
  <link rel=stylesheet type=text/css href="https://cdn.datatables.net/1.10.18/css/dataTables.jqueryui.css?v=1.10.18">
  <link rel=stylesheet type=text/css href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.jqueryui.css?v=1.5.2">
  <link rel=stylesheet type=text/css href="https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.jqueryui.css?v=3.2.5">
  <link rel=stylesheet type=text/css href="https://sandbox.scoretility.com/static/js/Editor-1.8.1/css/editor.jqueryui.css?v=1539093792">
  <link rel=stylesheet type=text/css href="https://cdn.datatables.net/select/1.2.6/css/select.jqueryui.css?v=1.2.6">

  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.jqueryui.js?v=1.10.18"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.jqueryui.js?v=1.5.2"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.js?v=3.2.5"></script>
  <script src="https://sandbox.scoretility.com/static/js/Editor-1.8.1/js/editor.jqueryui.js"></script>

<table id=tbl>
  <thead>
    <tr>
      <th></th>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  </tbody>
</table>

script.js

var data = []
for (i = 1; i < 4; i++) {
  data.push({
    id: i,
    a: 'a' + i,
    b: 'b' + i,
    c: 'c' + i
  })
}

var optvalues = [
  'aa',
  'bb',
  'cc',
];

var editor = new $.fn.dataTable.Editor({
  table: '#tbl',
  idSrc: 'id',
  fields: [
    { label: 'col0', name: 'col0' },
    { label: 'col1', name: 'col1' },
    { label: 'col2', name: 'col2' },
  ],
} );

var table = $('#tbl')
  .DataTable({
    dom: 'lBfrtip',
    data: data,
    columns: [
      {
        data: null,
        defaultContent: '',
        className: 'select-checkbox',
        orderable: false
      },
      { data: 'a', className: 'dt-body-center' }, 
      { data: 'b', className: 'dt-body-center' },
      { data: 'c', className: 'dt-body-center' }
    ],
    select: true,
    buttons: [
      { extend: 'create', editor: editor },
      { extend: 'edit', editor: editor },
      { extend: 'remove', editor: editor },
    ],
  });

style.css

div.selectize-dropdown {
  z-index: 102;
}