New post
Question
· Dec 12, 2019

Bootstrap Tables & CSP

#CSP #ZEN #Caché

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
Log in or sign up to continue
Anil Mathew · Dec 15, 2019

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>

        <link href="https://unpkg.com/tabulator-tables@4.5.2/dist/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.2/dist/js/tabulator.min.js"></script>

</head>

<body>

<div><table id="tblAbcd"></table></div>

<script language ="javascript" >

     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
Anil Mathew · Dec 16, 2019

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

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