RobertoPrevato / jQuery-KingTable

A jQuery plugin for administrative tables that are able to build themselves, on the basis of the input data.
MIT License
117 stars 33 forks source link

Basic code not working?! #5

Closed vlatro closed 7 years ago

vlatro commented 7 years ago

I'm trying for hours to run the code for KingTable.

I think there must be a problem with the code, as I even don't see anything working when I try to use your example file(s):

This is my pad (not accessible for you) http://intranetbe:85/cis/js/jQuery-KingTable-master/source/

And this is what I get (empty screen) :-( image

Please help ?!

RobertoPrevato commented 7 years ago

Hi @vlatro, are you running a development server using Python Flask, like described here in the Readme file?

A development server is required, and I needed one for development, since some features require server side pagination, sorting and filtering (since filtering and sorting affect pagination). I chose Python Flask because it's a lightweight and convenient web framework. If you want, I can help setting up the development environment with Python Flask.

If instead you desire example files that do not require a running web server, please download those from the demo, here. This demo works using only static files and does pagination and filtering on the client side: they are fixed tables. I described what I mean by "fixed table" here in the wiki.

vlatro commented 7 years ago

Hi Roberto,

Thank you for the answer!

I don't have a development server using Python Flask, so I want to try tu use the 'static' version.

I just copied some of the code from the demo, but it's still not working. Please find my file attached. test.zip

I hope I'm not asking stupid questions. I'm pretty new with jQuery.

Thanks Gert

RobertoPrevato commented 7 years ago

Hi Gert, Don't worry, you're not asking stupid questions. This aspect of my repository was not enough documented. I just added better documentation on how to run the development server included in the repository.

I am observing the file you sent me, and it couldn't work because it expects a list of objects (in a global variable called COLORS, which you are not loading, because you don't have the

I thought the error would be resolved when I used this location:

But if I do that, i get another (worse) error. image

RobertoPrevato commented 7 years ago

Hi Gert, No problem, you asked kindly and that's why I help :)

So, when you have a problem fetching fonts, you should take a look at CSS: fonts are usually fetched due to some CSS "font-face" rule and JavaScript is not involved. I can see from the browser log that it's looking for open-iconic fonts in this place: ~/styles/openicon/fonts/open-iconic.woff Where ~ represents the root of your web application (the same folder where you should have your main Web.config file), and it's not finding them. Maybe you've got a different folder structure, like: ~/js/jQuery-KingTable-master/source/styles/openicon/fonts/open-iconic.woff I am guessing.

So, the solution is either to recreate the folder structure expected by the CSS rules (i.e. create ~/styles/openicon/fonts/open-iconic.woff), or modify the CSS rules to follow your desired folder structure.

In the second case, you could edit the CSS I wrote, for example replacing inside the KingTable css file:

@font-face {
  font-family:Icons; 
  src:url(/styles/openicon/fonts/open-iconic.eot); 
  src:url(/styles/openicon/fonts/open-iconic.eot?#iconic-sm)

With:

@font-face {
  font-family:Icons; 
  src:url(/your/desired/path_to_fonts/open-iconic.eot); 
  src:url(/your/desired/path_to_fonts/open-iconic.eot?#iconic-sm)

[Edit] Or, override these CSS rules, creating another .css file that you load after the KingTable css, containing a fragment like this one:

@font-face {
  font-family: 'Icons';
  src: url('/your/desired/path_to_fonts/open-iconic.eot');
  src: url('/your/desired/path_to_fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('/your/desired/path_to_fonts/open-iconic.woff') format('woff'), url('/your/desired/path_to_fonts/open-iconic.ttf') format('truetype'), url('/your/desired/path_to_fonts/open-iconic.otf') format('opentype'), url('/your/desired/path_to_fonts/open-iconic.svg#iconic-sm') format('svg');
  font-weight: normal;
  font-style: normal;
}

If you want to work comfortably with the source code (I mean, editing LESS code) you should: install NodeJs and Grunt in a development machine (one where you can install software freely), edit my LESS source code and use the provided gruntfile to generate CSS from LESS source code.