Dynamic Tables with Spreadsheet Capabilities in Websites - javascript

I'm looking for a way to do spreadsheet type actions with a table on a website that I'm creating. I looked quickly at KendoUI, but that seems to be a little too far out of my budget. Wondering if there was anything cheaper that I could use.
The main features that I'm looking for is to be able to hide columns, filter rows, and row selection via click-drag.
I have very little js experience, but don't mind looking into it to get started. Would need some direction in where to look for that.
The web application is php based, and runs off of the CodeIgniter Framework.

You need to use jQuery plugin, depending on your need, you will find greats frameworks

I've done a bit of searching and found this one:
http://visop-dev.com/Project+jQuery.sheet

Related

How do I add a full site search to a website in Javascript/jQuery?

I am creating a HTML5 website and I need to create a site search box that
displays results in a results page with description and photo.
How would I go about this.
I have looked alot and only see google search and thats not what im after.
Can this be done without PHP or RAILS?
Looking for purely JS and html5 and css and jquery.
Thanks and a point i the correct direction would be great.
Example is this Wordpress sites search http://agroamerica.com/
I dont want to use WP but hand code it.
Any help is great.
Your best bet, given that you don't want to implement a third party indexing service, would be to set an indexing function on your server's back end to handle search requests. You mentioned Rails, and there are some pretty great gems for this.
One point of trouble you will have with this question is that, in my experience, full site search functionality without a back end / database to query is not a very useful solution for any applications I've seen.
However, given that you want to keep it JS, you might look into the MEAN stack (MongoDB, Express.js, Angular.js, Node.js) which does some pretty sweet things like two-way data binding. It's a pure Javascript solution (albeit not a purely-front end solution).
Honestly, it sounds like you might be taking too big of bites to start off with. Try working through a scripting language on a site like Code Academy and learning about basic web application setups like MVC (a common way to handle different parts of a web application (used by the aforementioned Rails)). Stack Overflow users can be pretty brutal when you ask questions about advanced functionality without some understanding of the functionality's underlying elements or functional requirements, and search engines from the ground up have historically been the thing of doctoral dissertations.
Good luck!

Any suggestions/examples of editing data in HTML tables with Laravel?

Just wondering if anyone had the need to edit and update data straight in a HTML table using Laravel?
I have built out all the "create" tables for various tasks, but would like the ability to alter the data straight on an "index" page.
There are various JS libraries out there, but I was wondering if anyone knows or has done this within Laravel?
any feedback would be much appreciated.
Since Laravel is a server-side technology, you would probably want some sort of javascript library to achieve that functionality--unless you're willing to use forms that look like tables or tables with form elements inside them. You might also have some luck with contenteditable attributes and events. HTML doesn't have an editable form out of the box that automatically interacts with the backend (Laravel in your case).
It depends on what you want to use the tables for; if your tables have a lot of data, you might later want sorting or pagination and that's something javascript table libraries are useful for.
If your tables are simple or exist mainly for style purposes, you might be able to get away with not using javascript much or at all. It would be fairly unusual to go this route, though, and probably take a little longer to get a working prototype.
I'm using Laravel Datatables for data display on Laravel 5.3.
And thinking of extending it with this paid version of table editor.
There's an extension for Datatables editor integration.
Seems to be the best option for my project so far.

JavaScript Grid that create markup in HTML5 Web Worker

I am working on Business intelligence based web dashboard, i have tried several Third party JavaScript grids namely JQGrid, ng-grid.
Problem is that when Grid try to Render with big data Object it stuck and crash the browser.
Now i am thinking to Write my own GRID using HTML5 web-worker,it will create html mark up in String from data object and then pass to main object and append in DOM.
Please write suggestion about this approach,
and name the Grid that use this approach if any..
Thanks
One of the most performant grids for huge amounts of data is SlickGrid.
If you are to write your own you should ensure you avoid paints, like comments mention, and use a virtual scroll if you really have a lot of rows (100k+++).
I once started writing my own grid and I can guarantee you that making it performant for lots of data while keeping it usable is not exactly an easy job :)

A REST api backed JavaScript table

Here's the problem:
I need a table I can quickly 'plug' into my webapp.
I have existing REST endpoints for getting the table data in JSON, either with pagination or without. Now, if I could only find a JS table component that I would configure to use my endpoints (I can modify them to meet the tables requirements).
Misc: If the table requires jQuery that's fine with me, and utilizing Twitter Bootstrap CSS is optional and much welcomed.
As Toni said in his comment, jqGrid is probably your best bet for quick results, and it has extensive styling options. Be aware though that the HTML it produces is quite verbose. If you are deploying to mobile it may make sense just to spit out your own HTML table. This is dead simple if you are using jQuery already.

Fastest sortable Javascript html table

I have seen a number of Javascript examples to throw on top of an html table to make them sortable. The issue is that everyone I have seen and tried are insanely slow.
Any suggestions or recommendation for a good performance solution.
I've found (just in casual use, not via any intensive analysis) that the jQuery TableSorter plug-in has a decent performance rate, and is quite advanced compared to any of the other solutions out there.
Of course, it relies on jQuery, but if you were picky about footprint you could analyse the method used by the plug-in and create your own lighter implementation.
Have you tried tablesorter (powered by jQuery)?
Check it out at: http://tablesorter.com/docs/
It's pretty easy to use.
If this is for a web app and you have a lot of data, it may make more sense to do the sorting server-side using SQL or whatever ORM you're using.
The fastest way to sort that I found is to actually just sort the rows in the table. If you move a cell in the DOM the entire row will move, and so be sorted.
Here is a sample of doing this, as I don't remember the article I read about doing this originally.
http://www.eggheadcafe.com/community/aspnet/3/10051794/try-this.aspx
I've spent a lot of time evaluating various advanced table libraries, including the jquery one, the dojo one, the YUI datatable, and GWT's paging scroll table. I was unsatisfied with the performance of any of them for tables with thousands of rows (and I think paging is a poor solution as well).
I concluded that flash is the way to go with this kind of scenario.
A site that gives an example of a flash table with 10000, 100000, and a million rows can be found here.
There is also this site, which allows you to compare the performance of a javascript and flash implementation of an advanced table.
Perhaps Javascript isnt the solution here then - you could do server side sorting or consider a flex/actionscript based solution.
I was using W3 School Sort plugin and it was really slow with a table of 250 rows. Unresponsive for a good 5 seconds.
Switched to tablesorter.com as mentionned in the replies. Works like a charm. Much, much faster. No wait at all now.

Categories

Resources