I have a form where users are entering 35 different fields.
I have a Content Management System where I want to display the results of an order on the form.
I've thought about adding a horizontal scrollbar inside the table, or limiting the table to the 10 most important columns and then making it so the administrator has to click on an entry to view all of the information on its own details page.
Do you know any creative ways that I can display the 35 fields on one page?
A standard Master/Detail Form should work. The table/grid would have key pieces of data and below it, the detail form would have all the details in a user friendly layout. To see the detail a user simply needs to select or click a row in the table/grid and the information rendered in the detail area is updated by the On_Click/On_Hover/etc event.
I don't know if this will fit your needs, but the jQuery ScrollTo plugin might be an interesting alternative to just a plain horizontal scrollbar.
Edit: There is another addon you might want to look at called columnManager.
I have had instances dealing with grids that are wide. In my own opinion, I think it is best to use the browser's (horizontal) scroll bar instead of having an "inner" (horizontal) scrollbar. A problem with http://demos.flesler.com/jquery/scrollTo/
Also, no clicks are involved or whatsoever. The user will be able to see everything by just scrolling. On the other hand, allowing the user to hide/show columns would also be good.
Related
I want to display my data coming from sql db to front end. I want it to be displayed in some special manner.
Lets assume I have 8 element in total. I want to display only 3 data field at first in a row, and below that a message saying 'show remaining 5'.
Once someone click that another three should load and below a message would show 'show remaining 1'.
I am not asking for a ..read more type option. I want to display remaining data into segments, but not all at once. If anyone can guide me, what can I use or if there is any useful plugin, I am already grateful.
Thanks in advance for anyone who put some effort.
This sounds like something that would be done by JavaScript. This means building the whole table right away, but hiding all but the top 3 rows. Then hook a function to the "Show three more" button, that displays three more rows (until all is shown).
jQuery is a JavaScript library that is easy to get into and would help you get this kind of functionality going, but it is of course entirely possible to do without it.
If you are entirely new to web development with php, sql, html, and javascript I suggest looking at basic tutorials on how to accomplish the basics first, such as fetching data from a db, displaying that in html and how to modify the DOM with javascript.
You need to provide more information, but im gonna answer according to what i understood.
First you need to put the data in a table using <table><tbody><tr></tr></tbody></table>.
Then you can hide the other 5 data fields using css, you can use visibility: hidden or display:none.
Then you can display a message using bootstrap alert class thats says 5 other fields remaining.
In one of my projects, I have many different sections where I need to filter some data and select the required, for example - On newsletter page where I need to click a link to "add users" which opens up a popup window where I can search users by name, ID etc then check the checkboxes and click "Select". This adds their IDs (or maybe emails) in the hidden form on the Newsletter page.
Similarly, I need to attach a file to newsletter then I click on an another link which opens up a popup with list of files which I can search and then finally select one. I have similar other requirements in other sections of the website which means I have to write similar type of code again and again.
I won't mind duplicating code if it were to be used at one or two places. But I have more than 8-9 different sections where I have to select users, files, some other items etc so I was thinking if there was a generic plugin sort of tool which takes a url of the search page and returns the data back in a specific format to the parent opener window then I just include that code on each of these pages and just have to maintain one/two files only.
How would you handle this sort of requirement? Is there any JQuery plugin available which does similar thing?
I'm not aware of a plugin for this, but this Q&A looks relevant:
Open popup and refresh parent page on close popup
Perhaps you can be the hero who implements such a plugin, Mr user1421214!
I'm having trouble and I wanna ask, if it's possible to have column-based tables when PHPMaker generates tables for records? Because when I generate it only generates row-based records. Copy-paste the link below to URL to understand. I'm sorry I'm not knowledgeable in PHP that much. It's just very easy to make a complete application with this program and the only thing stopping me is the format of how it's shown. An example of how I wanted it to look like would be this one
I hope somebody answers! Thanking you all in advance!
That kind of column based view is not suggested as it has many flaws when we try to display huge number of records. Adding pagination or sorting feature is very difficult and not user friendly.
As you have so many fields you could try to group them into tabs by relevancy. Once you put them under different tabs they can be easily navigated and easily fit into row based structure.
Creating tabs is PHPMaker is very easy, on field configurations screen you will get Page No config next to each field. By default it set to 1 you can set required page number as per your choice. Once you done go to Table config of the table which is second tab available for each table. Scroll down to bottom and and click on 3 dots next to Page Labels config (Under Multi Page Config). This will pop up a screen where you can add captions for your tab.
Screenshot mockup: http://tinypic.com/r/y2qex/5
Problem: I have a table that has 53 columns; one for each week of the year, plus one with the user name. It will have anywhere between 10 and 80 rows, depending on the number of users for each area.
The users need to be set a “flag” for each week, such as Annual Leave, Training etc.
I currently have a table, which has a select box in each cell. The problem is this works for 5 rows, but once I start getting 20+ rows, the browser wont open the page, because there are just too many select boxes.
Whatever new selections are picked must be able to be queried, so I can save them in my DB.
What I’m after are some generic ideas (i.e. not specific code) on how I can better solve this problem. Once I get a good idea, I’ll go off an work out the exact coding.
My ideas so far:
- Make all cells text only, with the current selection, then have an ‘edit’ option beside each user, which opens their row as a modal window which can be editted
- Make all cells have a “onClick” event, causing a dropdown list to be generated at the point of click
But I’d be keen to hear how other people might approach/solve this problem?
If the options are the same for many select boxes, you could consider using one datalist for all of them, this would be more performant, and I'm guessing allow you to have more per page. Unfortunately this is an HTML 5 feature, so it would not be backwards compatible with all browsers.
http://www.w3schools.com/html5/tag_datalist.asp
Other than that, you could consider pagenating your table if it gets over a certain number of columns. Or do like a tumbr thing, where more columns load via ajax if they scroll to the right far enough. You idea also should work.
You might want to look at using a calendar feature, I'm sure there's a ton of Javascript calendars out there. I also have had a lot of success lately using DataTables. You could use DataTables + jEditable to create a click to edit table representation, that when clicked gives you a select box, but otherwise shows only text.
Perhaps you could have a single hidden select box on the page and display it on a cell when clicked, and handle the result of the click by writing a data-attribute to the cell, and perhaps doing a simultaneous XHR?
You could also just have a bunch of hidden form elements, but that would be gross.
Implementation-wise, you could do it with a single event handler attached to the table, with each cell having data-attributes representing name and week.
Anyway, this should be performant, even though it would require an extra 20 or so lines of js.
Maybe something like this could work for you:
var td=document.getElementsByTagName('td');
for(var i=0; i<td.length; i++)
{
td[i].id='cellID_'+i;
td[i].onclick=function()
{
//make menu appear on this element id
}
}
In my project the user has to detail his management expenses in four different areas. At first we had a simple table (this one) where he had to write all the data grouping all the expenses description in a textarea, now we want him to detail each area, so i have to give the user the possibility to add "rows" to each area. That means that if his "Impegni" expenses consists of three entries he must enter three "rows".
My idea is to use jquery to let the user add rows and modify the rowspan of the first column when the user adds/remove a row (that is, if you need to enter another row for "Impegni" i create a new row under the third row and add "colspan=2" to the "impegni" cell) but maybe there is a better way to handle this kind of input.
I try to explain it even better: the four rows that are present in my table are the "master" areas and the user must add details to those areas. Creating new "sub-rows" for each area it's an idea, but maybe there is a better way to handle it!
EDIT - another idea is to have four different tables (one for each one of the "master" rows) and show hide them with tabs (look at example five on this page) but i don't know how to handle the sum of all the rows
What do you suggest?
My friend has made a plugin for it, you can look here.
I think jquery is the best way, you can access your database with simple ajax command from jquery, like .load()
:)