فهرست منبع

* Bootstrap(table) helper & demo

michael 5 سال پیش
والد
کامیت
509b6ee185

+ 4 - 1
demo/Makefile

@@ -5,7 +5,7 @@ TARGETS=democomponents demobrowseconsole demoajax demoxhr restbridgeclient \
   chartjs_demoline chartjs_demotime chartjs_demoscriptablebubble chartjs_demoradar \
   chartjs_democustompoints chartjs_demopolararea promiseall promisestory1 \
   promisestory2 promisestory demodb demoload demorest fpcunitbrowsertest \
-  sampleda webgl1 pdfbasic hotreload dynload
+  sampleda webgl1 pdfbasic hotreload dynload bootstraptable
 ifneq ($(SKIPWEBCOMPILER),1)
 TARGETS:=$(TARGETS) demowebcompiler
 BASEDIR=$(CURDIR)/../compiler/packages
@@ -103,3 +103,6 @@ hotreload: ./hotreload/hotreload.lpr
 dynload: ./dynload/testloader.lpr ./dynload/myform.pp
 	$(BROWSERP2JS) -OoRemoveNotUsedDeclarations- ./dynload/testloader.lpr
 	$(P2JS) ./dynload/myform.pp
+bootstraptable: ./bootstrap/demobootstraptable.lpr
+	$(BROWSERP2JS) $<
+	

+ 119 - 0
demo/bootstrap/bootstraptable.html

@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" >
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
+  <script src="https://code.jquery.com/jquery-3.4.1.js" ></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.js"></script>
+  <script src="demobootstraptable.js"></script>
+</head>
+<body>
+    <div class="container-fluid">
+      <ul class="nav nav-tabs">
+        <li><a id="nav-tab-prefilled" class="nav-link active" data-toggle="tab" href="#tab-prefilled">Existing</a></li>
+        <li><a id="nav-tab-data"  class="nav-link" data-toggle="tab" href="#tab-data">Using Data</a></li>
+        <li><a id="nav-tab-manual" class="nav-link " data-toggle="tab" href="#tab-manual">Manual</a></li>
+      </ul>
+  <div class="tab-content">
+    <div id="tab-prefilled" class="tab-pane fade show active" >
+      <div id="prefilled-toolbar" class="row">
+        <div class="col-sm-4"><h3>Pre-defined existing HTML table</h3></div>
+      </div>
+      <div class="row">
+        <table id="table-prefilled">
+      
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Stars</th>
+              <th>Forks</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr id="tr-id-1" class="tr-class-1" data-title="bootstrap table" data-object='{"key": "value"}'>
+              <td id="td-id-1" class="td-class-1" data-title="bootstrap table">
+                <a href="https://github.com/wenzhixin/bootstrap-table" target="_blank">bootstrap-table</a>
+              </td>
+              <td data-value="526">8827</td>
+              <td data-text="122">3603</td>
+              <td data-i18n="Description">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
+              </td>
+            </tr>
+            <tr id="tr-id-2" class="tr-class-2">
+              <td id="td-id-2" class="td-class-2">
+                <a href="https://github.com/wenzhixin/multiple-select" target="_blank">multiple-select</a>
+              </td>
+              <td>1615</td>
+              <td>623</td>
+              <td>A jQuery plugin to select multiple elements with checkboxes :)
+              </td>
+            </tr>
+            <tr id="tr-id-3" class="tr-class-3">
+              <td id="td-id-3" class="td-class-3">
+                <a href="https://github.com/wenzhixin/bootstrap-show-password" target="_blank">bootstrap-show-password</a>
+              </td>
+              <td>220</td>
+              <td>85</td>
+              <td>Show/hide password plugin for twitter bootstrap.
+              </td>
+            </tr>
+            <tr id="tr-id-4" class="tr-class-4">
+              <td id="td-id-4" class="td-class-4">
+                <a href="https://github.com/wenzhixin/bootstrap-table-examples" target="_blank">bootstrap-table-examples</a>
+              </td>
+              <td>1734</td>
+              <td>1532</td>
+              <td>Bootstrap Table Examples</td>
+            </tr>
+            <tr id="tr-id-5" class="tr-class-5">
+              <td id="td-id-5" class="td-class-5">
+                <a href="https://github.com/wenzhixin/scutech-redmine" target="_blank">scutech-redmine</a>
+              </td>  
+              <td>24</td>
+              <td>18</td>
+              <td>Redmine notification tools for chrome extension.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div id="tab-data" class="tab-pane fade " >
+      <div id="prefilled-toolbar" class="row">
+        <div class="col-sm-4"><h3>Using data link</h3></div>
+      </div>
+      <div class="row">
+        <table id="table-data">
+          <thead>
+            <tr>
+              <th data-field="Name" >Name</th>
+              <th data-field="Population">Population</th>
+            </tr>
+          </thead>
+                  </table>
+      </div>
+    </div>
+    <div id="tab-manual" class="tab-pane fade " >
+      <div id="manual-toolbar" class="row">
+        <div class="col-sm-4"><h3>Manually created</h3></div>
+      </div>
+      <div class="row">
+        <table id="table-manual"></table>
+      </div> 
+    </div>
+  </div>    
+   <div class="source row">
+     <div>
+       Created using &nbsp; <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> &nbsp;&nbsp;Sources: &nbsp; 
+       <a target="new" href="demobootstraptable.lpr">Program</a>.
+     </div>
+    </div>
+  <script>
+    window.onload=function () { rtl.run() };
+  </script>
+</body>
+</html>

+ 637 - 0
demo/bootstrap/countries.json

@@ -0,0 +1,637 @@
+{
+  "metaData" : { "fields" : [ 
+    { "name": "Name", "type": "string"}, 
+    { "name" : "Population", "type": "int" }
+    ]
+  },
+  "Data" : [
+    {
+      "Name" : "Afghanistan",
+      "Population" : 31628000
+    },
+    {
+      "Name" : "Albania",
+      "Population" : 2894000
+    },
+    {
+      "Name" : "Algeria",
+      "Population" : 38934000
+    },
+    {
+      "Name" : "Angola",
+      "Population" : 24228000
+    },
+    {
+      "Name" : "Argentina",
+      "Population" : 42980000
+    },
+    {
+      "Name" : "Armenia",
+      "Population" : 3006000
+    },
+    {
+      "Name" : "Australia",
+      "Population" : 23491000
+    },
+    {
+      "Name" : "Austria",
+      "Population" : 8534000
+    },
+    {
+      "Name" : "Azerbaijan",
+      "Population" : 9538000
+    },
+    {
+      "Name" : "Bahrain",
+      "Population" : 1362000
+    },
+    {
+      "Name" : "Bangladesh",
+      "Population" : 159078000
+    },
+    {
+      "Name" : "Belarus",
+      "Population" : 9470000
+    },
+    {
+      "Name" : "Belgium",
+      "Population" : 11225000
+    },
+    {
+      "Name" : "Benin",
+      "Population" : 10598000
+    },
+    {
+      "Name" : "Bolivia",
+      "Population" : 10562000
+    },
+    {
+      "Name" : "Bosnia and Herzegovina",
+      "Population" : 3818000
+    },
+    {
+      "Name" : "Botswana",
+      "Population" : 2220000
+    },
+    {
+      "Name" : "Brazil",
+      "Population" : 206078000
+    },
+    {
+      "Name" : "Bulgaria",
+      "Population" : 7226000
+    },
+    {
+      "Name" : "Burkina Faso",
+      "Population" : 17589000
+    },
+    {
+      "Name" : "Burundi",
+      "Population" : 10817000
+    },
+    {
+      "Name" : "Cambodia",
+      "Population" : 15328000
+    },
+    {
+      "Name" : "Cameroon",
+      "Population" : 22773000
+    },
+    {
+      "Name" : "Canada",
+      "Population" : 35540000
+    },
+    {
+      "Name" : "Central African Republic",
+      "Population" : 4804000
+    },
+    {
+      "Name" : "Chad",
+      "Population" : 13587000
+    },
+    {
+      "Name" : "Chile",
+      "Population" : 17763000
+    },
+    {
+      "Name" : "China",
+      "Population" : 1364270000
+    },
+    {
+      "Name" : "Colombia",
+      "Population" : 47791000
+    },
+    {
+      "Name" : "Congo Dem. Rep.",
+      "Population" : 74877000
+    },
+    {
+      "Name" : "Congo Rep.",
+      "Population" : 4505000
+    },
+    {
+      "Name" : "Costa Rica",
+      "Population" : 4758000
+    },
+    {
+      "Name" : "Croatia",
+      "Population" : 4236000
+    },
+    {
+      "Name" : "Cuba",
+      "Population" : 11379000
+    },
+    {
+      "Name" : "Cyprus",
+      "Population" : 1154000
+    },
+    {
+      "Name" : "Czech Republic",
+      "Population" : 10511000
+    },
+    {
+      "Name" : "Denmark",
+      "Population" : 5640000
+    },
+    {
+      "Name" : "Dominican Republic",
+      "Population" : 10406000
+    },
+    {
+      "Name" : "Ecuador",
+      "Population" : 15903000
+    },
+    {
+      "Name" : "Egypt Arab Rep.",
+      "Population" : 89580000
+    },
+    {
+      "Name" : "El Salvador",
+      "Population" : 6108000
+    },
+    {
+      "Name" : "Eritrea",
+      "Population" : 5110000
+    },
+    {
+      "Name" : "Estonia",
+      "Population" : 1314000
+    },
+    {
+      "Name" : "Ethiopia",
+      "Population" : 96959000
+    },
+    {
+      "Name" : "Finland",
+      "Population" : 5464000
+    },
+    {
+      "Name" : "France",
+      "Population" : 66207000
+    },
+    {
+      "Name" : "Gabon",
+      "Population" : 1688000
+    },
+    {
+      "Name" : "Gambia The",
+      "Population" : 1928000
+    },
+    {
+      "Name" : "Georgia",
+      "Population" : 4504000
+    },
+    {
+      "Name" : "Germany",
+      "Population" : 80890000
+    },
+    {
+      "Name" : "Ghana",
+      "Population" : 26787000
+    },
+    {
+      "Name" : "Greece",
+      "Population" : 10958000
+    },
+    {
+      "Name" : "Guatemala",
+      "Population" : 16015000
+    },
+    {
+      "Name" : "Guinea-Bissau",
+      "Population" : 1801000
+    },
+    {
+      "Name" : "Guinea",
+      "Population" : 12276000
+    },
+    {
+      "Name" : "Haiti",
+      "Population" : 10572000
+    },
+    {
+      "Name" : "Honduras",
+      "Population" : 7962000
+    },
+    {
+      "Name" : "Hong Kong SAR China",
+      "Population" : 7242000
+    },
+    {
+      "Name" : "Hungary",
+      "Population" : 9862000
+    },
+    {
+      "Name" : "India",
+      "Population" : 1295292000
+    },
+    {
+      "Name" : "Indonesia",
+      "Population" : 254455000
+    },
+    {
+      "Name" : "Iran Islamic Rep.",
+      "Population" : 78144000
+    },
+    {
+      "Name" : "Iraq",
+      "Population" : 34812000
+    },
+    {
+      "Name" : "Ireland",
+      "Population" : 4613000
+    },
+    {
+      "Name" : "Israel",
+      "Population" : 8215000
+    },
+    {
+      "Name" : "Italy",
+      "Population" : 61336000
+    },
+    {
+      "Name" : "Jamaica",
+      "Population" : 2721000
+    },
+    {
+      "Name" : "Japan",
+      "Population" : 127132000
+    },
+    {
+      "Name" : "Jordan",
+      "Population" : 6607000
+    },
+    {
+      "Name" : "Kazakhstan",
+      "Population" : 17289000
+    },
+    {
+      "Name" : "Kenya",
+      "Population" : 44864000
+    },
+    {
+      "Name" : "Korea Dem. Rep.",
+      "Population" : 25027000
+    },
+    {
+      "Name" : "Korea Rep.",
+      "Population" : 50424000
+    },
+    {
+      "Name" : "Kosovo",
+      "Population" : 1823000
+    },
+    {
+      "Name" : "Kuwait",
+      "Population" : 3753000
+    },
+    {
+      "Name" : "Kyrgyz Republic",
+      "Population" : 5834000
+    },
+    {
+      "Name" : "Lao PDR",
+      "Population" : 6689000
+    },
+    {
+      "Name" : "Latvia",
+      "Population" : 1990000
+    },
+    {
+      "Name" : "Lebanon",
+      "Population" : 4547000
+    },
+    {
+      "Name" : "Lesotho",
+      "Population" : 2109000
+    },
+    {
+      "Name" : "Liberia",
+      "Population" : 4397000
+    },
+    {
+      "Name" : "Libya",
+      "Population" : 6259000
+    },
+    {
+      "Name" : "Lithuania",
+      "Population" : 2929000
+    },
+    {
+      "Name" : "Macedonia FYR",
+      "Population" : 2076000
+    },
+    {
+      "Name" : "Madagascar",
+      "Population" : 23572000
+    },
+    {
+      "Name" : "Malawi",
+      "Population" : 16695000
+    },
+    {
+      "Name" : "Malaysia",
+      "Population" : 29902000
+    },
+    {
+      "Name" : "Mali",
+      "Population" : 17086000
+    },
+    {
+      "Name" : "Mauritania",
+      "Population" : 3970000
+    },
+    {
+      "Name" : "Mauritius",
+      "Population" : 1261000
+    },
+    {
+      "Name" : "Mexico",
+      "Population" : 125386000
+    },
+    {
+      "Name" : "Moldova",
+      "Population" : 3556000
+    },
+    {
+      "Name" : "Mongolia",
+      "Population" : 2910000
+    },
+    {
+      "Name" : "Morocco",
+      "Population" : 33921000
+    },
+    {
+      "Name" : "Mozambique",
+      "Population" : 27216000
+    },
+    {
+      "Name" : "Myanmar",
+      "Population" : 53437000
+    },
+    {
+      "Name" : "Namibia",
+      "Population" : 2403000
+    },
+    {
+      "Name" : "Nepal",
+      "Population" : 28175000
+    },
+    {
+      "Name" : "Netherlands",
+      "Population" : 16854000
+    },
+    {
+      "Name" : "New Zealand",
+      "Population" : 4510000
+    },
+    {
+      "Name" : "Nicaragua",
+      "Population" : 6014000
+    },
+    {
+      "Name" : "Niger",
+      "Population" : 19114000
+    },
+    {
+      "Name" : "Nigeria",
+      "Population" : 177476000
+    },
+    {
+      "Name" : "Norway",
+      "Population" : 5136000
+    },
+    {
+      "Name" : "Oman",
+      "Population" : 4236000
+    },
+    {
+      "Name" : "Pakistan",
+      "Population" : 185044000
+    },
+    {
+      "Name" : "Panama",
+      "Population" : 3868000
+    },
+    {
+      "Name" : "Papua New Guinea",
+      "Population" : 7464000
+    },
+    {
+      "Name" : "Paraguay",
+      "Population" : 6553000
+    },
+    {
+      "Name" : "Peru",
+      "Population" : 30973000
+    },
+    {
+      "Name" : "Philippines",
+      "Population" : 99139000
+    },
+    {
+      "Name" : "Poland",
+      "Population" : 37996000
+    },
+    {
+      "Name" : "Portugal",
+      "Population" : 10397000
+    },
+    {
+      "Name" : "Puerto Rico",
+      "Population" : 3548000
+    },
+    {
+      "Name" : "Qatar",
+      "Population" : 2172000
+    },
+    {
+      "Name" : "Romania",
+      "Population" : 19911000
+    },
+    {
+      "Name" : "Russian Federation",
+      "Population" : 143820000
+    },
+    {
+      "Name" : "Rwanda",
+      "Population" : 11342000
+    },
+    {
+      "Name" : "Saudi Arabia",
+      "Population" : 30887000
+    },
+    {
+      "Name" : "Senegal",
+      "Population" : 14673000
+    },
+    {
+      "Name" : "Serbia",
+      "Population" : 7129000
+    },
+    {
+      "Name" : "Sierra Leone",
+      "Population" : 6316000
+    },
+    {
+      "Name" : "Singapore",
+      "Population" : 5470000
+    },
+    {
+      "Name" : "Slovak Republic",
+      "Population" : 5419000
+    },
+    {
+      "Name" : "Slovenia",
+      "Population" : 2062000
+    },
+    {
+      "Name" : "Somalia",
+      "Population" : 10518000
+    },
+    {
+      "Name" : "South Africa",
+      "Population" : 54002000
+    },
+    {
+      "Name" : "South Sudan",
+      "Population" : 11911000
+    },
+    {
+      "Name" : "Spain",
+      "Population" : 46405000
+    },
+    {
+      "Name" : "Sri Lanka",
+      "Population" : 20639000
+    },
+    {
+      "Name" : "Sudan",
+      "Population" : 39350000
+    },
+    {
+      "Name" : "Swaziland",
+      "Population" : 1269000
+    },
+    {
+      "Name" : "Sweden",
+      "Population" : 9690000
+    },
+    {
+      "Name" : "Switzerland",
+      "Population" : 8190000
+    },
+    {
+      "Name" : "Syrian Arab Republic",
+      "Population" : 22158000
+    },
+    {
+      "Name" : "Tajikistan",
+      "Population" : 8296000
+    },
+    {
+      "Name" : "Tanzania",
+      "Population" : 51823000
+    },
+    {
+      "Name" : "Thailand",
+      "Population" : 67726000
+    },
+    {
+      "Name" : "Timor-Leste",
+      "Population" : 1212000
+    },
+    {
+      "Name" : "Togo",
+      "Population" : 7115000
+    },
+    {
+      "Name" : "Trinidad and Tobago",
+      "Population" : 1354000
+    },
+    {
+      "Name" : "Tunisia",
+      "Population" : 10997000
+    },
+    {
+      "Name" : "Turkey",
+      "Population" : 75932000
+    },
+    {
+      "Name" : "Turkmenistan",
+      "Population" : 5307000
+    },
+    {
+      "Name" : "Uganda",
+      "Population" : 37783000
+    },
+    {
+      "Name" : "Ukraine",
+      "Population" : 45363000
+    },
+    {
+      "Name" : "United Arab Emirates",
+      "Population" : 9086000
+    },
+    {
+      "Name" : "United Kingdom",
+      "Population" : 64510000
+    },
+    {
+      "Name" : "United States",
+      "Population" : 318857000
+    },
+    {
+      "Name" : "Uruguay",
+      "Population" : 3420000
+    },
+    {
+      "Name" : "Uzbekistan",
+      "Population" : 30743000
+    },
+    {
+      "Name" : "Venezuela RB",
+      "Population" : 30694000
+    },
+    {
+      "Name" : "Vietnam",
+      "Population" : 90730000
+    },
+    {
+      "Name" : "West Bank and Gaza",
+      "Population" : 4295000
+    },
+    {
+      "Name" : "Yemen Rep.",
+      "Population" : 26184000
+    },
+    {
+      "Name" : "Zambia",
+      "Population" : 15721000
+    },
+    {
+      "Name" : "Zimbabwe",
+      "Population" : 15246000
+    }
+  ]
+}

+ 82 - 0
demo/bootstrap/demobootstraptable.lpi

@@ -0,0 +1,82 @@
+<?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="demobootstraptable"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="2">
+      <Item0 Name="PasJSPort" Value="0"/>
+      <Item1 Name="PasJSWebBrowserProject" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+      <Modes Count="0"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="demobootstraptable.lpr"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target FileExt=".js">
+      <Filename Value="demobootstraptable"/>
+    </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 Count="3">
+      <Item1>
+        <Name Value="EAbort"/>
+      </Item1>
+      <Item2>
+        <Name Value="ECodetoolError"/>
+      </Item2>
+      <Item3>
+        <Name Value="EFOpenError"/>
+      </Item3>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

+ 141 - 0
demo/bootstrap/demobootstraptable.lpr

@@ -0,0 +1,141 @@
+program demobootstraptable;
+
+{$mode objfpc}
+
+uses
+  JS, Classes, SysUtils, Web, libjquery, libbootstraptable, browserapp, DB, ExtJSDataset;
+
+Type
+
+  { TDemo }
+
+  TDemo = class(TBrowserApplication)
+  Private
+    xhr:TJSXMLHttpRequest;
+    FDS : TExtJSJSONObjectDataSet;
+    function CreateRow(AName: String; APopulation: NativeInt): TJSHTMLElement;
+    procedure CreateTable;
+    function onLoad(Event: TEventListenerEvent): boolean;
+  Protected
+    procedure DoRun; override;
+  end;
+
+{ TDemo }
+
+procedure TDemo.doRun;
+
+Var
+  O : TBootstrapTableOptions;
+
+begin
+  inherited doRun;
+  // Using plain TJSObject
+  JQuery('#table-prefilled').BootStrapTable(New(['search',true,'showColumns',true]));
+  // Using TBootstrapTableOptions
+  O:=TBootstrapTableOptions.new;
+  O.search:=true;
+  O.showColumns:=true;
+  O.pagination:=true;
+  O.showExtendedPagination:=True;
+  O.url:='countries.json';
+  O.sidePagination:='client';
+  O.dataField:='Data';
+  JQuery('#table-data').BootStrapTable(O);
+  JQuery('#table-data').RefreshTable(New([]));
+  // Using dataset
+  FDS:=TExtJSJSONObjectDataSet.Create(Nil);
+  xhr:=TJSXMLHttpRequest.New;
+  xhr.addEventListener('load', @OnLoad);
+  xhr.open('GET', 'countries.json', true);
+  xhr.send;
+end;
+
+function TDemo.onLoad(Event: TEventListenerEvent): boolean;
+
+var
+  i : integer;
+  C,J : TJSObject;
+  N,TB : TJSElement;
+
+begin
+  if (xhr.status = 200) then
+    begin
+    J:=TJSJSON.parseObject(xhr.responseText);
+    FDS.Metadata:=TJSObject(J.Properties['metaData']);
+    FDS.Rows:=TJSArray(J.Properties['Data']);
+    FDS.Open;
+    CreateTable;
+    end
+  else
+    begin
+    N:=Document.CreateElement('div');
+    N.appendChild(Document.createTextNode('Failed to load countries: '+IntToStr(xhr.Status)));
+    document.GetElementByID('tab-manual').appendChild(N);
+    end;
+end;
+
+procedure TDemo.CreateTable;
+
+Var
+  TB,P,R,C : TJSHTMLElement;
+  FName,FPop : TField;
+  O : TBootstrapTableOptions;
+
+begin
+  TB:=GetHTMLElement('table-manual');
+  P:=CreateHTMLElement('THEAD');
+  TB.AppendChild(P);
+  R:=CreateHTMLElement('TR');
+  P.AppendChild(R);
+  C:=CreateHTMLElement('TH');
+  C.InnerText:='Name';
+  C.Dataset['field']:='Name';
+  R.AppendChild(C);
+  C:=CreateHTMLElement('TH');
+  C.InnerText:='Pop.';
+  C.Dataset['field']:='Population';
+  R.AppendChild(C);
+  P:=CreateHTMLElement('TBODY');
+  TB.AppendChild(P);
+  FName:=FDS.FieldByName('Name');
+  FPop:=FDS.FieldByName('Population');
+  While not FDS.EOF do
+    begin
+    P.AppendChild(CreateRow(FName.AsString,FPop.AsInteger));
+    FDS.Next;
+    end;
+  O:=TBootstrapTableOptions.new;
+  O.search:=true;
+  O.showColumns:=true;
+  O.pagination:=true;
+  O.showExtendedPagination:=True;
+  O.url:='countries.json';
+  O.sidePagination:='client';
+  O.dataField:='Data';
+  JQuery(TB).BootStrapTable(O);
+end;
+
+function TDemo.CreateRow(AName : String; APopulation : NativeInt) : TJSHTMLElement;
+
+Var
+  C : TJSHTMLElement;
+
+begin
+  Result:=createHTMLElement('TR');
+  C:=createHTMLElement('TD');
+  Result.Append(C);
+  C.appendChild(Document.createTextNode(AName));
+  C:=createHTMLElement('TD');
+  Result.Append(C);
+  C.AppendChild(document.createTextNode(IntToStr(APopulation)));
+end;
+
+
+
+begin
+  With TDemo.Create(Nil) do
+    begin
+    Initialize;
+    Run;
+    end;
+end.

+ 293 - 0
packages/bootstrap/libbootstrap.pp

@@ -0,0 +1,293 @@
+unit libbootstrap;
+
+{$mode objfpc}
+{$modeswitch externalclass}
+
+interface
+
+uses
+  JS, web, libjquery;
+
+Type
+
+  { TBootstrap }
+
+  TBootstrapModalOptions = Class external name 'Object' (TJSObject)
+    show : boolean;
+    focus : boolean;
+    keyboard : boolean;
+    backdrop : boolean;
+  end;
+
+  TBootstrapToastOptions = Class external name 'Object' (TJSObject)
+    animation : boolean;
+    autohide : boolean;
+    delay : NativeInt;
+  end;
+
+  TSanitizeFunction = reference to function(arg: jsValue): jsvalue;
+
+  TBootstrapTooltipOptions = Class external name 'Object' (TJSObject)
+    animation : boolean;
+    container : jsValue;
+    delay : jsValue;
+    html : boolean;
+    placement : jsValue;
+    selector : jsValue;
+    template : string;
+    title : jsValue;
+    trigger: string;
+    offset : jsvalue;
+    fallbackPlacement : JSValue;
+    boundary : JSValue;
+    sanitize : boolean;
+    whiteList: TJSObject;
+    sanitizeFn : TSanitizeFunction;
+  end;
+
+  TBootstrapCarouselOptions = Class external name 'Object' (TJSObject)
+    interval : nativeint;
+    keyboard : boolean;
+    pause : boolean;
+    pauseStr: string; external name 'pause';
+    ride: string;
+    wrap : boolean;
+    touch : boolean;
+  end;
+
+  TBootstrapDropDownOptions = Class external name 'Object' (TJSObject)
+    offset : JSValue;
+    flip : boolean;
+    boundary : string;
+    boundaryEl : TJSHTMLElement; external name 'boundary';
+    reference : string;
+    referenceEl : TJSHTMLElement; external name 'reference';
+    display : string;
+  end;
+
+  TBootstrap = Class helper for TJQuery
+    Procedure modal; external name 'modal';
+    Procedure modal(aCommand : string); external name 'modal';
+    Procedure modal(aOptions : TJSObject); external name 'modal';
+    Procedure modal(aOptions : TBootstrapModalOptions); external name 'modal';
+    Procedure ModalToggle;
+    Procedure ModalShow;
+    Procedure ModalHide;
+    Procedure ModalDispose;
+    Procedure ModalHandleUpdate;
+    Procedure Toast; external name 'toast';
+    Procedure Toast(aCommand : string); external name 'toast';
+    Procedure Toast(aOptions : TJSObject); external name 'toast';
+    Procedure ToastShow;
+    Procedure ToastHide;
+    Procedure ToastDispose;
+    Procedure Tab;external name 'tab';
+    Procedure Tab(aCommand : String) ;external name 'tab';
+    Procedure TabShow;
+    Procedure TabDispose;
+    Procedure ToolTip; external name 'tooltip';
+    Procedure ToolTip(aOptions : TJSObject); external name 'tooltip';
+    Procedure ToolTip(aOptions : TBootstrapTooltipOptions); external name 'tooltip';
+    Procedure ToolTip(aCommand : string); external name 'tooltip';
+    Procedure ToolTipShow;
+    Procedure ToolTipHide;
+    Procedure ToolTipToggle;
+    Procedure ToolTipDispose;
+    Procedure ToolTipEnable;
+    Procedure ToolTipDisable;
+    Procedure ToolTipToggleEnabled;
+    Procedure ToolTipUpdate;
+    Procedure Alert; external name 'alert';
+    Procedure Alert(aCommand : string); external name 'alert';
+    Procedure AlertClose;
+    Procedure AlertDispose;
+    Procedure Button(aCommand : string); external name 'button';
+    Procedure ButtonDispose;
+    Procedure ButtonToggle;
+    Procedure Carousel; external name 'carousel';
+    Procedure Carousel(aCommand : string); external name 'carousel';
+    Procedure Carousel(options : TJSObject); external name 'carousel';
+    Procedure Carousel(options : TBootstrapCarouselOptions); external name 'carousel';
+    Procedure Carousel(aIndex : Integer); external name 'carousel';
+    Procedure CarouselCycle;
+    Procedure CarouselPause;
+    Procedure CarouselPrev;
+    Procedure CarouselNext;
+    Procedure CarouselDispose;
+    Procedure DropDown; external name 'dropdown';
+    Procedure DropDown(aCommand : string); external name 'dropdown';
+    Procedure DropDown(options : TJSObject); external name 'dropdown';
+    Procedure DropDown(options : TBootstrapDropDownOptions); external name 'dropdown';
+    Procedure DropDownToggle;
+    Procedure DropDownShow;
+    Procedure DropDownHide;
+    Procedure DropDownUpdate;
+    Procedure DropDownDispose;
+  end;
+
+implementation
+
+{ TBootstrap }
+
+procedure TBootstrap.ModalToggle;
+begin
+  Modal('toggle');
+end;
+
+procedure TBootstrap.ModalShow;
+begin
+  Modal('show');
+end;
+
+procedure TBootstrap.ModalHide;
+begin
+  Modal('hide');
+end;
+
+procedure TBootstrap.ModalDispose;
+begin
+  Modal('dispose');
+end;
+
+procedure TBootstrap.ModalHandleUpdate;
+begin
+  Modal('handleupdate');
+end;
+
+procedure TBootstrap.ToastShow;
+begin
+  Toast('show');
+end;
+
+procedure TBootstrap.ToastHide;
+begin
+  Toast('hide');
+end;
+
+procedure TBootstrap.ToastDispose;
+begin
+  Toast('dispose');
+end;
+
+procedure TBootstrap.TabShow;
+begin
+  Tab('show');
+end;
+
+procedure TBootstrap.TabDispose;
+begin
+  Tab('dispose');
+end;
+
+procedure TBootstrap.ToolTipShow;
+begin
+  ToolTip('show');
+end;
+
+procedure TBootstrap.ToolTipHide;
+begin
+  ToolTip('hide');
+end;
+
+procedure TBootstrap.ToolTipToggle;
+begin
+  ToolTip('toggle');
+end;
+
+procedure TBootstrap.ToolTipDispose;
+begin
+  ToolTip('dispose');
+end;
+
+procedure TBootstrap.ToolTipEnable;
+begin
+  ToolTip('enable');
+end;
+
+procedure TBootstrap.ToolTipDisable;
+begin
+  ToolTip('disable');
+end;
+
+procedure TBootstrap.ToolTipToggleEnabled;
+begin
+  ToolTip('toggleEnabled');
+end;
+
+procedure TBootstrap.ToolTipUpdate;
+begin
+  ToolTip('update');
+end;
+
+procedure TBootstrap.AlertClose;
+begin
+  Alert('close');
+end;
+
+procedure TBootstrap.AlertDispose;
+begin
+  Alert('dispose');
+end;
+
+procedure TBootstrap.ButtonDispose;
+begin
+  Button('dispose');
+end;
+
+procedure TBootstrap.ButtonToggle;
+begin
+  Button('toggle');
+end;
+
+procedure TBootstrap.CarouselCycle;
+begin
+  Carousel('cycle');
+end;
+
+procedure TBootstrap.CarouselPause;
+begin
+  Carousel('pause');
+end;
+
+procedure TBootstrap.CarouselPrev;
+begin
+  Carousel('prev');
+end;
+
+procedure TBootstrap.CarouselNext;
+begin
+  Carousel('next');
+end;
+
+procedure TBootstrap.CarouselDispose;
+begin
+  Carousel('dispose');
+end;
+
+procedure TBootstrap.DropDownToggle;
+begin
+  dropdown('toggle');
+end;
+
+procedure TBootstrap.DropDownShow;
+begin
+  dropdown('show');
+end;
+
+procedure TBootstrap.DropDownHide;
+begin
+  dropdown('hide');
+end;
+
+procedure TBootstrap.DropDownUpdate;
+begin
+  dropdown('update');
+end;
+
+procedure TBootstrap.DropDownDispose;
+begin
+  dropdown('dispose');
+end;
+
+end.
+

+ 595 - 0
packages/bootstrap/libbootstraptable.pp

@@ -0,0 +1,595 @@
+unit libbootstraptable;
+
+{$mode objfpc}
+{$modeswitch externalclass}
+
+interface
+
+uses
+  types, web, libjquery, js, libbootstrap;
+
+Type
+  TTableStyle = Class external name 'Object' (TJSObject)
+    css: TJSObject;
+    classes: string;
+  end;
+
+  TRowStyleHandler = reference to function (row: TJSObject; index : NativeInt) : TTableStyle;
+  TCellStyleHandler = reference to function (Value : JSValue; Row : TJSObject; index : Integer) : TTableStyle;
+  TRowSortHandler = reference to function (Const sortName,sortOrder : string; row: TJSObject) : nativeint;
+  TColSortHandler = reference to function (Const fieldA,FieldB : JSValue; RowA,RowB: TJSObject) : nativeint;
+  TAjaxHandler = reference to function (aURL : String; aSettings : TJSObject) : tJQXHR;
+  TQueryParamsFunction = reference to function (params : TJSObject) : JSValue;
+  TResponseFunction =  reference to function (res : JSValue) : JSValue;
+  TSearchFunction = reference to function (data : TJSArray; aText : String) : TJSArray;
+  TIgnoreClickHandler = reference to function (el : TJSHTMLELement) : Boolean;
+  TDetailFormatHandler = reference to function (Index :Integer; Row : TJSObject; el : TJSHTMLElement) : String;
+  TDetailFilterHandler = reference to function (Index :Integer; Row : TJSObject) : boolean;
+  TColFormatterHandler = reference to function (value : JSValue; row : TJSObject; Index : Integer; Field : String) : String;
+  TFooterFormatterHandler = reference to function (Rows : TJSValueDynArray) : String;
+  TDetailFormatterHandler = reference to function (index : integer; row : TJSObject; el : TJSHTMLElement) : String;
+
+  TBootstrapTableColumn = Class external name 'Object' (TJSObject)
+    field : String;
+    title : String;
+    titleTooltip : string;
+    class_ : string; external name 'class';
+    width : Integer;
+    widthUnit : String;
+    rowspan : Integer;
+    colspan : Integer;
+    align : String;
+    halign : String;
+    falign : String;
+    valign : string;
+    cellStyle : TCellStyleHandler;
+    radio : boolean;
+    checkbox : boolean;
+    checkboxEnabled : Boolean;
+    clickToSelect : Boolean;
+    showSelectTitle : Boolean;
+    sortable : Boolean;
+    sortName : String;
+    order : string;
+    sorter : TColSortHandler;
+    visible : Boolean;
+    switchable : Boolean;
+    cardVisible : Boolean;
+    searchable : Boolean;
+    formatter : TColFormatterHandler ;
+    footerFormatter : TFooterFormatterHandler;
+    detailFormatter : TDetailFormatterHandler;
+    searchFormatter : boolean;
+    escape : boolean;
+    events : TJSObject;
+  end;
+  TBootstrapTableColumnArray = array of TBootstrapTableColumn;
+
+  TFooterStyleHandler = Reference to function(col : TBootstrapTableColumn) :  TTableStyle;
+
+
+  TBootstrapTableOptions = class external name 'Object' (TJSObject)
+    ajax : TAjaxHandler;
+    ajaxOptions : TJSObject;
+    buttonsAlign : String;
+    buttonsClass : String;
+    buttonsPrefix : String;
+    buttonsToolbar : JSValue;
+    cache : Boolean;
+    cardView : Boolean;
+    checkboxHeader : Boolean;
+    classes : string;
+    clickToSelect : Boolean;
+    columns : TBootstrapTableColumnArray;
+    contentType : string;
+    customSearch : TSearchFunction;
+    customSort : TRowSortHandler;
+    data : JSValue; // Object or aray
+    dataField : string;
+    dataType : string;
+    detailFilter : TDetailFilterHandler;
+    detailFormatter : TDetailFormatHandler;
+    detailView : Boolean;
+    detailViewByClick : Boolean;
+    detailViewIcon : Boolean;
+    escape : Boolean;
+    filterOptions : Boolean;
+    footerStyle : TFooterStyleHandler;
+    height : Integer;
+    html : TJSObject;
+    icons : TJSObject;
+    iconSize : String;
+    iconsPrefix : String;
+    idField : String;
+    ignoreClickToSelectOn : TIgnoreClickHandler;
+    locale : string;
+    maintainMetaData : Boolean;
+    method : string;
+    minimumCountColumns : NativeInt;
+    multipleSelectRow : Boolean;
+    onlyInfoPagination : Boolean;
+    pageList : TNativeIntDynArray;
+    pageNumber : NativeInt;
+    pageSize : NativeInt;
+    pagination : boolean;
+    paginationDetailHAlign : string;
+    paginationHAlign : string;
+    paginationLoop : Boolean;
+    paginationNextText : String;
+    paginationPagesBySide : NativeInt;
+    paginationPreText : string;
+    paginationSuccessivelySize : NativeInt;
+    paginationUseIntermediate : Boolean;
+    paginationVAlign : string;
+    queryParams : TQueryParamsFunction;
+    queryParamsType : String;
+    rememberOrder : boolean;
+    responseHandler : TResponseFunction;
+    rowAttributes : TRowStyleHandler;
+    rowStyle : TRowStyleHandler;
+    search : boolean;
+    searchAlign : String;
+    searchOnEnterKey : Boolean;
+    searchText :  string;
+    searchTimeOut : Boolean;
+    selectItemName : String;
+    showButtonIcon : Boolean;
+    showButtonIcons : Boolean;
+    showButtonText : Boolean;
+    showColumns : Boolean;
+    showColumnsToggleAll : Boolean;
+    showExtendedPagination : boolean;
+    showFooter : Boolean;
+    showFullscreen : Boolean;
+    showHeader : Boolean;
+    showPaginationSwitch : Boolean;
+    showRefresh : Boolean;
+    showSearchButton : Boolean;
+    showSearchClearButton : Boolean;
+    showToggle : Boolean;
+    sidePagination : String;
+    silentSort : Boolean;
+    singleSelect : Boolean;
+    smartDisplay : Boolean;
+    sortable : boolean;
+    sortClass : String;
+    sortName : string;
+    sortOrder : String;
+    sortStable : boolean;
+    strictSearch : Boolean;
+    theadClasses : string;
+    toolbar : JSValue;
+    toolbarAlign : String;
+    totalField : String;
+    totalNotFiltered : NativeInt;
+    totalNotFilteredField : String;
+    totalRows : NativeInt;
+    trimOnSearch : Boolean;
+    undefinedText : String;
+    uniqueId : Boolean;
+    url : string;
+    virtualScroll : Boolean;
+    virtualScrollItemHeight : Integer;
+    visibleSearch : Boolean;
+  end;
+  { TJSBootstrapTable }
+  TRefreshOptions = class external name 'Object' (TJSObject)
+    silent : boolean;
+    url : string;
+    pageNumber : Integer;
+    pageSize : integer;
+    query : TJSObject;
+  end;
+
+  TJSBootstrapTable = class helper(TBootstrap) for TJQuery
+  private
+  Public
+    Function BootstrapTable(command : string) : JSValue; varargs; overload; external name 'bootstrapTable';
+    Function BootstrapTable(options : TBootstrapTableOptions) : TJQuery; overload; external name 'bootstrapTable';
+    Function BootstrapTable(options : TJSObject) : TJQuery; overload; external name 'bootstrapTable';
+    Function getOptionsUnTyped : TJSObject;
+    Function getOptions : TBootstrapTableOptions;
+    function refreshOptions (Options : TBootstrapTableOptions) : TJQuery;
+    function getData (useCurrentPage : Boolean = False; includeHiddenRows : Boolean = False) : JSValue;
+    Function destroy : TJQuery; overload;
+    Function GetSelections : TJSArray;
+    Procedure Load(data : JSValue);
+    procedure Append(data: JSValue);
+    procedure Prepend(data: JSValue);
+    procedure RemoveAll;
+    Procedure insertRow(Index : Integer; RowData : JSValue);
+    procedure updateRow(Index: Integer; RowData: JSValue; Replace: Boolean=False);
+    function GetRowByUniqueID(aID : NativeInt): TJSObject;
+    Procedure UpdateByUniqueID(aID : NativeInt;RowData: JSValue; Replace: Boolean=False);
+    Procedure RemoveByUniqueID(aID : NativeInt);
+    Procedure UpdateCell(aIndex : NativeInt; aField,aValue : string; ReInit : Boolean = true);
+    Procedure UpdateCellByUniqueID(aId : NativeInt; aField,aValue : string; ReInit : Boolean = true);
+    Procedure ShowRow(aIndex : NativeInt);
+    Procedure ShowRowByUniqueID(aId : NativeInt);
+    Function GetHiddenRows(doShow : Boolean = False) : TJSArray;
+    Procedure ShowColumn(aField : String);
+    Procedure ShowColumn(aFields : TStringDynArray);
+    Procedure HideColumn(aField : String);
+    Procedure HideColumn(aFields : TStringDynArray);
+    function GetHiddenColumns: TJSArray;
+    function GetVisibleColumns: TJSArray;
+    Procedure ShowAllColumns;
+    Procedure HideAllColumns;
+    Procedure mergeCells(aIndex : integer; aField : String; RowSpan : Integer; ColSpan : Integer);
+    Procedure CheckAll;
+    Procedure UnCheckAll;
+    Procedure CheckInvert;
+    Procedure Check(aIndex : Integer);
+    Procedure UnCheck(aIndex : Integer);
+    Procedure CheckBy(Field : String; Values : TStringDynArray);
+    Procedure UnCheckBy(Field : String; Values : TStringDynArray);
+    Procedure RefreshTable(options : TRefreshOptions);
+    Procedure RefreshTable(options : TJSObject);
+    Procedure ResetView(options : TBootstrapTableOptions);
+    Procedure ResetWidth;
+    Procedure ShowLoading;
+    Procedure HideLoading;
+    Procedure TogglePagination;
+    Procedure ToggleFullScreen;
+    Procedure ToggleView;
+    Procedure ResetSearch;
+    Procedure FilterBy(aFilter : TJSObject; aOptions : TJSObject);
+    Procedure scrollToRow(aValue : Integer);
+    Procedure scrollToPixel(aValue : Integer);
+    Procedure scrollToBottom;
+    Function GetScrollPosition : NativeInt;
+    Procedure SelectPage(aIndex : Integer);
+    Procedure PrevPage;
+    Procedure NextPage;
+    procedure ToggleDetailView(Index : Integer);
+    procedure ExpandRow(Index: Integer);
+    procedure CollapseRow(Index: Integer);
+    procedure CollapseAllRows;
+    procedure ExpandAllRows;
+    procedure UpdateColumnTitle(const aField,aTitle : String);
+    procedure UpdateFormatText(const aFormat,aValue : String);
+  end;
+
+implementation
+
+{ TJSBootstrapTable }
+
+function TJSBootstrapTable.getOptionsUnTyped: TJSObject;
+begin
+  Result:=TJSObject(BootstrapTable('getOptions'))
+end;
+
+function TJSBootstrapTable.getOptions: TBootstrapTableOptions;
+begin
+  Result:=TBootstrapTableOptions(getoptionsUnTyped);
+end;
+
+function TJSBootstrapTable.refreshOptions(Options: TBootstrapTableOptions): TJQuery;
+begin
+  Result:=TJQuery(BootstrapTable('refreshOptions',Options));
+end;
+
+function TJSBootstrapTable.getData(useCurrentPage: Boolean; includeHiddenRows: Boolean): JSValue;
+begin
+  Result:=BootstrapTable('getdata',JS.New([
+     'useCurrentPage',useCurrentPage,
+     'includeHiddenRows',includeHiddenRows
+  ]));
+end;
+
+function TJSBootstrapTable.destroy: TJQuery;
+begin
+  Result:=TJQuery(BootstrapTable('destroy'));
+end;
+
+function TJSBootstrapTable.GetSelections: TJSArray;
+begin
+  Result:=TJSArray(BootstrapTable('getSelections'));
+end;
+
+procedure TJSBootstrapTable.Load(data: JSValue);
+begin
+  BootstrapTable('load',data);
+end;
+
+procedure TJSBootstrapTable.Append(data: JSValue);
+begin
+  BootstrapTable('append',data);
+end;
+
+procedure TJSBootstrapTable.Prepend(data: JSValue);
+
+begin
+  BootstrapTable('prepend',data);
+end;
+
+procedure TJSBootstrapTable.RemoveAll;
+begin
+  BootstrapTable('removeAll');
+end;
+
+procedure TJSBootstrapTable.insertRow(Index: Integer; RowData: JSValue);
+begin
+  BootstrapTable('insertRow',JS.new([
+    'index',index,
+    'row', RowData
+  ]));
+end;
+
+procedure TJSBootstrapTable.updateRow(Index: Integer; RowData: JSValue; Replace : Boolean = False);
+
+begin
+  BootstrapTable('updateRow',JS.new([
+    'index',index,
+    'row', rowData,
+    'replace', replace
+  ]));
+end;
+
+function TJSBootstrapTable.GetRowByUniqueID(aID: NativeInt): TJSObject;
+begin
+  Result:=TJSObject(BootstrapTable('getRowByUniqueId',aID));
+end;
+
+procedure TJSBootstrapTable.UpdateByUniqueID(aID: NativeInt; RowData: JSValue; Replace: Boolean);
+begin
+  BootstrapTable('updateByUniqueId',JS.new([
+    'id',aId,
+    'row', rowData,
+    'replace', replace
+  ]));
+end;
+
+procedure TJSBootstrapTable.RemoveByUniqueID(aID: NativeInt);
+begin
+  BootstrapTable('removeByUniqueId',aID);
+end;
+
+procedure TJSBootstrapTable.UpdateCell(aIndex: NativeInt; aField, aValue: string; ReInit : Boolean = true);
+begin
+  BootstrapTable('updateCell',JS.new([
+    'index',aIndex,
+    'field', aField,
+    'value', aValue,
+    'reinit', ReInit
+  ]));
+end;
+
+procedure TJSBootstrapTable.UpdateCellByUniqueID(aId: NativeInt; aField, aValue: string; ReInit: Boolean);
+begin
+  BootstrapTable('updateCellByUniqueID',JS.new([
+    'id',aId,
+    'field', aField,
+    'value', aValue,
+    'reinit', ReInit
+  ]));
+end;
+
+procedure TJSBootstrapTable.ShowRow(aIndex: NativeInt);
+begin
+  BootstrapTable('showRow',JS.new(['id',aIndex]));
+end;
+
+procedure TJSBootstrapTable.ShowRowByUniqueID(aId: NativeInt);
+begin
+  BootstrapTable('showRow',JS.new(['uniqueId',aId]));
+end;
+
+function TJSBootstrapTable.GetHiddenRows(doShow: Boolean): TJSArray;
+begin
+  Result:=TJSArray(BootstrapTable('getHiddenRows',doShow));
+end;
+
+procedure TJSBootstrapTable.ShowColumn(aField: String);
+begin
+  BootstrapTable('showColumn',aField);
+end;
+
+procedure TJSBootstrapTable.ShowColumn(aFields: TStringDynArray);
+begin
+  BootstrapTable('showColumn',aFields);
+end;
+
+procedure TJSBootstrapTable.HideColumn(aField: String);
+begin
+  BootstrapTable('hideColumn',aField);
+end;
+
+procedure TJSBootstrapTable.HideColumn(aFields: TStringDynArray);
+begin
+  BootstrapTable('hideColumn',aFields);
+end;
+
+function TJSBootstrapTable.GetHiddenColumns: TJSArray;
+begin
+  Result:=TJSArray(BootstrapTable('getHiddenColumns'));
+end;
+
+function TJSBootstrapTable.GetVisibleColumns: TJSArray;
+begin
+  Result:=TJSArray(BootstrapTable('getVisibleColumns'));
+end;
+
+procedure TJSBootstrapTable.ShowAllColumns;
+begin
+  BootstrapTable('showAllColumns');
+end;
+
+procedure TJSBootstrapTable.HideAllColumns;
+begin
+  BootstrapTable('hideAllColumns');
+end;
+
+procedure TJSBootstrapTable.mergeCells(aIndex: integer; aField: String; RowSpan: Integer; ColSpan: Integer);
+
+begin
+  BootstrapTable('mergeCells',JS.New([
+    'index',aIndex,
+    'field',aField,
+    'rowspan',rowspan,
+    'colspan',colspan
+  ]));
+end;
+
+procedure TJSBootstrapTable.CheckAll;
+begin
+  BootStrapTable('checkAll');
+end;
+
+procedure TJSBootstrapTable.UnCheckAll;
+begin
+  BootStrapTable('uncheckAll');
+end;
+
+procedure TJSBootstrapTable.CheckInvert;
+begin
+  BootStrapTable('checkInvert');
+end;
+
+procedure TJSBootstrapTable.Check(aIndex: Integer);
+begin
+  BootStrapTable('check',aIndex);
+end;
+
+procedure TJSBootstrapTable.UnCheck(aIndex: Integer);
+begin
+  BootStrapTable('uncheck',aIndex);
+end;
+
+procedure TJSBootstrapTable.CheckBy(Field: String; Values: TStringDynArray);
+begin
+  BootStrapTable('checkBy',JS.New(['field',Field,'values',Values]));
+end;
+
+procedure TJSBootstrapTable.UnCheckBy(Field: String; Values: TStringDynArray);
+begin
+  BootStrapTable('uncheckBy',JS.New(['field',Field,'values',Values]));
+end;
+
+procedure TJSBootstrapTable.RefreshTable(options: TRefreshOptions);
+begin
+  BootStrapTable('refresh',options);
+end;
+
+procedure TJSBootstrapTable.RefreshTable(options: TJSObject);
+begin
+  BootStrapTable('refresh',options);
+end;
+
+procedure TJSBootstrapTable.ResetView(options: TBootstrapTableOptions);
+begin
+  BootStrapTable('resetView',options);
+end;
+
+procedure TJSBootstrapTable.ResetWidth;
+begin
+  BootStrapTable('resetWidth');
+end;
+
+procedure TJSBootstrapTable.ShowLoading;
+begin
+  BootStrapTable('showLoading');
+end;
+
+procedure TJSBootstrapTable.HideLoading;
+begin
+  BootStrapTable('hideLoading');
+end;
+
+procedure TJSBootstrapTable.TogglePagination;
+begin
+  BootStrapTable('togglePagination');
+end;
+
+procedure TJSBootstrapTable.ToggleFullScreen;
+begin
+  BootStrapTable('toggleFullScreen');
+end;
+
+procedure TJSBootstrapTable.ToggleView;
+begin
+  BootStrapTable('toggleView');
+end;
+
+procedure TJSBootstrapTable.ResetSearch;
+begin
+  BootStrapTable('resetSearch');
+end;
+
+procedure TJSBootstrapTable.FilterBy(aFilter: TJSObject; aOptions: TJSObject);
+begin
+  BootStrapTable('filterBy',JS.New(['filter',aFilter,'options',aOptions]));
+end;
+
+procedure TJSBootstrapTable.scrollToRow(aValue: Integer);
+begin
+  BootStrapTable('scrollTo',JS.New(['unit','rows','value',aValue]));
+end;
+
+procedure TJSBootstrapTable.scrollToPixel(aValue: Integer);
+begin
+  BootStrapTable('scrollTo',JS.New(['unit','px','value',aValue]));
+end;
+
+procedure TJSBootstrapTable.scrollToBottom;
+begin
+  BootStrapTable('scrollTo','bottom');
+end;
+
+function TJSBootstrapTable.GetScrollPosition: NativeInt;
+begin
+  Result:=NativeInt(BootStrapTable('getScrollPosition'));
+end;
+
+procedure TJSBootstrapTable.SelectPage(aIndex: Integer);
+begin
+  BootStrapTable('selectPage',aIndex);
+end;
+
+procedure TJSBootstrapTable.PrevPage;
+begin
+  BootStrapTable('prevPage');
+end;
+
+procedure TJSBootstrapTable.NextPage;
+begin
+  BootStrapTable('nextPage');
+end;
+
+procedure TJSBootstrapTable.ToggleDetailView(Index: Integer);
+begin
+  BootStrapTable('toggleDetailView',Index);
+end;
+procedure TJSBootstrapTable.ExpandRow(Index: Integer);
+begin
+  BootStrapTable('expandRow',Index);
+end;
+
+procedure TJSBootstrapTable.CollapseRow(Index: Integer);
+begin
+  BootStrapTable('collapseRow',Index);
+end;
+
+procedure TJSBootstrapTable.CollapseAllRows;
+begin
+  BootStrapTable('collapseAllRows');
+end;
+
+procedure TJSBootstrapTable.ExpandAllRows;
+begin
+  BootStrapTable('expandAllRows');
+end;
+
+procedure TJSBootstrapTable.UpdateColumnTitle(const aField, aTitle: String);
+begin
+  BootStrapTable('updateColumnTitle',JS.New(['field',aField,'title',aTitle]));
+end;
+
+procedure TJSBootstrapTable.UpdateFormatText(const aFormat, aValue: String);
+begin
+  BootStrapTable('updateFormatText',aFormat,aValue);
+end;
+
+
+end.
+

+ 14 - 0
packages/fcl-base/browserapp.pas

@@ -13,6 +13,8 @@ type
 
   TBrowserApplication = class(TCustomApplication)
   protected
+    function GetHTMLElement(aID : String) : TJSHTMLElement;
+    function CreateHTMLElement(aTag : String; aID : String = '') : TJSHTMLElement;
     procedure DoRun; override;
     function GetConsoleApplication: boolean; override;
     function GetLocation: String; override;
@@ -89,6 +91,18 @@ end;
 
 { TBrowserApplication }
 
+function TBrowserApplication.GetHTMLElement(aID: String): TJSHTMLElement;
+begin
+  Result:=TJSHTMLElement(Document.getElementById(aID));
+end;
+
+function TBrowserApplication.CreateHTMLElement(aTag: String; aID: String): TJSHTMLElement;
+begin
+  Result:=TJSHTMLElement(Document.createElement(aTag));
+  if aID<>'' then
+    Result.ID:=aID;
+end;
+
 procedure TBrowserApplication.DoRun;
 begin
   // Override in descendent classes.