How to handle large dropdownlist? - javascript

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

Related

Dynamically filter html table data

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.

Dynamically show/hide subset of records?

I am writing a web app using PHP, MySQL, jQuery, and some miscellaneous add-ons like jEditable and DataTables. On most pages, the user will submit a form which will query the DB and bring back records matching my query rules. This works for 95% of my users 95% of the time. It's the other 5%/%% I am trying to help.
I am excluding records that are no longer being processed (completed/cancelled/accepted/rejected/etc.), leaving only "live" records. However, sometimes the leadership team needs to see the records I exclude. I could write a whole other page or report for each case, but that seems a huge waste of time.
Is there a way to add a "show all records" checkbox or button to my page? When clicked, the button would get and display the rest of the data, so users don't have to refresh/go to another page/etc.
you should add a toggle switch - it could be just a check box, or you could use something fancy like this: http://simontabor.com/labs/toggles/
Bind an event to it that preforms a table.ajax.reload() in datatables to pull in the new records. Also, for the datatables ajax request, provide a callback that returns the toggled state of the toggle control as a post variable, then handle the filtering in your sql on the back end.
Note, this solution means you will have to configure datatables to source data via ajax, which, from what you described sounds like you should be doing anyway.

Render huge list in select

I have a PHP application where a list of people is displayed in a select box. With time this list is now more than 100,000 long and the screen takes about 20-25 seconds to load. Is there any way I can cut down on this time? Tried loading the names via ajax, but the performance is same or worse. This also needs to be the first item selected on screen, as the rest of the items are dependent on it.
You could use ajax as you already tried, but instead of displaying all names, you could do something like autocomplete, which will display matching names when users start typing.
Example in jQuery: http://jqueryui.com/autocomplete/
Can u use jScroll?
you can just implement in your select dropdown, by replacing the contents to your list items.
Or you can see this.. jsfiddle
ember.js

Searching, sorting, paginating and filtering DIVs using Jquery/AJAX/Javascript

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)

Jquery Table plugin

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

Categories

Resources