Written by

Principal Integration Architect | Cloud Computing | Data Science | AI & ML | CSM

Question Neerav Verma · Dec 12, 2019

Bootstrap Tables & CSP

#Caché #CSP #ZEN

Hello All,

We need to develop a small csp application which shows data in simple paginated / searchable table for business users.

It is to be built on an old version of Cache and is not a big full fledged application but something temporary. We can't use Zen and using a combination of csp & Bootstrap as bootstrap makes the pages look beautiful with little effort.

I have built the table in boostrap and it works fine with pagination and search working perfectly

The problem occurs only when we go above 500 records.
The table loads super slowly , pagination and search - All breaks down and all records are displayed on one page.

I am not a master in bootstrap , thus have plan to dig more into bootstrap and look for solutions .

However I was wondering if someone has already faced this problem and resolved it and have some examples.

Any suggestion to alternate approach is also considerable.

Discussion (6)1

Add reply

Comments

Timothy Leavitt · Dec 12, 2019

I've had success with https://bootstrap-table.com/ before.

0 0

Neerav Verma Dec 12, 2019 to Timothy Leavitt

Hi Timothy, do you have any sample code that you can share?

How much data were you loading in your tables

0 0

Anil Mathew Dec 15, 2019 to Neerav Verma

Hi Neerav,

You could try http://tabulator.info/. This is quite fast and responsive. I have tested over 10000 records. It supports bootstrap as well.

Please find some code to get you started. There are lots of examples in the documentation.

<head>

</head>

<body>

var ret = #server(MyPackage.MyClass.GetDetails()#;
var retJSON = JSON.parse(ret);

var ht=600;

var pageRows = 50

var table = new Tabulator("#tblAbcd", {
   data:retJSON, //load row data from array
       height:(ht+"px"),
    layout:"fitColumns", //fit columns to width of table
          responsiveLayout:"hide", //hide columns that dont fit on the table
          tooltips:true, //show tool tips on cells
          addRowPos:"top", //when adding a new row, add it to the top of the table
          history:true, //allow undo and redo actions on the table
          pagination:"local", //paginate the data
          paginationSize:pageRows, //allow 7 rows per page of data
          movableColumns:true, //allow column order to be changed
          resizableRows:true, //allow row order to be changed
          initialSort:[ //set the initial sort order of the data
          {column:"gstName", dir:"asc"},
          ],
          columns:[ //define the table columns
          {title:"Id", field:"id",visible:false},
      {title:"Name", field:"gstName", editor:"input", headerFilter:"input",sorter:"text"},
{title:"DOB", field:"dobDt", editor:"input",headerFilter:"input",sorter:"date"},
          ],
   });
</script>

</body>

Hope this helps
Regards

Anil

0 0

Neerav Verma Dec 15, 2019 to Anil Mathew

Thanks Anil,

One question before I give this a try

Your method MyPackage.MyClass.GetDetails()
Is this returning a result set with some query eg Select col1, col2 from TAble1??

0 0

Anil Mathew Dec 16, 2019 to Neerav Verma

Hi Neerav,

No, I am returning it as a JSON string.

something on the lines of

ClassMethod GetDetails ()
{
set result = []
&sql(declare a1 cursor for select ID, GName, DOB into :id, :gName, :dob from MyPackage.MyClass)
&sql(open a1)
for{
&sql(fetch a1)
quit:SQLCODE'=0
set rec={"rid": (rid), "gName":(gName), "dob":(dob)}
do result.%Push(rec)
// do result.$push(rec) ; for older version of cache
}
&sql(close a1)
quit result.%ToJSON()
// quit result.$toJSON() ; for older verions}
}

Regards

Anil

0 0

Timothy Leavitt Dec 16, 2019 to Neerav Verma

For bootstrap-table, I think the examples on their site are probably more useful than anything I could dig up. https://examples.bootstrap-table.com/#welcomes/large-data.html shows pretty good performance for a large dataset. Tabulator looks nice too though.

In any case it would probably be cleanest to load data via REST rather than rendering everything in the page in an HTML table and then using a library to make the table pretty.

0 0