You are viewing limited content. For full access, please sign in.

Question

Question

Include external library using Ajax or any other recommended method

asked on January 16, 2020

Hi

I am still learning and I do not have a better frame of reference for help other than this community.

I would like to incorporate Tabulator into my Laserfiche integration.

I have previously built a similar integration with Google's Places API.

However, I copy pasted and easily changed my variables to suit my project.

Now, I want to use this: http://tabulator.info/

The libraries are: https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css

And: https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js

Their tables are truly amazing and I think an incredible integration can be built.

I tried this:

But keep getting the error:

Now from my recent experience with what little I've managed to teach myself, this means essentially that my library is improperly reference/not there to use Tabulator.();

Is there any gifted individual that could give me a hand please?

Trying to get the attached project to work in Laserfiche Forms (excuse the massive JSON db/variable - it's for another project). - See index.txt attached.

Kindest regards and many thanks in advance.

 

 

index.txt (325.89 KB)
0 0

Answer

SELECTED ANSWER
replied on January 16, 2020
1 0
replied on January 17, 2020

Dandy :)

Thank you sir

1 0
replied on January 17, 2020

Looks sexy!

0 0
replied on January 19, 2020

Just an fyi to anyone who reads this post and maybe wants to integrate with Tabulator;

The table data is deleted when saved into the Repo, I do not have a fix for this but will post here when I do.

Thanks again Rich

0 0
replied on January 20, 2020

You may try setting the Tabulator Printing options to see if printAsHtml:true helps.

0 0
replied on January 23, 2020 Show version history

Bert, it doesn't exactly work since the printAsHTML functions similar to a PDF you are viewing in Google Drive and you press ctrl + P.

It is still saving blanks in the Repository.

Thanks for the info though. Script looks like this now:

$(document).ready(function () {
  $('head').append('<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">');
    $.getScript('https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js', function() {
      var tabledata = [
     {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
     {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
     {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
     {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
     {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];
        var table = new Tabulator(".MyTable", {
     height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
     data:tabledata, //assign data to table
     layout:"fitColumns", //fit columns to width of table (optional)
        printAsHtml:true,
     columns:[ //Define Table Columns
         {title:"Name", field:"name", width:150},
         {title:"Age", field:"age", align:"left", formatter:"progress"},
         {title:"Favourite Color", field:"col"},
         {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
     ],

});
    });
});

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.