I have a html table with data coming from mysql database.
I would like to filter the table data dynamically with different filters applied. Also I can choose which filters to be removed once it is applied. Sorry for bad explanation. I can explain with an example.
I have the following online shopping website
flipkart_mobiles
On the left have many filters like brand of mobile, price range, OS type and so on.
When I select brand of mobile say Motorola and price range of Rs10,000 - Rs 18,000. We get two filters activated and shows "Shows 13 results in" ( please check the picture attached for reference )
now we can remove the filters existing by pressing close button beside the filter or add more filters on the existing filtered data.
I would like to implement something like this in my html table. However I do not know how is this named ( hence named it dynamic filtering ) or how to implement it.
Please guide me how its implemented. Is it done using javascript or php or something else. Also what this technique is called.
I am a newbie to front end development and I work alone hence I dont know how to search for it. Please suggest me some tutorials on how to implement it.
Thank you in advance.
There are actually several ways to perform what you want to do :
You could use ajax requests to filter what you want (since you put jquery, I suggest you to look at the .ajax() documentation).
It is an easy way to do this. But it won't be very efficient since you'll have to perform a request to the server each time the user choose an option (which can be long if you have a lot of data).
You could also fetch all the data first, when arriving to this page (using pure PHP would be even easier than ajax), and store all of this in an JS object.
I get it might be slow. But it will only be at the page loading. Not at every request as the ajax way does.
Then in your option click event, you can refresh your current displayed table with new data according to both the object you created and the option you selected. E.g :
// This var is created using PHP for example
var phones = [
{"name" : "Moto X Play (16GB)", "brand" : "Motorola", "price" : 15499},
{"name" : "Moto X Play (32GB)", "brand" : "Motorola", "price" : 17499},
/* And a lot of other phones of course */
];
// Then, if you chose a specific brand, you can display only phones with this brand by using phones["brand"] values.
Edit :
It all depends what you want to do in your project :
If you just want to train yourself on a personal project, or if you are doing this for a small company (no more than a few thousands rows in database, and a few thousands users), you'd rather using the pure PHP way.
If you plan to be the most successful entrepreneur of the year and expect your project to be used worldwide by hundreds of thousands of users, you'd better use the ajax way.
In both case, you should use AngularJS, which is a really good JS framework to perform on huge amount of data.
Related
I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!
Using VB.NET/asp.net, I have a page with a Formview. On the Insert and Edit templates, there are multiple dropdownlists for Depts and People. There are multiple sections in these templates and I would say that there 3 sections for each Dept and People dropdown. I would guess that there are upwards of 100 depts and close to 10000 for the People. The requirement is that if the user does not know the Dept, they then can just choose the People dropdown which would provide the entire 10,000 listing of people.
Needless to say, the pagesize of this page is over 5MB....I already had to increase the default
What are my options in creating a dropdown which can handle this lack of filter and would allow me to have a much more manageable pagesize size? Is there anything in Ajax or even Javascript?
Thanks.
There are lot of tutorials on this. Idea is to have an autocomplete control, that is basically a textbox, when you type something , lets say you have typed 'Abc', it will do a ajax call to fetch all records matching 'Abc', then get results from DB via ajax, and show those in selectable div, there you can define events. You don't have to manage anything, except DB call to get required data. The autocomplete control will do the job.
Help links -
http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx
http://www.codeproject.com/Articles/201099/AutoComplete-With-DataBase-and-AjaxControlToolkit
I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)
I need a table plugin that does the following
Uses json and html table as the datasource
supports pagination
can specify how many rows to show by the user(i.e user can change rows per page)
sorting of columns
searching (complex searching options is welcome)
free for commercial projects
dynamic addition/deletion
refresh option
Finally the main requirement is searching, sorting,pagination all needs to happen client side. No server interaction needed.
One more thing dont know if possible say i have 1000 records i want 100 to show up initially in 10 pages (i.e 10 each in 10 pages) only when user clicks on page 11 it fetches next 10 from server
Thanks
The jQuery DataTables are really pretty, and easy to use. http://www.datatables.net/ Lets you roll your own theme super easy. You can build from html or ajax.
You can go check out http://flexigrid.info/ . Its not a table exactly its a grid but you might be able to use it in the same way. It accepts JSON and allows a lot of different ways to change display.
this is what you're looking for: http://www.trirand.com/blog/jqgrid/jqgrid.html
I can't quite figure out a work around for using "Use view dialog for choices" in a web based application.
My Question is how can i convert this settings in my field in the Control Tab then Choices, in choices "Use view dialog for choices" then Use current database and access view and a specific column.
Thanks in advance :)
"Use view dialog for choices" is almost always a way to get around the restrictions on the return value of a formula. For instance, you'd use it when #DbColumn in a choices formula for a listbox or dialog list choices formula would cause an error.
The upshot of that is that there's no "one-shot" workaround for the web. A direct functional replacement would be to open the view in a pop-up window or overlay div, and attach some JavaScript to the view in order to override the default web behaviour and force the return of values to a field on the main document. This approach will work well, but it may require server settings that allow the entire view to be served at once (the maximum lines to display per page will probably be less than you need), and it's subject to breakage if the HTML used to display the view ever changes.
You can use LotusScript or Java in a WebQueryOpen agent to populate a conventional widget (the list of a element) in a Rich Text field, either using PassThru HTML or a "Treat contents as HTML" form. That would involve getting the view, then doing a document-by-document (or category-by-category) run through the view index to get the column values you need. (If you take this approach, use the ColumnValues rather than the document field name to retrieve the values -- the cost of opening the document to read the values is high, and your code will take many times longer to run.)
You can also get the view as need using an AJAX request and a ?ReadViewEntries query, which will return an XML representation of the view. Again, you may have to have the maximum view lines per page limit upped in order to get the amount of data you need. You can get around that, though, by using a "suggest" method that doesn't begin retrieving data until the user enters at least one character into the field.
All of these approaches mean using a separate form for the web. That's easy enough -- you simply create a form with the same alias (or name, if you're not using aliases) as the one you're using for the Notes client. In the list of forms in Designer, you can use the hidewhen tab to hide one from the Notes client and the other from the web. (Note that you can create an additional form for mobile devices the same way if necessary.)
I can't get more specific than this with the information at hand. If this is insufficient to point you in the right direction, then edit your question to be more specific (and post a comment to this reply -- I don't spend a lot of time on SO, but I do spend time on other StackExchange sites, so I'll be notified).
Unfortunately, you have to develop it yourself.
http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=AJAX%20Name%20Picker
AJAX-based name picker is a good start I guess.