Bladeren bron

* Datatables example

Michaël Van Canneyt 2 jaren geleden
bovenliggende
commit
04dad391cb

+ 91 - 0
demo/datatables/demodatatables.lpi

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="demodatatables"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="5">
+      <Item0 Name="MaintainHTML" Value="1"/>
+      <Item1 Name="PasJSHTMLFile" Value="project1.html"/>
+      <Item2 Name="PasJSPort" Value="0"/>
+      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
+      <Item4 Name="RunAtReady" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="demodatatables.lpr"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="index.html"/>
+        <IsPartOfProject Value="True"/>
+        <CustomData Count="1">
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
+        </CustomData>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target FileExt=".js">
+      <Filename Value="demodatatables"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="browser"/>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

+ 65 - 0
demo/datatables/demodatatables.lpr

@@ -0,0 +1,65 @@
+program demodatatables;
+
+{$mode objfpc}
+
+uses
+  browserapp, JS, Classes, SysUtils, Web, libjquery, libdatatables;
+
+type
+  TMyApplication = class(TBrowserApplication)
+    procedure doRun; override;
+  end;
+
+procedure TMyApplication.doRun;
+
+Var
+  Opts : TJSDataTableOptions;
+  Lang : TJSDTOLanguageOptions;
+  LangPag : TJSDTOLanguagePaginateOptions;
+  checkCol,cCol : TJSDTOColumn;
+
+begin
+  Opts:=TJSDataTableOptions.New;
+  opts.Select:=True;
+  Lang:=TJSDTOLanguageOptions.new;
+  LangPag:=TJSDTOLanguagePaginateOptions.New;
+  // These are ignored because of the lang.url ?
+  LangPag.previous:='<i class="fas fa-lg fa-angle-left"></i>';
+  LangPag.Next:='<i class="fas fa-lg fa-angle-right"></i>';
+  Lang.paginate:=LangPag;
+  opts.Language:=Lang;
+  cCol:=TJSDTOColumn.New;
+  cCol.DataInt:=-1;
+  checkCol:=TJSDTOColumn.New;
+  checkCol.orderable:=false;
+  checkCol.className:='select-checkbox';
+  checkCol.DefaultContent:='';
+  checkCol.targets:=0;
+ { Opts.columns:=[
+    cCol, // Fake, data = -1
+    Nil,
+    Nil,
+    Nil,
+    Nil,
+    Nil,
+    Nil
+  ];}
+  Opts.columnDefs:=[CheckCol];
+  opts.SelectObj:=TJSDTOSelectOptions.new;
+  opts.SelectObj.style:='os';
+  opts.SelectObj.selector:='td:first-child';
+  opts.order:=[[1,'asc']];
+  opts.responsive:=False;
+  JQuery('#example').dataTableAPi(opts);
+  Terminate;
+end;
+
+var
+  Application : TMyApplication;
+
+begin
+  Application:=TMyApplication.Create(nil);
+  Application.Initialize;
+  Application.Run;
+  Application.Free;
+end.

+ 112 - 0
demo/datatables/index.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css" rel="stylesheet"/>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>
+  <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
+  <link href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.bootstrap4.min.css" rel="stylesheet"/>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet"/>
+
+  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/fontawesome.js"></script>
+  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
+  <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
+  <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
+  <script src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>
+  <script src="https://cdn.datatables.net/responsive/2.2.5/js/responsive.bootstrap4.min.js"></script>
+<!--
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
+  <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
+  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
+-->
+  <title>Data tables API demo</title>
+  <script src="demodatatables.js"></script>
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row">
+    </div>
+    <div class="row">
+      <div class="col-10">
+        <table id="example" class="table table-striped table-bordered dt-responsive" style="width:100%">
+          <thead>
+             <tr><th style="text-align: center;"><input id="cb-selectall" type="checkbox"/></th><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr>
+
+          </thead>
+          <tbody>
+            <tr><td></td><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr>
+            <tr><td></td><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr>
+            <tr><td></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></tr>
+            <tr><td></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></tr>
+            <tr><td></td><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>$162,700</td></tr>
+            <tr><td></td><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td><td>$372,000</td></tr>
+            <tr><td></td><td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><td>2012/08/06</td><td>$137,500</td></tr>
+            <tr><td></td><td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><td>2010/10/14</td><td>$327,900</td></tr>
+            <tr><td></td><td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>39</td><td>2009/09/15</td><td>$205,500</td></tr>
+            <tr><td></td><td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>2008/12/13</td><td>$103,600</td></tr>
+            <tr><td></td><td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>30</td><td>2008/12/19</td><td>$90,560</td></tr>
+            <tr><td></td><td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><td>2013/03/03</td><td>$342,000</td></tr>
+            <tr><td></td><td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>36</td><td>2008/10/16</td><td>$470,600</td></tr>
+            <tr><td></td><td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><td>2012/12/18</td><td>$313,500</td></tr>
+            <tr><td></td><td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>2010/03/17</td><td>$385,750</td></tr>
+            <tr><td></td><td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><td>2012/11/27</td><td>$198,500</td></tr>
+            <tr><td></td><td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>64</td><td>2010/06/09</td><td>$725,000</td></tr>
+            <tr><td></td><td>Gloria Little</td><td>Systems Administrator</td><td>New York</td><td>59</td><td>2009/04/10</td><td>$237,500</td></tr>
+            <tr><td></td><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td><td>$132,000</td></tr>
+            <tr><td></td><td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>2012/09/26</td><td>$217,500</td></tr>
+            <tr><td></td><td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>30</td><td>2011/09/03</td><td>$345,000</td></tr>
+            <tr><td></td><td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>40</td><td>2009/06/25</td><td>$675,000</td></tr>
+            <tr><td></td><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td><td>$106,450</td></tr>
+            <tr><td></td><td>Doris Wilder</td><td>Sales Assistant</td><td>Sydney</td><td>23</td><td>2010/09/20</td><td>$85,600</td></tr>
+            <tr><td></td><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td><td>$1,200,000</td></tr>
+            <tr><td></td><td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>42</td><td>2010/12/22</td><td>$92,575</td></tr>
+            <tr><td></td><td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td><td>28</td><td>2010/11/14</td><td>$357,650</td></tr>
+            <tr><td></td><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td><td>$206,850</td></tr>
+            <tr><td></td><td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td>48</td><td>2010/03/11</td><td>$850,000</td></tr>
+            <tr><td></td><td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td><td>20</td><td>2011/08/14</td><td>$163,000</td></tr>
+            <tr><td></td><td>Michelle House</td><td>Integration Specialist</td><td>Sydney</td><td>37</td><td>2011/06/02</td><td>$95,400</td></tr>
+            <tr><td></td><td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>2009/10/22</td><td>$114,500</td></tr>
+            <tr><td></td><td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>27</td><td>2011/05/07</td><td>$145,000</td></tr>
+            <tr><td></td><td>Gavin Cortez</td><td>Team Leader</td><td>San Francisco</td><td>22</td><td>2008/10/26</td><td>$235,500</td></tr>
+            <tr><td></td><td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>46</td><td>2011/03/09</td><td>$324,050</td></tr>
+            <tr><td></td><td>Unity Butler</td><td>Marketing Designer</td><td>San Francisco</td><td>47</td><td>2009/12/09</td><td>$85,675</td></tr>
+            <tr><td></td><td>Howard Hatfield</td><td>Office Manager</td><td>San Francisco</td><td>51</td><td>2008/12/16</td><td>$164,500</td></tr>
+            <tr><td></td><td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td><td>41</td><td>2010/02/12</td><td>$109,850</td></tr>
+            <tr><td></td><td>Vivian Harrell</td><td>Financial Controller</td><td>San Francisco</td><td>62</td><td>2009/02/14</td><td>$452,500</td></tr>
+            <tr><td></td><td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>37</td><td>2008/12/11</td><td>$136,200</td></tr>
+            <tr><td></td><td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>65</td><td>2008/09/26</td><td>$645,750</td></tr>
+            <tr><td></td><td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td><td>64</td><td>2011/02/03</td><td>$234,500</td></tr>
+            <tr><td></td><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td><td>$163,500</td></tr>
+            <tr><td></td><td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td><td>37</td><td>2009/08/19</td><td>$139,575</td></tr>
+            <tr><td></td><td>Thor Walton</td><td>Developer</td><td>New York</td><td>61</td><td>2013/08/11</td><td>$98,540</td></tr>
+            <tr><td></td><td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td><td>47</td><td>2009/07/07</td><td>$87,500</td></tr>
+            <tr><td></td><td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>64</td><td>2012/04/09</td><td>$138,575</td></tr>
+            <tr><td></td><td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td><td>63</td><td>2010/01/04</td><td>$125,250</td></tr>
+            <tr><td></td><td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td><td>56</td><td>2012/06/01</td><td>$115,000</td></tr>
+            <tr><td></td><td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>43</td><td>2013/02/01</td><td>$75,650</td></tr>
+            <tr><td></td><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td><td>$145,600</td></tr>
+            <tr><td></td><td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>47</td><td>2011/03/21</td><td>$356,250</td></tr>
+            <tr><td></td><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>2009/02/27</td><td>$103,500</td></tr>
+            <tr><td></td><td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>$86,500</td></tr>
+            <tr><td></td><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>2008/11/13</td><td>$183,000</td></tr>
+            <tr><td></td><td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>29</td><td>2011/06/27</td><td>$183,000</td></tr>
+            <tr><td></td><td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>27</td><td>2011/01/25</td><td>$112,000</td></tr>
+          </tbody>
+          <tfoot>
+            <tr><th></th><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+   </div>
+   <script>
+    window.addEventListener("load", rtl.run);
+
+  </script>
+
+</body>
+</html>

+ 629 - 0
packages/datatables/libdatatables.pas

@@ -0,0 +1,629 @@
+{
+    This file is part of the Pas2JS run time library.
+    Copyright (c) 2020 by the Pas2JS development team.
+
+    Import classes for datatables (https://www.datatables.net)
+
+    See the file COPYING.FPC, included in this distribution,
+    for details about the copyright.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+
+ **********************************************************************}
+
+
+unit libdatatables;
+
+{$mode objfpc}
+{$modeswitch externalclass}
+
+interface
+
+uses types, js, web, libjquery;
+
+
+Const
+  OrderAsc = 'asc';
+  OrderDesc = 'desc';
+
+  PagingNumbers = 'numbers';
+  PagingSimple = 'simple';
+  PagingSimpleNumbers = 'simple_numbers';
+  PagingFull = 'full';
+  PagingFullNumbers = 'full_numbers';
+  PagingFirstLastNumbers = 'first_last_numbers';
+
+  AutoFillFocusClick = 'click';
+  AutoFillFocusFocus = 'focus';
+  AutoFillFocushover = 'hover';
+
+  FixedColumnsHeightMatchNone = 'none';
+  FixedColumnsHeightMatchSemiAuto = 'semiauto';
+  FixedColumnsHeightMatchAuto = 'auto';
+
+  SelectOptionsItemsRow = 'row';
+  SelectOptionsItemsColumn = 'column';
+  SelectOptionsItemsCell = 'cell';
+
+  SelectOptionsStyleAPI = 'api';
+  SelectOptionsStyleSingle = 'single';
+  SelectOptionsStyleMulti = 'multi';
+  SelectOptionsStyleMultiShitf = 'multi+shift';
+
+
+
+
+
+
+Type
+  // Forward definitions
+  TJSDataTableAPI = class;
+  TJSDTOButton = Class;
+  TJSDataTableEditor = TJSObject;
+
+  TJSDTOSearchOptions = Class external name 'Object' (TJSObject)
+    search : string;
+    caseInsensitive : Boolean;
+    regex : boolean;
+    smart : boolean;
+  end;
+  TJSDTOSearchOptionsDynArray = Array of TJSDTOSearchOptions;
+
+  TJSDTOLanguagePaginateOptions = Class external name 'Object' (TJSObject)
+    first : string;
+    previous : string;
+    next : string;
+    last : string;
+  end;
+
+  TJSDTOLanguageAriaOptions = Class external name 'Object' (TJSObject)
+    paginate : TJSDTOLanguagePaginateOptions;
+    sortAscending : string;
+  end;
+
+  TJSDTOLanguageAutoFillOptions = Class external name 'Object' (TJSObject)
+    button : string;
+    cancel : string;
+    fill : string;
+    fillHorizontal : string;
+    fillVertical : string;
+    increment : string;
+    info : string;
+  end;
+
+
+  TJSDTOLanguageSelectOptions = Class external name 'Object' (TJSObject)
+    cells : string;
+    cellsObj : TJSObject; external name 'cells';
+    columns : string;
+    columnsObj : TJSObject; external name 'columns';
+    rows : string;
+    rowsObj : TJSObject; external name 'rows';
+  end;
+
+
+  TJSDTOLanguageOptions = Class external name 'Object' (TJSObject)
+    aria : TJSDTOLanguageAriaOptions;
+    autoFill : TJSDTOLanguageAutoFillOptions;
+    decimal : string;
+    emptyTable : String;
+    info : String;
+    infoEmpty : String;
+    infoFiltered : String;
+    infoPostFix : string;
+    lengthMenu : string;
+    loadingRecords : String;
+    paginate : TJSDTOLanguagePaginateOptions;
+    processing : string;
+    search : string;
+    searchPlaceholder : string;
+    thousands : string;
+    url : string;
+    zeroRecords : string;
+    select : TJSDTOLanguageSelectOptions;
+  end;
+
+  TJSDTOAutoFillOptions = Class external name 'Object' (TJSObject)
+    alwaysAsk : Boolean;
+    columns : string;
+    columnsIndex : TIntegerDynArray; external name 'columns';
+    editor : TJSDataTableEditor;
+    enable : boolean;
+    focus : string;
+    focusNull : jsValue external name 'focus';
+    horizontal : boolean;
+    update : boolean;
+    vertical : boolean;
+  end;
+
+  TJSDTOButtonActionCallBack = reference to procedure (e : TJSEvent; dt : TJSDataTableAPI; node : TJQuery; Config : TJSDTOButton);
+  TJSDTOButtonAvailableCallBack = reference to function (dt : TJSDataTableAPI; Config : TJSDTOButton) : boolean;
+  TJSDTOButtonDestroyCallBack = reference to procedure (dt : TJSDataTableAPI; node : TJQuery; Config : TJSDTOButton);
+  TJSDTOButtonInitCallBack = reference to procedure (dt : TJSDataTableAPI; node : TJQuery; Config : TJSDTOButton);
+  TJSDTOButtonTitleCallBack = reference to function (dt : TJSDataTableAPI; node : TJQuery; Config : TJSDTOButton) : string;
+
+  TJSDataTableOptionsButtonAttr = Class external name 'Object' (TJSObject)
+    title : String;
+    id : string;
+  end;
+
+  TJSDTOButtonKeyOptions = Class external name 'Object' (TJSObject)
+    key : string;
+    shift : Boolean;
+    altkey : Boolean;
+    ctrlKey : Boolean;
+    metaKey : Boolean;
+  end;
+
+  TJSDataTableButtonDomBase = Class external name 'Object' (TJSObject)
+    tag : string;
+    classname : string;
+  end;
+
+  TJSDataTableButtonDomButtonOptions = Class external name 'Object' (TJSDataTableButtonDomBase)
+    disabled : string;
+    active : string;
+  end;
+
+  TJSDataTableButtonDomOption = Class external name 'Object' (TJSObject)
+    button : TJSDataTableButtonDomButtonOptions;
+    buttonObj : TJSObject; external name 'button';
+    buttonLiner : TJSDataTableButtonDomBase;
+    buttonLinerObj : TJSObject; external name 'buttonLiner';
+    collection : TJSDataTableButtonDomBase;
+    collectionObj : TJSObject; external name 'collection';
+    container : TJSDataTableButtonDomBase;
+    containerObj : TJSObject; external name 'container';
+  end;
+
+  TJSDTOButton = Class external name 'Object' (TJSObject)
+    action : TJSDTOButtonActionCallBack;
+    attr : TJSDataTableOptionsButtonAttr;
+    available : TJSDTOButtonAvailableCallBack;
+    className : string;
+    destroy : TJSDTOButtonDestroyCallBack;
+    enabled : boolean;
+    extend : string;
+    init : TJSDTOButtonInitCallBack;
+    key : string;
+    keyObj : TJSDTOButtonKeyOptions;  external name 'key';
+    name : string;
+    namespace : string;
+    tag : string;
+    text : string;
+    titleAttr : string;
+    titleAttrCallBack : TJSDTOButtonTitleCallBack; external name 'titleAttr';
+    dom : TJSDataTableButtonDomOption;
+  end;
+
+  TJSDTOButtonDynArray = Array of TJSDTOButton;
+
+  TJSDTOButtons = Class external name 'Object' (TJSObject)
+    buttonsStringArray : TStringDynArray; external name 'buttons';
+    buttonsMixedArray : TJSValueDynArray; external name 'buttons';
+    ButtonsObjArray : TJSDTOButtonDynArray; external name 'buttons';
+    bame : string;
+  end;
+
+  TJSDTOColReorderOptions = Class external name 'Object' (TJSObject)
+    enable : boolean;
+    fixedColumnsLeft : Integer;
+    fixedColumnsRight : Integer;
+    order : TIntegerDynArray;
+    realtime : Boolean;
+  end;
+
+  TJSDTOFixedColumnsOptions = Class external name 'Object' (TJSObject)
+    heightMatch : string;
+    leftColumns : Integer;
+    rightColumns : Integer;
+  end;
+
+  TJSDTOFixedHeaderOptions =  Class external name 'Object' (TJSObject)
+    footer : Boolean;
+    footerOffset : Integer;
+    header : Boolean;
+    headerOffset : Integer;
+  end;
+
+  TJSDTOKeyTableOptions =  Class external name 'Object' (TJSObject)
+    blurable : boolean;
+    className : string;
+    clipboardOrthogonal : String;
+    columns : string;
+    editOnFocus : Boolean;
+    editor : TJSDataTableEditor;
+    focus : string;
+    keysArray : TStringDynArray; external name 'keys';
+    keysNull : jsValue; external name 'keys';
+    tabIndex : integer;
+  end;
+
+  TJSDTOResponsiveBreakPoint = record
+    name : string;
+    width : integer;
+  end;
+  TJSDTOResponsiveBreakPointDynArray = Array of TJSDTOResponsiveBreakPoint;
+
+  TJSRenderColumns = record
+    title : string;
+    data : string;
+    hidden : boolean;
+    columnIndex : integer;
+    rowIndex : Integer;
+  end;
+  TJSRenderColumnsDynArray = Array of TJSRenderColumns;
+
+  TJSDTOResponsiveDetailsDisplayCallbackRender = Function : String;
+  TJSDTOResponsiveDetailsDisplayCallback = reference to function (row : TJSDataTableAPI; upate : boolean; Render :  TJSDTOResponsiveDetailsDisplayCallbackRender) : Boolean;
+
+
+  TJSDTOResponsiveDetailsRenderBoolCallback = reference to function (api : TJSDataTableAPI; RowIndex : Integer; Columns :  TJSRenderColumnsDynArray) : Boolean;
+  TJSDTOResponsiveDetailsRenderStringCallback = reference to function (api : TJSDataTableAPI; RowIndex : Integer; Columns :  TJSRenderColumnsDynArray) : String;
+
+  TJSDTOResponsiveDetails = Class external name 'Object' (TJSObject)
+    display : TJSDTOResponsiveDetailsDisplayCallback;
+    renderBool : TJSDTOResponsiveDetailsRenderBoolCallback; external name 'render';
+    renderString : TJSDTOResponsiveDetailsRenderBoolCallback; external name 'render';
+    target : integer;
+    targetStr : String; external name 'target';
+    type_ : String; external name 'type';
+    orthogonal : string;
+  end;
+
+  TJSDTOResponsiveOptions = Class external name 'Object' (TJSObject)
+    breakpoints : TJSDTOResponsiveBreakPointDynArray;
+    details : boolean;
+    detailsObj : TJSDTOResponsiveDetails; external name 'details';
+  end;
+
+
+  TJSDTORowReorderOptions = Class external name 'Object' (TJSObject)
+    dataSrc : Integer;
+    dataSrcStr : String; external name 'dataSrc';
+    editor : TJSDataTableEditor;
+    selector : String;
+    snapX : Boolean;
+    snapXint : integer; external name 'snapX';
+    update : boolean;
+  end;
+
+
+  TJSDTOScrollerOptions = Class external name 'Object' (TJSObject)
+    boundaryScale : Double;
+    displayBuffer : Integer;
+    loadingIndicator : Boolean;
+    rowHeight : Integer;
+    rowHeightStr : String; external name 'rowHeight';
+    serverWait : Integer;
+  end;
+
+  TJSDTOSelectOptions = Class external name 'Object' (TJSObject)
+    blurable : boolean;
+    className : string;
+    info : Boolean;
+    items : string;
+    selector : string;
+    style : string;
+    toggleable : boolean;
+  end;
+
+  TJSDTOColumnCreatedCellCallBack = reference to procedure(Cell : TJSNode; cellData,rowData : JSValue; rowIndex,ColIndex : integer);
+  TJSDTOColumnObjectDataCallBack = reference to function (Row : TJSObject; aType : string; aSet : JSValue; meta : TJSObject) : jsValue;
+  TJSDTOColumnArrayDataCallBack = reference to function (Row : TJSArray; aType : string; aSet : JSValue; meta : TJSObject) : jsValue;
+  TJSDTOColumnObjectRenderCallBack = reference to function (data: JSValue; aType : string; row : TJSObject; meta : TJSObject) : jsValue;
+  TJSDTOColumnArrayRenderCallBack = reference to function (data: JSValue; aType : string; row : TJSArray; meta : TJSObject) : jsValue;
+
+  TJSDTOColumn = Class external name 'Object' (TJSObject)
+    cellType : string;
+    className : string;
+    contentPadding : string;
+    createdCell : TJSDTOColumnCreatedCellCallBack;
+    data : String;
+    dataInt : Integer; external name 'data';
+    dataNull : jsValue ; external name 'data';
+    dataObj : TJSObject ; external name 'data';
+    dataObjectFunction : TJSDTOColumnObjectDataCallBack ; external name 'data';
+    dataArrayFunction : TJSDTOColumnArrayDataCallBack ; external name 'data';
+    defaultContent : string;
+    name : string;
+    orderData : Integer;
+    orderDataArray : TIntegerDynArray; external name 'orderData';
+    orderDataType : String;
+    orderSequence : TStringDynArray;
+    orderable : boolean;
+    render : Integer;
+    renderStr : string; external name 'render';
+    renderObj : string; external name 'render';
+    renderObjectFunction : TJSDTOColumnObjectRenderCallBack ; external name 'render';
+    renderArrayFunction : TJSDTOColumnArrayRenderCallBack ; external name 'render';
+    searchable : boolean;
+    title : string;
+    type_ : string; external name 'type';
+    visible : boolean;
+    width : string;
+    targets : Integer;
+    targetsStr : String; external name 'targets';
+    targetsIntArray : TIntegerDynArray; external name 'targets';
+    targetsStringArray : TStringDynArray; external name 'targets';
+  end;
+  TJSDTOColumnDynArray = array of TJSDTOColumn;
+
+  TJSDTORowGroupEndRenderCallBack = reference to Function(rows : TJSDataTableAPI; Group : string; level : Integer) : JSValue;
+
+  TJSDTORowGroup = Class external name 'Object' (TJSObject)
+    className : string;
+    dataSrc : Integer;
+    dataSrcStr : String; external name 'dataSrc';
+    dataSrcStrArray : TStringDynArray; external name 'dataSrc';
+    dataSrcIntegerArray : TIntegerDynArray; external name 'dataSrc';
+    emptyDataGroup : String;
+    emptyDataGroupNull : JSValue; external name 'emptyDataGroup';
+    enable : boolean;
+    endClass : String;
+    endRenderNull : jsValue; external name 'endRender';
+    endRender : TJSDTORowGroupEndRenderCallBack;
+    startClassName : string;
+    startRenderNull : jsValue; external name 'sraerRender';
+    startRender : TJSDTORowGroupEndRenderCallBack;
+  end;
+
+  TJSDTOAjaxCallBack = reference to Function (data : TJSObject) : TJSArray;
+
+  TJSDTOAjax = Class external name 'Object' (TJSAjaxSettings)
+    dataSrc : string;
+    dataSrcCallBack : TJSDTOAjaxCallBack; external name 'dataSrc';
+  end;
+
+  TJSDataTableOptions = Class external name 'Object' (TJSObject)
+    ajax : string;
+    ajaxObj : TJSDTOAjax; external name 'ajax';
+    data : TJSArray;
+    autoFill : Boolean;
+    autoFillObj : TJSDTOAutoFillOptions; external name 'autoFill';
+    autoWidth : Boolean;
+    deferRender : Boolean;
+    info : Boolean;
+    lengthChange : Boolean;
+    ordering : Boolean;
+    paging : Boolean;
+    processing : Boolean;
+    scrollX : Boolean;
+    scrollY : string;
+    searching : Boolean;
+    serverSide : Boolean;
+    stateSave : Boolean;
+    deferLoading : Integer;
+    deferLoadingArray : TIntegerDynArray; external name 'deferLoading';
+    destroy : Boolean;
+    displayStart : Integer;
+    dom : String;
+    lengthMenu : TIntegerDynArray;
+    lengthMenuJSValue : TJSValueDynArray; external name 'lengthMenu';
+    order : array of TJSValueDynArray;
+    orderCellsTop : boolean;
+    orderClasses : Boolean;
+    orderFixed : TJSValueDynArray;
+    orderFixedObj : TJSObject; external name 'orderFixed';
+    orderMulti : Boolean;
+    pageLength : Integer;
+    pagingType : string;
+    renderer : String;
+    rendererObj : TJSObject; external name 'renderer';
+    retrieve : Boolean;
+    rowId : String;
+    scrollCollapse : Boolean;
+    search  : TJSDTOSearchOptions;
+    searchCols : TJSDTOSearchOptionsDynArray;
+    searchDelay : Boolean;
+    stateDuration : Boolean;
+    stripeClasses : TStringDynArray;
+    tabIndex : Integer;
+    language : TJSDTOLanguageOptions;
+    languageObj : TJSObject; external name 'language';
+    buttons : Boolean;
+    buttonsArray : TStringDynArray; external name 'buttons';
+    buttonsMixedArray : TJSValueDynArray; external name 'buttons';
+    ButtonsObj : TJSDTOButtons; external name 'buttons';
+    ButtonsObjArray : TJSDTOButtonDynArray; external name 'buttons';
+    colReorder : Boolean;
+    colReorderObj : TJSDTOColReorderOptions; external name 'colReorder';
+    fixedColumns : Boolean;
+    fixedColumnsObj : TJSDTOFixedColumnsOptions; external name 'fixedColumns';
+    fixedHeader : Boolean;
+    fixedHeaderObj : TJSDTOFixedHeaderOptions; external name 'fixedHeader';
+    keyTable : Boolean;
+    keyTableObj : TJSDTOKeyTableOptions; external name 'keyTable';
+    responsive : Boolean;
+    responsiveObj : TJSDTOResponsiveOptions; external name 'responsive';
+    rowReorder : Boolean;
+    rowReorderObj : TJSDTORowReorderOptions; external name 'rowReorder';
+    scroller : Boolean;
+    scrollerObj : TJSDTOScrollerOptions; external name 'scroller';
+    select : Boolean;
+    selectObj : TJSDTOSelectOptions; external name 'select';
+    columnDefs : TJSDTOColumnDynArray;
+    columns : TJSDTOColumnDynArray;
+    rowGroup : Boolean;
+    rowGroupObj : TJSDTORowGroup; external name 'rowGroup';
+  end;
+
+  TDTAjaxReloadCallBack = reference to procedure (aJSON : TJSObject);
+
+  TDTAjax = Class external name 'Object' (TJSObject)
+    function json: TJSObject;
+    function params : TJSObject;
+    function url : string;
+    function url (aURL : String) :  TJSDataTableAPI;
+    function reload () : TJSDataTableAPI;
+    function reload (callback : TDTAjaxReloadCallBack) :  TJSDataTableAPI;
+    function reload (callback : TDTAjaxReloadCallBack; resetPaging : Boolean) :  TJSDataTableAPI;
+  end;
+
+  TDTOrderListener = reference to procedure;
+  TDTOrderOptions = Class external name 'Object' (TJSObject)
+    function fixed : TJSObject;
+    function fixed (aOrder : TJSObject) : TJSDataTableAPI;
+    function listener (node: TJSNode; Index : Integer; Listener : TDTOrderListener = Nil) : TJSDataTableAPI;
+    function listener (node: TJQuery; Index : Integer; Listener : TDTOrderListener = Nil) : TJSDataTableAPI;
+    function listener (node: String; Index : Integer; Listener : TDTOrderListener = Nil) : TJSDataTableAPI;
+  end;
+
+  TDTPageInfo =  Class external name 'Object' (TJSObject)
+    page : integer;
+    pages : integer;
+    start : integer;
+    end_ : integer; external name 'end';
+    length : integer;
+    recordsTotal : integer;
+    recordsDisplay : integer;
+    serverSide: Boolean;
+  end;
+
+  TDTPageOptions = Class external name 'Object' (TJSObject)
+    Function info : TDTPageInfo;
+    function len : Integer;
+    function len(aLength: Integer) : TJSDataTableAPI;
+  end;
+
+  TDTStateOptions = Class external name 'Object' (TJSObject)
+    function clear : TJSDataTableAPI;
+    function loaded : TJSObject;
+    function save : TJSDataTableAPI;
+  end;
+
+  TDTSelectorModifier  = Class external name 'Object' (TJSObject)
+    order : string;
+    page : string;
+    search : String;
+  end;
+
+  TJSCellSelectorCallback = reference to function(aIndex: Integer; aData : JSValue; aCell: TJSNode) : Boolean;
+  TDTCellIndexData = Class external name 'Object' (TJSObject)
+    row : integer;
+    column : integer;
+    columnVisible : Integer;
+  end;
+
+  TJSDataTableCellAPI  = Class external name 'Object' (TJSObject)
+    function cache() :  TJSDataTableAPI;
+    function cache(aType : string) : TJSDataTableAPI ;
+    function data : JSValue;
+    function data(aValue : JSValue) : TJSDataTableAPI;
+    function index : TDTCellIndexData;
+    function invalidate : TJSDataTableAPI;
+    function invalidate(aSource : string) : TJSDataTableAPI;
+    function node : TJSHTMLelement;
+    function render : JSValue;
+    function render(aType : string) : JSValue;
+  end;
+
+  TJSDataTableAPI = Class external name 'DataTable' (TJSObject)
+  Public
+    context : TJSObject;
+    selector : TJSObject;
+    ajax : TDTAjax;
+    pageAPI : TDTPageOptions; external name 'page';
+    orderAPI : TDTOrderOptions ; external name 'order';
+    stateAPI : TDTStateOptions; external name 'state';
+    function tables() : JSValue;
+    function table() : JSValue;
+    function draw(paging : boolean) : TJSDataTableAPI;
+    function draw(paging : string) : TJSDataTableAPI;
+    function page() : integer;
+    function page(aPage : integer) : TJSDataTableAPI;
+    function rows() : JSValue;
+    function row() : JSValue;
+    function columns() : JSValue;
+    function column() : JSValue;
+    function cells() : JSValue;
+    function cell() : TJSDataTableCellAPI;
+    function cell(Modifier : TDTSelectorModifier) : TJSDataTableCellAPI;
+    function cell(Selector : string) : TJSDataTableCellAPI;
+    function cell(Selector : string; Modifier : TDTSelectorModifier) : TJSDataTableCellAPI;
+    function cell(Selector : TJSNode) : TJSDataTableCellAPI;
+    function cell(Selector : TJSNode; Modifier : TDTSelectorModifier) : TJSDataTableCellAPI;
+    function cell(Selector : TJQuery) : TJSDataTableCellAPI;
+    function cell(Selector : TJQuery; Modifier : TDTSelectorModifier) : TJSDataTableCellAPI;
+    function cell(Selector : TJSObject) : TJSDataTableCellAPI;
+    function cell(Selector : TJSObject; Modifier : TDTSelectorModifier) : TJSDataTableCellAPI;
+    function cell(Selector : TJSValueDynArray) : TJSDataTableCellAPI;
+    function cell(Selector : TJSValueDynArray; Modifier : TDTSelectorModifier) : TJSDataTableCellAPI;
+    function cell(Selector : TJSCellSelectorCallback) : TJSDataTableCellAPI;
+    function cell(Selector : TJSCellSelectorCallback; Modifier : TDTSelectorModifier) : TJSDataTableCellAPI;
+    // Defining all combinations would result in 36 function definitions...
+    function cell(CellSelector,RowSelector : jsValue; Modifier: TDTSelectorModifier) : TJSDataTableCellAPI;
+
+    function order() : TJSValueDynArray;
+    function order(aOrder : TJSValueDynArray) : TJSDataTableAPI; varargs;
+    function search() : string;
+    function search(aValue : string; aRegexp : Boolean) : TJSDataTableAPI;
+    function search(aValue : string; aRegexp : Boolean; Smart : Boolean) : TJSDataTableAPI;
+    function search(aValue : string; aRegexp : Boolean; Smart : Boolean; caseIns : Boolean) : TJSDataTableAPI;
+
+    function state() : TJSObject;
+    function jquery() : TJQuery; external name '$';
+    function on(aEvent : string; aHandler : TJSRawEventHandler) : TJSDataTableAPI;
+    function one(aEvent : string; aHandler : TJSRawEventHandler) : TJSDataTableAPI;
+    function off(aEvent : string) : TJSDataTableAPI;
+    function off(aEvent : string; aHandler : TJSRawEventHandler) : TJSDataTableAPI;
+    function clear() : TJSDataTableAPI;
+    function settings() : TJSDataTableAPI;
+    function init() : TJSObject;
+    function data() : TJSDataTableAPI;
+    function destroy(remove : Boolean) : TJSDataTableAPI;
+    function destroy() : TJSDataTableAPI;
+    function i18n(token : string; def : string) : string;
+    function i18n(token : string; def : TJSObject) : string;
+    function i18n(token : string; def : string; Numeric : Double) : string;
+    function i18n(token : string; def : TJSObject; Numeric : Double) : string;
+    function i18n(token : string; def : string; Numeric : NativeInt) : string;
+    function i18n(token : string; def : TJSObject; Numeric : NativeInt) : string;
+  // next getPrototypeOf ...
+    function r(arg1: JSValue;arg2: JSValue) : JSValue;
+    function any() : JSValue;
+    function concat(arg1: JSValue) : JSValue;
+    function count() : JSValue;
+    function each(arg1: JSValue) : JSValue;
+    function eq(arg1: JSValue) : JSValue;
+    function filter(arg1: JSValue) : JSValue;
+    function flatten() : JSValue;
+    function join(arg1: JSValue) : JSValue;
+    function indexOf(arg1: JSValue) : JSValue;
+    function iterator(arg1: JSValue;arg2: JSValue;arg3: JSValue;arg4: JSValue) : JSValue;
+    function lastIndexOf(arg1: JSValue) : JSValue;
+    length : double;
+    function map(arg1: JSValue) : JSValue;
+    function pluck(arg1: JSValue) : JSValue;
+    function pop() : JSValue;
+    function push(arg1: JSValue) : JSValue;
+    function reduce(arg1: JSValue) : JSValue;
+    function reduceRight(arg1: JSValue) : JSValue;
+    function reverse() : JSValue;
+    function shift() : JSValue;
+    function slice() : JSValue;
+    function sort(arg1: JSValue) : JSValue;
+    function splice(arg1: JSValue;arg2: JSValue) : JSValue;
+    function toArray() : JSValue;
+    function toDollar() : JSValue; external name 'to$';
+    function toJQuery() : JSValue;
+    function unique() : JSValue;
+    function unshift(arg1: JSValue) : JSValue;
+  // next getPrototypeOf ...
+  end;
+
+  TJSDataTableJQuery = class external name 'JQuery' (TJQuery)
+    function api : TJSDataTableAPI;
+  end;
+
+  TDataTablesHelper = Class helper for TJQuery
+    Function dataTableAPI : TJSDataTableAPI; external name 'DataTable'; overload;
+    Function dataTableAPI(options : TJSObject) : TJSDataTableAPI; external name 'DataTable'; overload;
+    Function dataTable : TJSDataTableJQuery; external name 'dataTable';
+  end;
+
+Implementation
+
+end.