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

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.

Related

Favourite way to sort / filter tables in Laravel on client side?

I have various tables that contain MySQL data in my Laravel web app, but I want the user to be able to sort on the fly by any column header they want; same with filtering. To be clear, I want this all to be processed on the client side.
From what I can tell, Laravel doesn't ship with this functionality. In the past I was able to do this with DataTables, but that was with a pure php application; not with a big framework such as Laravel.
What are some of your favourite solutions?
#lukasgeiter is correct in saying that this is more of a javascript question and has nothing much to do with laravel.
That said, I've found the most simplest way to achieve something like this is Sortable. You can find out more here: http://www.kryogenix.org/code/browser/sorttable/
If you set it up properly, all you have to do is add class='sortable', to your element and it would just work.
Hope this helps.

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 :)

Dynamic Tables with Spreadsheet Capabilities in Websites

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

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.

JavaScript to generate/render dynamic HTML form from JSON or similar data?

I would like to offer viewers a contact form that is modified according to the user's input. An example of such a form is on the Ext JS site.
I have not looked into the product, but I would like to know if there are any other programs/functions that generate such a form dynamically? I found only samples on adding other input elements to existing forms.
Here are some other implementations:
http://neyeon.com/p/jquery.dform/ (depends on jQuery)
http://neyric.github.com/inputex/ (depends on YUI)
http://robla.net/jsonwidget/
I also plan to add this functionality to my own js-forms library, which would also handle validation.
You can always create whatever DOM structure you like using JavaScript. Be it additional inputs or even additional FORM elements. It then depends of course what you use on the server side to process form data and how you do that.
Maybe I haven't understood the nature of your problem because you haven't explained yourself too good.
ExtJS is a JavaScript library that does everything on the client side. It also provides the ability to rapidly create user interface by providing Javascript configuration objects that will result in rich widget creation.
You can do lots with jQuery (and jQueryUI) as well, but it's up to you how to do it. ExtJS just has these very functionally rich and visually consistent set of client controls/widgets that you can use out of the box without much additional development (not to mention bug killing that comes along custom development).
For instance: When writing an Asp.net MVC application it's very easy to issue an Ajax call that would return HTML of so called partial view with complete HTML of your form that you can then easily display in a modal dialog for instance.
If you do need all that functionality to create a desktop-like application I suggest you do take a plunge into ExtJS because it is definitely a very good product. I've used it about 3 years ago (version 2) on some project and I was amazed by the work they've done with it. It's very feature rich product that makes it really easy to create desktop like web applications.
But if you're after a usual web site then a desktop-like experience is probably not what you should give to your visitors.

Categories

Resources